Build a 3D website with AI, step by step
This website has real 3D sea creatures you can spin and zoom, and it was built with AI. Here is how you can make one with ChatGPT, Meshy and Claude Code.
The 3 tools you need
- 1
ChatGPT
Makes the picture
Ask it for an image of your creature on a plain white background, then download it.
Open ChatGPT - 2
Meshy
Turns the picture into 3D
Click on Image to 3D, upload your image, then Generate and download it as a .glb file.
The free plan gives you 10 model downloads a month (Meshy 6 Lite). Free models are CC BY 4.0, so credit Meshy on your site.
Open Meshy - 3
Claude Code
Builds the website
Put all your .glb files in one folder, open that folder in Claude Code and paste the prompt below.
Open Claude Code
The prompt
Paste this into Claude Code with the link of a website whose layout you like.
Build a website that shows the 3D models (.glb files) in this folder with Three.js. One model per section. Let me drag to spin and scroll to zoom. Add a short fact card next to each. Copy the layout and colours of [your link]. Make it work on phones.
Then see it
- 1
Ask for a local preview
Say: start a local preview. Then open the link Claude gives you.
- 2
Change what you want
Tell Claude what to change, like the colours, the text or the order of the models.
Questions people ask
Why do I need a local preview?
A page opened straight from your computer cannot load the 3D files in Chrome, because the browser blocks local file requests. Claude Code starts a small local server when you ask, so the models show.
Is it free?
Meshy's free plan gives you 10 model downloads a month. You need a Claude plan to use Claude Code.
Do I have to credit Meshy?
Free Meshy models are CC BY 4.0, so add a credit to Meshy on your site.
Want AI set up like this for your business?We build AI setups and run ads for businesses.
Talk to usThe website in my reel is Abyss Atlas by viktoroddy on X, built with Opus 5.5. All credit to him.