A Walkable 3D Museum of Chinese Antiquities, Built with VibeCoding
Browser-based 3D museums are moving past tech demos into complete, navigable applications that combine scene design, model optimization, and interactive annotation. This project packages those pieces into a single Vue + Three.js reference that handles dual-device layouts, asset compression, and guided camera choreography — the exact integration work that trips up teams building Web 3D products.
The cultural-relics-museum project constructs a full Three.js exhibition space rather than a flat image gallery. A circular, altar-like hall lit with radial light trails and a central light pool houses 15 simulated artifacts, each selectable for auto-focus, orbit rotation, and auto-spin. Detail hotspots pinned to 3D models let visitors click numbered markers to read about specific features, mimicking Sketchfab-style annotations. A roaming camera flies sequentially between exhibits, acting as a built-in virtual guide. The stack runs Vue 3, TypeScript, Vite 8, and Three.js r185, with GLTF/GLB models optimized through Draco, KTX2/Basis, and Meshopt compression. Two separate route-based layouts adapt the experience for desktop and mobile, and the codebase is released under MulanPSL-2.0 as a reference for Web 3D, digital-twin, or cultural-heritage projects.
Hotspot annotations on 3D models remain rare in open-source Web 3D projects; most stop at orbit controls. Adding them turns a viewer into an explainer, which is the functional gap between a model showcase and a museum.
Designing separate PC and mobile 3D layouts is a practical decision that many WebGL projects skip, yet it directly determines whether a digital museum reaches a phone-sized audience.
The project's value as a reference lies in integration — scene, lighting, camera choreography, asset optimization, and UI — rather than in any single Three.js technique. That integration surface is what most tutorials omit.