All projects · UI Components & Interactions
Villa Solaria: Luxury Architectural 3D Experience
An interactive 3D landing page for an ultra-luxury architectural property developer built with Three.js, recreating the golden hour cliffside…
An interactive 3D landing page for an ultra-luxury architectural property developer built with Three.js, recreating the golden hour cliffside Mediterranean villa reference scene. Features a multi-tiered cantilevered modernist residence in travertine and glass, a 25-metre infinity pool with vanishing-edge cascade, a sunken fire pit conversation lounge with animated flames, craggy limestone cliffs, cypress and olive trees, stepped stone stairways with illuminated LED risers, and a cinematic scroll-driven camera passing through 7 architectural chapters (The Clue Mandate). Includes 6 interactive 3D hotspots, Day/Sunset/Night time-of-day dynamic transitions, Free 3D Camera Exploration mode, 2D high-performance fallback, and a working private acquisition enquiry form.
- The Clue Mandate (Treat the Camera as the Website): Rather than spinning a 3D model in place, the camera guides visitors through a curated 7-chapter architectural journey with smooth cubic lerp interpolation and mouse parallax
- Architectural Recreation: Faithfully reproduces the reference image with 12m post-tensioned cantilever penthouse, lower dining pavilion, travertine slabs, black steel columns, and warm interior lighting
- Aquatic & Landscape Engineering: 25-metre cantilevered vanishing-edge pool with turquoise water and overflow cascade, sunken fire pit conversation hearth with animated flame particles, and illuminated cliff staircases
- Atmospheric Environment: Sunset sky dome with glowing sun disc, Mediterranean sea with specular sun trail, distant headlands with twinkling coastal town lights, and an anchored luxury motor yacht
- 6 Interactive 3D Hotspots: Screen-projected pulsing pins linking 3D coordinates to rich architectural dossiers with specs and focus-camera actions
- Time-of-Day Dynamic Engine: Instant seamless switching between bright Mediterranean daylight, golden hour sunset, and starry Mediterranean night
- Free 3D Exploration Mode: Visitors can take full control of the camera (orbit, pan, zoom) with OrbitControls and smoothly return to the guided tour at any time
- Ultra-Fast 2D Fallback & Working Acquisition Form: Built-in 2D mode for low-spec devices and interactive private viewing request form with instant reference code generation
Built with: Three.js (WebGL), OrbitControls, Procedural Textures, PBR Materials & Lighting, Camera Spline Choreography, Interactive 3D Hotspots, Day / Night Engine, HTML5 / CSS3 Glassmorphism, Vanilla JavaScript, Responsive Design