
opus 5.5 is insane with 3d. i built this as a pm w/o coding or game dev exp
finally, i was able to replicate this kind of 3d interactive world in the browser itself. it runs completely well even on mobile.
i don't have any game dev experience and of course I'm not a graphics engineer, but the level of capabilities these models have opened up is just mind boggling.
reddit only allows you a GIF of less than 100 MB, so I had to clip out most of the video:(
tech stack i used for this
---------------------------------------------------------
- three.js for the 3d scene
- react + vite for the frontend
- opus 5.5 (high) for the code
- supabase for the database
- vercel for deployment
the process i used. you can build for your website
----------------------------------------------------------
step 1: find a reference for the website layout
- do not start from a blank page. better if you have a website ref to start with.
- if not ask claude to give you 3 radically dif websites using mcp tools like mobbin
- pick the one closest to your idea. i use a design iterative process i found from lenny.
- btw i sketched my hero by hand and asked claude to turn it into a wireframe
step 2: set the design and art direction
- lock the look before you write any code. try /design in claude to iterate with mocks
- use reference images to generate art style or direction with chatgpt or google image models
- do the back and forth in the image model. it is cheap to iterate there, and expensive in code
step 3: build the main objects (ship, background, people)
- opus is very good at real world 3d objects but very not good at modelling humans yet.
- it does not really sculpt a person. tried it multiple times but gave me slop.
- so for humans: i did not build them in code. i downloaded a free 3d modelled pack. built the clothing and hair on top of it in code.
- for the ship and background: i generated sprite sheets for each in the image model. this keeps claude close to your vision, with no drifting and no long back and forth
step 4: build the 3d scene phase by phase
- my 3d reference was meng to's "the river voyage" site.
- i built one scene per phase (i have 4 phases or scenes in my website: profile, applications, mocks, pod prep). don't do it all at once if you have multiple scenes. it'll hallucinate.
- the start takes a lot of steering. once the base is right, updating the graphics is much easier
step 5: let claude rate its own work
(this is the best trick i found and it saves time & effort)
- ask claude to spawn multiple agents that score the visuals in loop until a benchmark
- for eg prompt: "perfect the ship shape, textures and physics until it matches the sprite sheet and gets an overall rating of at least 8 out of 10. spawn multiple agent to do so"
- do it one element at a time: ship, people, background, water, and so on
- more time & rounds give better graphics. you decide how far to push.
step 6: design the page ui before you code it
(this is a continuation of step 1 or you can fork it for the 3d scene & website seperately)
- use /design and ask for mockups first
- ask for 3 radically different options, then pick the one that fits
- i followed the design workflow from lenny's article: "How to turn your AI into a world class designer "
step 7: stitch it all together
- ask claude to merge the graphics layer and the ui into one site
- run it locally and review it first. test it for all screen types (mobile & laptop)
- iterate until it feels right. main part is also optimizing performance (don't skip)
step 8: merge & deploy
- ask claude to push the code to github first. helps you maintain the version history
- then deploy. i used vercel for hosting and supabase for the database.
- If you have a domain purchased, set it up and ask claude in chrome to configure all DNS settings.
it took me around 5-6 hours with multiple sittings to completely finish it. can be done faster as well if you know the flow. still would recommend spending time to perfect it.
Rish from productminds :)