Three-js BIM Viewer

About the project

Our construction website needs an embeddable, BIM-style 3D viewer that showcases a building envelope in full detail. The model must be highly detailed, include physically-based textures, baked and real-time lighting, and contain animated components such as opening façades or phasing sequences. Essential interactions • Users must be able to rotate and zoom the scene smoothly on both desktop and mobile. • Clicking any façade panel, window, or roof segment should reveal a tidy overlay that lists material information, dimensional measurements, and current or planned construction stage. • Specific parts (e.g., curtain-wall panels, doors) should animate on demand—either through a UI button or by clicking the element itself. Technical scope The viewer has to run in a modern browser with no plug-ins, built with Three.js / WebGL. Optimise shaders, texture resolution, and geometry so initial load remains under 5 s on a typical 4G connection. A single glTF or USDZ file is preferable for the master model, but I am open to another efficient format if you justify it. Deliverables 1. Clean, commented JavaScript/TypeScript codebase that integrates the Three.js scene, UI overlays, and animation triggers. 2. One sample building envelope model prepared to the above spec. 3. Instructions for dropping new glTF models into the code with minimal tweaking. 4. Brief README covering build/run steps and how to hook events to new elements. Acceptance criteria – All three interaction types work reliably across Chrome, Firefox, Edge, and Safari mobile. – Clicking any element shows the three data categories accurately. – Animations play at >30 fps on a mid-range laptop and recent phone. I will supply brand colours and fonts for the overlay UI once the core viewer is in place. Please include links to interactive 3D or WebGL work

Skills required