All projects · UI Components & Interactions
WatchCraft: 3D Luxury Watch Configurator
An interactive 3D luxury watch product page and configurator for the AURORA A1 Chronograph built with Three.js r169 and a real glTF-Transform…
An interactive 3D luxury watch product page and configurator for the AURORA A1 Chronograph built with Three.js r169 and a real glTF-Transform optimized ChronographWatch GLB asset. Customers can rotate and zoom the timepiece on a dark basalt studio plinth, customise case metals, strap materials and dial colours with 400 ms eased transitions, inspect live system time on mechanical hands, trigger a staggered exploded movement view with component labels, and add bespoke configurations to a persistent cart.
- Real CC-BY Khronos ChronographWatch 3D asset optimized with glTF-Transform (Meshopt + WebP + quantization) from 7.4 MB down to 2.2 MB
- Live mechanical timekeeping: re-pivoted hour, minute and smooth-sweep second hands driven by the system clock around their true dial origin
- Immediate 400 ms eased material customisation across 3 case metals (Silver, Gold, Black PVD), 5 straps (Rubber, Leather, Steel, Nylon, Blue) and 4 sunray dials
- Staggered 1.4 s exploded mechanism animation along the dial axis with non-scaling HTML part labels (Sapphire crystal, Bezel, Hands, Dial, Case back, Strap)
- Smooth spherical camera transitions between Front, Side, Back and Exploded views plus live-rendered scene snapshots for gallery thumbnails and feature cards
- Bonus 8-second 360° product showcase orbit with vertical bob and a 2.8 s cinematic studio light-sweep entrance animation
- Live pricing (£1,299 base + options), dynamic technical specifications, and a persistent localStorage shopping cart drawer with rendered item thumbnails
Built with: Three.js r169, GLTFLoader + Meshopt, glTF-Transform optimized GLB, RoomEnvironment IBL, PCF soft shadows, Vanilla JS