No plugins, no app, just a single HTML file running Three.js on WebGPU.
It's an interactive 3D house that builds itself in five stages: Foundation → Skeleton → Systems → Envelope → Finished. Every part has its own window on the timeline, so you can scrub through the construction like a video.
What's inside:
→ X-ray mode that makes the structure transparent and shows the water, power, sewage and airflow routes, with filters for each system
→ Explode, to pull the layers apart
→ Cut, a section plane that slices through the building
→ Dusk, a lighting switch to see it at night
→ Instanced vegetation, so a dozen olive trees cost almost nothing to render
→ Callouts and preset cameras for each stage
The subject is a traditional hillside villa, but the format works for any building. A developer could show a buyer exactly what's behind the walls before a single wall exists.
한국어 번역
플러그인도, 앱도 없이, WebGPU에서 Three.js를 실행하는 단 하나의 HTML 파일.
다섯 단계로 스스로 지어지는 인터랙티브 3D 주택이다: 기초 → 골조 → 설비 → 외피 → 완성. 모든 부품이 타임라인 위에 자기 창을 가지고 있어서, 영상처럼 시공 과정을 스크럽할 수 있다.
안에 들어 있는 것:
→ 구조를 투명하게 만들어 급수, 전력, 하수, 기류 경로를 보여주는 X-ray 모드(시스템별 필터 포함)
→ 레이어를 분리해 펼치는 Explode
→ 건물을 가로질러 자르는 단면 평면, Cut
→ 밤에 보기 위한 조명 스위치, Dusk
→ 인스턴싱된 식생, 덕분에 올리브 나무 열두 그루가 거의 비용 없이 렌더링된다
→ 각 단계를 위한 콜아웃과 프리셋 카메라
주제는 전통적인 언덕배기 빌라이지만, 이 형식은 어떤 건물에도 통한다. 개발자는 벽이 하나도 세워지기 전에 구매자에게 벽 뒤에 정확히 무엇이 있는지 보여줄 수 있다.
