Websites have got pretty boring. In the 90-00s the internet was filled with fun interactive sites. (you can see some in the Web Design Museum)
Years of optimising for performance and clicks has left us with functioning albeit less inspiring websites.
But it doesn’t have to be this way.
Have a look at this website Why Zero by Sindhur Dutta.
It’s not website designed to be functional. But to be experienced and interacted with.
(I’d recommend checking out Awwwards to see more great examples)
Why Zero by Sindhur Dutta
One technology that allows us to create more immersive web experiences is Three.js.
And what is more exciting.
Is now you do not need a 3D team to build these interactive web experiences.
AI can now help shape your ideas into reality.
You can start with a reference image and an AI that can write code.
You can see your idea become 3D on the web which you can share a link to.
This week I’ll share the process I used to create this interactive Japanese townhouse.
You can rotate the building, interact with the cafe, play music and even interactive with the little cat.
The whole process took a few hours.
And if once you’ve gone through the tutorial you can adapt what you’ve learned and apply it to your own personal projects, clients or just for fun.
Let’s get into it
What You'll Need
ChatGPT on a paid plan for generating the reference illustration. (feel free to use the one in this tutorial)
An AI coding tool & model: In this test I used Gemini 3.8 Flash in Antigravity and Muse Spark 1.3 within Hermes. You can use ChatGPT, Claude etc. If you want a tutorial on how to use Hermes with Deepseek.
A browser to preview the output
Basic web hosting if want it online (Cloudflare, Netlify, Vercel, or your own server)
About 2 hours, mostly spent improving the design rather than building.
Step 1: Generate the Reference Illustration
Start with a high-quality 2D image. I recommend this as it gives a better starting point for the AI to work with.
It is also easier, faster and cheaper to come up with image concepts than regenerating code.
AI will use your image to understand the shapes, colours, and layout.
In this tutorial we’ll use this image of a Japanese townhouse with a groundfloor cafe.
Open ChatGPT and use image generation with a prompt like this:
A detailed architectural illustration of a traditional Japanese residential building. Two storeys, dark wooden frame, pale plaster walls, sloped clay tile roof with curved eaves. A small covered entrance with a noren curtain. Paper lanterns hanging beside the doorway glowing soft amber. A compact front garden with a stone path, trimmed shrubs, and a single maple tree with red-orange leaves. Warm evening light. Clean lines, concept art style, front-facing composition. No people. White background.You want clean lines and a clear front-facing view. Avoid anything too stylised or abstract for better results.
Step 2: Write the Build Brief
Upload your illustration to your AI coding tool and give it a clear brief. Being specific helps align the end results to your expectations. Here’s an example:
Look at this illustration of a Japanese building. I want you to write a single HTML file using Three.js that recreates this building as an interactive 3D model.
Requirements:
- Recreate the building geometry: the two-storey structure, sloped roof, entrance, and garden elements
- Match the colours from the illustration as closely as possible
- The user should be able to click and drag to rotate the building
- Include ambient lighting plus one directional light to create soft shadows
- Add a simple ground plane with a subtle texture
- Make the camera start at a 3/4 angle showing the front and one side
- All code in a single self-contained HTML file, no external dependencies except the Three.js CDN
- Make it responsive so it fills the browser window
Do not simplify the geometry. Include the roof curves, the lanterns, the garden path, and the maple tree.The last line is there to instruct the AI to build from the image as closely as possible.
To avoid AI building you a box with a triangle on top. In Antigravity we started off with an implementation plan first. This gave even more details and instructions before coding.
Step 3: Run It and Review
Depending on what AI you used and how detailed your request was. It may take a few minutes or longer.
In my case with Gemini 3.8 flash it was only a few minutes.
I got a fully working 3D model of the Japanese townhouse.
The there was a few small issues but that is normal. Overall it produced a real interactive Three.js experience from just 1 image.
Some issues I noticed:
Roof pitch is wrong or the curves are missing
Colours are close but not quite right
Rotation speed is too fast or too slow
Some elements (lanterns, trees) are simplified into basic shapes
Now this is the part where you have to get creative and iterative with your AI.
You don’t have to rewrite the code yourself.
But tell the AI what to fix:
The roof is too flat. Match the steep pitch in the reference image. The lanterns should be cylindrical with a warm glow, not just orange spheres. Slow the rotation speed by half. The maple tree needs more branches, it looks like a lollipop.You can spend however long you want at this stage in order to get your design right.
Step 4: Compare the Models
It’s important to note that not all AI models create the same results.
There’s constantly new models being release (this is why it’s great to be subscribed to The Meta as I’ll keep you updated every week)
But you will have to find one that meets your budget and needs.
In this example I tested 2 models. Here is what I found to help you decide.
Gemini 3.8 Flash Three.js output
Gemini 3.8 Flash: Was fast. I liked the UI components (bottom navigation) it built. The code worked first time and matched the images vibe. It struggled slightly with matching the exact textures and dimensions from the reference image.
Muse Spark 1.3 Three.js output
Muse Spark 1.3: Better at capturing the mood and colours of the original illustration. The townhouse result was sharper and more atmospheric. It had less interactive elements. Stronger on aesthetics.
Both produced a usable result in under 10min.
You can see both versions live at example.metalabs.global.
Step 5: Put It Live
Once you are happy with your design you can share it:
Netlify or Vercel: Drag your HTML file into the dashboard. It is live in seconds.
Your own hosting: Upload the file via FTP or your CMS.
GitHub Pages: Push the file to a repo with Pages enabled.
Cloudflare Pages: Push the file to a repo with Pages
It is a single file. There is nothing to build or compile.
To not get too technical I used Cloudflare pages. It’s free and perfect for little demos like this.
Just upload your file and press deploy. It will get you a link you can share or you can even put it on your custom domain.
Cloudflare pages is free
Where This Actually Drives Business
This tutorial is to help learn the basic principle of how to create 3D web experiences with Three.js and AI.
But you can take this even further.
Here are some ideas:
E-commerce sites: Let customers rotate a product in a browser before buying.
Architectural previews: Show renovation or new-build clients an interactive model instead of a flat render. They can explore the space themselves.
Event venue tours: Give planners a 3D walkthrough of your space. Replace the photo gallery with something they can move around in.
Real estate off-plan: Sell properties before they are built with interactive models prospective buyers can rotate and zoom.
Design agency portfolios: Show your work in 3D instead of screenshots. It makes the portfolio itself a demonstration of capability.
Troubleshooting
The output is a plain box: Your brief was too vague. Be explicit about every element you want: roof shape, windows, garden, lighting.
It looks nothing like the reference: Make sure you uploaded the image, not just described it. The AI needs to see the actual illustration.
The code does not run: Check the Three.js CDN link in the HTML. If the model used an old version, swap it for the latest from the Three.js site.
Performance is poor on mobile: Ask the AI to reduce polygon count and simplify shadow calculations. Mobile GPUs have limits.
The colours are wrong: Tell the AI the exact hex values you want. Pulling them from the illustration with an eyedropper is faster than describing them.
Final takeaway
I hope this tutorial inspires you of possibilities out there using Three.js and AI.
What’s covered today is a prototype, not a production asset. It’s still roughly build as it’s just a demo. The textures are basic etc.
If you need a polished 3D experience for a product launch or a major client presentation, you still need to spend more time or hire help.
But for a rough interactive demo, a client pitch, a proof of concept, or a social post, this gets you there in an afternoon instead of a month.
If you want help setting up AI workflows like this in your business, you can read more about how to work together at metalabs.global.
Have fun and feel free to share what you created to me.
Found this helpful? Forward it to someone who has been quoting 3D studios for work an AI can rough out in two hours.