All projects · UI Components & Interactions
Velaris V12: Interactive 3D Supercar Showroom
An interactive 3D product showroom for an ultra-luxury automotive brand (Velaris) built with Three.js, recreating the golden hour cliffside…
An interactive 3D product showroom for an ultra-luxury automotive brand (Velaris) built with Three.js, recreating the golden hour cliffside architectural pavilion reference scene. Features a procedural mid-mounted V12 hypercar with clearcoat metallic paint, animated dihedral butterfly doors, active aerodynamic rear wing, forged alloy wheels with gold Brembo brake calipers that remain stationary as wheels rotate, and a detailed driver cockpit with OLED telemetry. Includes scroll-choreographed camera milestones through 6 narrative chapters (The Clue Mandate), 7 interactive 3D hotspots, a 6-color paint configurator with smooth transitions, multi-state working headlights, Day/Sunset/Night lighting switcher, 360 Studio mode, an automated cinematic drone sequence with sound design, Bespoke Atelier pricing calculator, and a working VIP allocation reservation form.
- The Clue Mandate (Treat the Camera as the Website): Rather than a static spinning model, the camera guides visitors through 6 choreographed chapters matching the supercar's engineering story with smooth cubic lerp and parallax
- Procedural V12 Hypercar: Faithfully crafts the reference low-slung hypercar with front S-Duct, autoclave carbon splitter, side radiator intakes, diffuser strakes, and mid-mounted 6.5L V12 with crinkle-red cam covers
- Animated Dihedral Butterfly Doors: Electro-hydraulic doors swing upward and forward on custom pivot axes, revealing the carbon dashboard, F1 steering yoke, and OLED telemetry display
- Stationary Caliper Wheel Physics: 10-spoke forged alloy wheels rotate dynamically during camera moves and high-speed runs while 10-piston gold Brembo calipers remain fixed to the suspension uprights
- 7 Interactive 3D Hotspots: Screen-projected pulsing pins linking 3D coordinates to rich technical dossiers with specs and instant camera focus triggers
- 6-Colour Paint Configurator: Curated metallic finishes (Liquid Basalt, Titanium Silver, Monaco Blue, Vulcano Rosso, Carbon Onyx, Verde Mantis) with real-time RGB interpolation
- Time-of-Day & Lighting Engine: Seamlessly toggle between golden hour sunset, bright Mediterranean daylight, and midnight stealth with working laser headlights and glowing taillight
- Cinematic Drone Tour & 360 Studio: Automated 20-second camera sequence with letterbox cinema bars and Web Audio sound effects, plus 1-click free orbit inspection mode
- Bespoke Atelier Allocation Drawer: Live price calculation (£2,450,000 base + options) and VIP test drive reservation form generating unique allocation reference codes
Built with: Three.js (WebGL), OrbitControls, PBR Clearcoat Materials, Procedural Environments, Camera Spline Choreography, Interactive 3D Hotspots, Dihedral Door Kinematics, Active Aerodynamics, Colour Configurator, Web Audio API, HTML5 / CSS3 Glassmorphism, Vanilla JavaScript