Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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...

147,074 Aufrufe • vor 1 Monat •via X (Twitter)

59 Kommentare

Profilbild von 🌞PPL🌞
🌞PPL🌞vor 1 Monat

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

Profilbild von Meng To
Meng Tovor 1 Monat

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

Profilbild von Delba
Delbavor 1 Monat

I love the sound effects. :chef-kiss:

Profilbild von Meng To
Meng Tovor 1 Monat

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

Profilbild von ThreeJS Assets
ThreeJS Assetsvor 1 Monat

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

Profilbild von Meng To
Meng Tovor 1 Monat

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

Profilbild von ThreeJS Assets
ThreeJS Assetsvor 1 Monat

Its soo good

Profilbild von Bishakh Neogi
Bishakh Neogivor 1 Monat

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

Profilbild von Meng To
Meng Tovor 1 Monat

prepping the open-source process

Profilbild von Adel Bucetta
Adel Bucettavor 1 Monat

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

Profilbild von Meng To
Meng Tovor 1 Monat

it's all in one html file.

Profilbild von ollie
ollievor 1 Monat

yeah this is awesome, would if you open sourced!

Profilbild von Meng To
Meng Tovor 1 Monat

there you go:

Profilbild von ollie
ollievor 1 Monat

ty!!

Profilbild von Sarah Pan
Sarah Panvor 1 Monat

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

Profilbild von football.colmjude
football.colmjudevor 1 Monat

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

Profilbild von Meng To
Meng Tovor 1 Monat

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

Profilbild von DeDi
DeDivor 1 Monat

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

Profilbild von Mahfudz Idris
Mahfudz Idrisvor 1 Monat

🔥

Profilbild von 薄荷清尘
薄荷清尘vor 1 Monat

太酷了,请问能开源学习一下吗?

Profilbild von Meng To
Meng Tovor 1 Monat

yep preparing the process. soon.

Profilbild von 薄荷清尘
薄荷清尘vor 1 Monat

太好了,非常感谢!

Profilbild von cetusian
cetusianvor 1 Monat

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

Profilbild von Nids Pacho
Nids Pachovor 1 Monat

This is amazing!

Profilbild von Sophia Data Queen
Sophia Data Queenvor 1 Monat

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

Profilbild von TheCoderBTW
TheCoderBTWvor 1 Monat

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?

Profilbild von Meng To
Meng Tovor 1 Monat

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

Profilbild von Abe
Abevor 1 Monat

My dude, do you ever sleep

Profilbild von Meng To
Meng Tovor 1 Monat

oh, i have way more projects than ths

Profilbild von Reynad
Reynadvor 1 Monat

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.

Profilbild von Meng To
Meng Tovor 1 Monat

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.

Profilbild von 紫苏子ACG
紫苏子ACGvor 1 Monat

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

Profilbild von Meng To
Meng Tovor 1 Monat

it's shared on github:

Profilbild von Jared 宗源
Jared 宗源vor 1 Monat

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

Profilbild von Meng To
Meng Tovor 1 Monat

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

Profilbild von Shaun Gold | Venture Comedy
Shaun Gold | Venture Comedyvor 1 Monat

Two megs of magic.

Profilbild von Meng To
Meng Tovor 1 Monat

AI generating this level of 3d feels like magic

Profilbild von Ehsan Azish
Ehsan Azishvor 1 Monat

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.

Profilbild von Chris Tran (ex-Riot)
Chris Tran (ex-Riot)vor 1 Monat

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

Profilbild von foryoupage archives
foryoupage archivesvor 1 Monat

This would be amazing for open source

Profilbild von Meng To
Meng Tovor 1 Monat

just published to github:

Profilbild von foryoupage archives
foryoupage archivesvor 1 Monat

thank you my friend

Profilbild von sandy-h
sandy-hvor 1 Monat

yes pliz open source! gorgeous

Profilbild von Meng To
Meng Tovor 1 Monat

looks like another project to hit open-source soon.

Profilbild von Ignacio Montenegro
Ignacio Montenegrovor 1 Monat

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

Profilbild von Meng To
Meng Tovor 1 Monat

yep, here's the link to github:

Profilbild von Aashir
Aashirvor 1 Monat

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

Profilbild von Meng To
Meng Tovor 1 Monat

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

Profilbild von Fiducial.ai
Fiducial.aivor 1 Monat

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

Profilbild von Meng To
Meng Tovor 1 Monat

sites are so dang heavy nowadays

Profilbild von Adam Syed
Adam Syedvor 1 Monat

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

Profilbild von Meng To
Meng Tovor 1 Monat

Only Opus and references

Profilbild von Kimi Nguyen
Kimi Nguyenvor 1 Monat

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

Profilbild von CryptoWars
CryptoWarsvor 1 Monat

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

Profilbild von Jc➔ followasy.com
Jc➔ followasy.comvor 1 Monat

@daviaxs_

Profilbild von Kush
Kushvor 1 Monat

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

Profilbild von Skaltek
Skaltekvor 1 Monat

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.

Profilbild von Elizabeta Kuzevska
Elizabeta Kuzevskavor 1 Monat

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

Profilbild von QDELMAGO.SOL
QDELMAGO.SOLvor 1 Monat

Wow this is chilling

Ähnliche Videos

Only if education could be this interactive ❤️‍🔥 I've had a looong wish to build something genuinely useful through vibe coding, and I finally did it. A 3D human anatomy application built with Three.js using GPT 5.6 Sol. It all started with a single design image that I created using GPT Image 2.0. I then used it to generate every 3D organ image, one by one. Next, I converted each of those images into 3D models using Tripo (and no, they didn't sponsor this 😄). After that, I opened Codex, wrote a master prompt based on the design, and gave it the prompt, the design image, and all the 3D models. Codex built the first version beautifully, but there was one big problem. Every single 3D model was nearly 120-150 MB. That obviously wasn't practical for the web and was giving a performance of 16fps. After a few iterations, Codex optimized each model down to roughly 2–5.5 MB while preserving the visual quality, reducing the total asset size from ~900 MB to just 28.6 MB. And each model loads on demand. Along the way, Codex also generated those anatomical illustrations showing where each organ sits in the human body, and even created the interactive hotspot markers that explain different parts of every organ. It handled all of that. The process wasn't exactly one shot, but it also wasn't difficult. You just have to do it step by step. It genuinely felt like building something that could make learning anatomy much more engaging. The inspiration came from Dilum Sanjaya's 3D animal plant cell project. I remember seeing it and thinking, "I want to build something like this one day." And I did it :D Live: Code:

The Bugged Dev

2,104,493 Aufrufe • vor 1 Monat