All projects · UI Components & Interactions
HAVEN: Interactive 3D Floor Plan
An interactive property explorer for a furnished garden apartment.
An interactive property explorer for a furnished garden apartment. A lightweight Three.js dollhouse makes the entire layout readable at a glance, with room picking, mint floor highlights, dimension and area details, smooth orbit-camera focus, reset, rotation and zoom. Includes a roof toggle, day/night lighting, an interactive offline floor plan, and room previews rendered from the actual model.
- Seven connected spaces: living room, kitchen, dining, bedroom, bathroom, hall and private garden; 80 m² indoors and 50 m² outdoors
- Exterior and interior walls with door openings, window frames and glazing, distinct flooring, and recognisable low-poly furniture
- Click floors, projected room labels, navigation buttons or gallery previews to synchronise the highlighted room, dimensions and camera
- Smooth spherical camera transitions, drag rotation, pinch/wheel and button zoom, and a full-property reset
- Bonus: interactive Floor Plan / 3D toggle, roof visibility and warm night lighting
- Self-rendered room previews; three 128px procedural textures with no downloaded models or photography
- No API keys or build step; an embedded interactive SVG plan remains usable when WebGL or the CDN is unavailable
Built with: Three.js r169, OrbitControls, Raycaster, Orthographic Camera, Procedural Canvas Textures, Vanilla JavaScript, SVG Offline Floor Plan, Responsive CSS