I made an interactive three.js site that constructs towers with weather and time of day effects. I went from making mostly static sites with huge images to three.js with highly textured, detailed 3D models, and the entire site is under 1-2mb. Because it's 3D, you can ask AI to... customize everything: themed towers from different countries, ancient and modern styles, weather like snow and rain, lighting from morning to night. The surprising part is that with a solid foundation it creates those changes pretty much one-shot. It's like starting a design system, where the AI figures out how to stay consistent in quality with the rest of the design. The hard part is avoiding 3D slop, which is easier thanks to Opus 5 and open-source projects. I used Claude Code for the harness, Higgsfield to generate textures and soundfx/music. Let me know if you'd like the open-source. Inspiration: Btw, I love that we get auto-translated posts from around the world. It really expands our horizon in terms of inspiration.show more

This project is so amazing that I have no choice but to request the open-source again ❤️

Thanks for saying this. Don’t wanna overcrowd GitHub with all my projects

I love the sound effects. :chef-kiss:

glad you approve! anything to stand out from being generic, even adding little sounds.

This looks really good! I wonder how long it’ll take before Three.js takes over interactive websites entirely 🤔

each have their place. image/video still king. but threejs has a fighting chance now.

Its soo good

Meng please share some docs or md on it. Would love to recreate min!

prepping the open-source process

because the hard part was always rendering speed and data transfer, not writing code for interactive 3d in web apps. three.js has made this accessible, but don't underestimate the compute and storage implications of going fully 3d online

it's all in one html file.

yeah this is awesome, would if you open sourced!

there you go:

ty!!

It's so beautiful! I think a lot of museums would love your design.

I’d love to see this open source so that I could learn from it. It looks absolutely amazing

from experience, having open-source projects really helped increase the quality of the 3d models

轻量3D网站兼顾沉浸体验与加载性能

🔥

太酷了，请问能开源学习一下吗？

yep preparing the process. soon.

太好了，非常感谢！

a detailed interactive 3d site under 2mb is the kind of performance flex that makes a 40mb hero video look personally offensive.

This is amazing!

When the “AI made this whole site” posts go crazy, the people who already refined the craft are usually ahead.

Did the AI-generated textures and fx hold up across different weather and lighting conditions, or did you have to retouch some of them per scene?

It's one general fault, and yes, the AI pretty much generated everything.

My dude, do you ever sleep

oh, i have way more projects than ths

Looks cool! Would you be able to build a website using actual 3D objects, like with Tripo AI or Meshy AI? I hardly ever see anyone making websites like that, with 3D objects.

need to experiment more, but i noticed that direct threejs is much lighter bc it's all code. but it's less consistent for sure.

We look forward to the open-source version being shared with us so we can test it.

it's shared on github:

Could you tell me how these textures are created? And what about the building's objects? 😇

using higgsfield/gpt image 2 to gen the textures. opus 5 can do 3d well.

Two megs of magic.

AI generating this level of 3d feels like magic

the 1–2 MB is the most impressive part. interactive doesn't have to mean bloated when geometry, materials, and lighting replace a stack of pre-rendered assets.

The trick is the design system underneath that keeps quality consistent. Avoiding 3D slop is the real flex. Nice job!

This would be amazing for open source

just published to github:

thank you my friend

yes pliz open source! gorgeous

looks like another project to hit open-source soon.

This is AWESOME. Is there a link to see it? It would be awesome if you open sourced it.

yep, here's the link to github:

You mentioend texuture for higgsfield. Did you use meshy or something else for models or right away used fable 5 or opus 5?

no, i use gpt image 2 to generate the texture images which is applied to the 3d (in threejs)

the whole site is under 2mb. one uncompressed hero image can be larger than that

sites are so dang heavy nowadays

what 3d models are you using to generate these? they look great

Only Opus and references

under 2mb with this level of detail is wild, especially with weather and time of day 💪

1-2mb for all that is genuinely impressive. we pushed the same way but for a game, 100v100 in a browser tab with three.js no sign up, no wallet, no download, you just click and play. very early and we're after people to test it

@daviaxs_

Nice tool! List this on get a free DR21 backlink and a spot on our newsletter

Keeping the experience under 1-2MB is the accomplishment here. Generating a scene is only step one; the constraint is making interaction and loading feel intentional on a real device.

The combination of Three.js, AI, and optimized 3D assets opens up a lot of possibilities for web experiences

Wow this is chilling