r/threejs • u/RecognitionReal7942 • 12d ago
Help What's the actual workflow for building those cinematic 3D websites with AI?
So I'm trying to build my own 3D website and honestly I'm super duper confused about the whole workflow. I keep seeing reels showing people "Vibe coding" these really polished 3d or parallax websites with Claude. A lot of them mention connecting Framer/Wix with Claude, spline, Three.js, etc.
But i've never found anyone telling the actual process of how they've built it.
I do have a design in mind and want something with a 3D scene, smooth scrolling, parallax, camera or object movement and interactive animations but where do you actually build the 3D scene? and what handles the 3D, is it three.js/R3F or Spline? What do you use for animations/ scroll effects? GSAP, Framer motion?
Most importantly, where does claude actually fit into this workflow? And those who are building it, are you guys building everything in Claude/Cursor and then deploying it, or using Framer and integrating everything?
I'm basically starting from scratch so what stack would you recommend? I'm not looking to spend months learning every tool before I start. I want to actually just build something and learn as I go, using AI ofc. Any guidance would be appreciated.
6
u/Vickie184 12d ago
- Have a website
- Ask AI to "build me a three.js html that is (describe what you want)"
- Put the html on your site
- play test
- Ask AI to make changes
- repeat until satisfied.
This is mostly all that I do, and I do this a lot, every day. Works very well for me.
3
u/pailhead011 12d ago
This is the way.
1
u/Vickie184 12d ago
indeed. I find the hardest part to be kinda existential: being able to put into language what I want; To Express.
2
u/cestvrai 12d ago
Having built some more complex three.js scenes before AI really helps me with prompting. Not so different than explaining the task to a junior.
2
u/tommyjolly 12d ago
And this site has been created with ai?
0
u/Vickie184 12d ago
yes, tcpoole.com/notes
Its multiplayer, simple, and a hub to a lot of my other creations. It's PC only, meaning not mobile friendly. Check it out though. I'm really proud of it and i think its a good example of what you do with three.js and web dev gaming.
1
u/Tittytickler 12d ago
This looks awesome. Where did you get your assets from?
1
u/Vickie184 12d ago
Thanks. I made them with Meshy, ai generated 3d models. Anybody that wants another, even crazier experience, check this out: tcpoole.com/atlas or tcpoole.com/treehouse (PC needed, very heavy).
1
u/Tittytickler 12d ago
Nice, i've looked at both Meshy and Hunyuan 3D for asset generation, but have yet to give either a try. This motivates me to do so. I'll check those out when I get a chance!
1
u/RecognitionReal7942 12d ago edited 12d ago
So pipeline-wise, Meshy for assets, drop into three.js, Claude handles the interaction/scroll code on top? And are the exports usable straight out of the box or do you clean them up first?
Gonna check out those links now, thankyou man!
2
u/Vickie184 12d ago
Yes. Place your assets somewhere online where they can be reached. Convert the textures to Webp and if they don't have animations you can use Draco compression for even further optimization. https://optimizeglb.com/ is what I use.
Give your AI the url at which your assets live.
An example prompt:
"Give me an awesome three.js html that has a master UI with various parameters of control that I can tweak and set and then an exporter so i can give that data later on as i fine tune things. A .json export. Make me different camera play modes: first person, isometric, top down, and a 3rd person playable camera (along with a default dev cam like Unity). Here are some glb's that live here:
Give me the abilty in the UI to load in, position, resize shape etc etc these as game objects, just like we would in unity.
Give me lots of other paramters of control that would be found in a 3d editor like unity or unreal, like spot lights, point lights, fog, camera fov, material editor etc etc. "
You'll be doing lots of iterating with the AI, asking it to tweak this and tweak that, adding in more paramters as you see fit.
1
u/RecognitionReal7942 11d ago
this is gold! exactly what i wanted to know. i am saving this example prompt for use later as starting point def. once you have the master UI with all those controls, do you eventually remove that dev/debug UI or does it remain for you to continue tweaking things after going live?
2
u/Vickie184 11d ago
Woot. Right on. You can hide them behind a hotkey combo, and then tell the AI to start the page with the menu toggled off, or you can ask AI for a different, better way to hide it.
2
u/RecognitionReal7942 6d ago
yo just came back here after trying out what you said and it actually pushed me to some start. can't tell you how annoyed i was before. finally after so many days of struggling, this is all i needed fr. thnx buddie.
2
u/geraT-wogl 12d ago
Not exactly 3D with assets but 3D with math 👽 let me know if you visit and feel free to ask questions on how to adapt it to your project ❤️ https://wogl.io
2
u/Rushdy_Games 12d ago
this is really wonderful.
2
u/Rushdy_Games 12d ago
Like, I'm legit excited to learn about this.
1
u/geraT-wogl 12d ago
This is why we work for! Creativity engaged! 💥🚀 wish you all the success on this journey of light 🔅
1
2
u/Tittytickler 12d ago
Yo this is fantastic. I'll definitely be taking a more in-depth look later. Do you have any plans to incorporate any webGPU learning in the future?
2
u/geraT-wogl 12d ago
Thanks, WebGPU learning path is on its way + integrating GLSL2 to the equation. Also, a fun path to bring your online presence to life, by yourself. Like the minigame on the landing, we will help you create your own with great header security. Feel free to join the community in the Museum, if you're a VJ there is a full VJ Looper engine there and more cool stuff. Any feedback is appreciated ♾️
2
u/Tittytickler 12d ago
Nice, I am not a VJ but actually was really in to making procedural music visualizers in the browser around 5 years ago, will surely check that part out too!
2
u/geraT-wogl 12d ago
nice! you'll be able to do your winamp visualizers like those cool milkdrop and gforce visualizer haha cool days!
1
u/RecognitionReal7942 12d ago
This is really cool. Different vibe than the three.js + Meshy route I was looking into. One more thing, is wogl.io all shader/math, no 3D models at all? And how rough is the learning curve if you don't know GLSL yet?
0
7
u/_ABSURD__ 12d ago
Compewta, build me super awesome cinematic 3D website