VIBE WIRE
Back to Episodes
Episode
4
June 23, 2024
16:26

Vibe Wire - Spicing up the website with AI 3D Generated Content (Behind the Scenes)

In this episode we update the Vibe Wire website with new AI Generated 3D content and explore new tools

Play EpisodeDownload

Vibe Wire - Spicing up the website with AI 3D Generated Content (Behind the Scenes)

Hey everybody! My name is Dave, checking in for another episode of Vibe Wire. In this episode, I wanted to address a component on our website that's been bugging me.

The Problem: A Non-Functional Podcast Player

So this podcast player component - I really like the look of it, but it was created with the idea of a traditional podcast in mind. I don't have an RSS feed yet, so everything is going through YouTube. If you click on any of these play buttons, it'll take you to YouTube.

The bigger issue is that this component doesn't work at all right now, even though it looks really cool. Before I really start to push this thing out, I thought it might be nice to replace this component with something equally cool - and functional.

The Solution: AI-Generated 3D Content

I decided to replace the podcast player with a 3D generated component. Let me show you the tools I used and the entire process from beginning to end.

Tool #1: Meshi

The first tool I tried was Meshi. There are a couple of these AI 3D generation tools out on the market right now, and this one worked pretty well.

How it works:

  • You upload an image
  • It converts that image to a 3D rendering

My experiments:

  • Started with our detailed logo (with wiring and everything underneath)
  • The detail was too complex to render well in 3D
  • Switched to a simpler retro video game console concept
  • Much better results with less detail and no text complications

Tool #2: Z3D AI - The Winner

I ended up going with Z3D AI because I got better results. It just nailed the logo and looks really good overall.

Why Z3D AI worked better:

  • Clean logo reproduction
  • Better overall rendering quality
  • Really good free plan (25 credits per generation)
  • Only one model, so no confusing premium options

The Creation Process

Step 1: Generate the Base Image

I took our logo and put it into ChatGPT with a simple prompt:

"Generate me a game cartridge that includes the logo"

This created the base image I needed for the 3D conversion.

Step 2: 3D Conversion with Z3D AI

Best practices I learned:

  • Ideally use 1-5 images for best results
  • I was pushing it pretty hard with just one image
  • They have a built-in AI tool if you don't want to use ChatGPT
  • The process takes about 2 minutes
  • Results were consistently good

What I tried that didn't work:

  • Getting ChatGPT to rotate the image for different angles
  • It just wanted to spin it in circles rather than show different 3D perspectives

Step 3: Export and Integration

File format: Downloaded as a GLB model (standard for web development) File size warning: Almost 9 megabytes - much larger than typical web assets

Performance considerations:

  • Could impact site loading times
  • Will increase bandwidth costs with high traffic
  • Fine for low-traffic sites, but keep this in mind
  • Might need optimization for production use

Technical Implementation

Three.js Integration

I used Three.js for the 3D rendering - this is the go-to library for 3D web development.

What Three.js enables:

  • Advanced WebGL processing via JavaScript
  • Interactive 3D websites and games
  • Professional 3D rendering in browsers
  • Extensive community and documentation

Component Development

I used Claude to help build the 3D component:

Features implemented:

  • GLTF model loading
  • Adjustable parameters (rotation speed, zoom, lighting)
  • Interactive controls
  • Responsive design

Lighting adjustments:

  • Started with studio lighting (too bright)
  • Tried night preset (too dark)
  • Settled on forest preset with adjusted intensity
  • Perfect balance of visibility and ambiance

The Results

What we achieved:

  • Replaced non-functional podcast player
  • Added interactive 3D element
  • Maintained visual appeal of the site
  • Created engaging user experience
  • Discovered even small details like cartridge prongs were rendered

Bonus: SEO and Metadata Updates

One thing I noticed (and see in many AI-coded apps) - the default metadata wasn't updated. This makes sites look amateur or obviously AI-generated.

Quick fix in layout.tsx:

// Changed from default "Create Next App" to:
title: "Vibe Wire - A daily podcast"
description: "Latest AI coding and marketing tools"

Small details like this make a huge difference in professional appearance.

Future Plans

Interactive cartridge system:

  • Want to create something more complex
  • Users could "push in" game cartridges to listen to episodes
  • Each episode would be a different cartridge
  • Beyond this video's scope, but definitely on the roadmap

Key Takeaways

  1. AI 3D generation is accessible - Free tools with good results
  2. Simpler designs work better - Less detail = better 3D conversion
  3. File size matters - 9MB is significant for web assets
  4. Three.js is powerful - Great for adding interactive 3D elements
  5. Don't forget the basics - Update metadata and SEO elements
  6. AI makes fun features feasible - Why not make websites more engaging?

The Future of Web Design

With the advent of AI 3D models, we're going to see a lot more fun things on websites - design quirks and tweaks that make sites more engaging. Since it's becoming so much easier to build websites, why wouldn't you make them more fun to use?

That's it for this episode! Thanks everybody for tuning in. I hope to make some fun updates to this in the future, and I'll be sure to share the process with you all.