All projects · UI Components & Interactions
NØRDA Aura Sofa: Interactive 3D Product Page
A premium furniture e-commerce product page where the Three.js viewer is the product photo.
A premium furniture e-commerce product page where the Three.js viewer is the product photo. A procedural Aura Sofa built from its real components sits in a single curved studio cove with soft shadows and image-based lighting. Customers can rotate, zoom, pick 5 fabric colours, switch between fabric and leather, change the leg finish (oak, walnut, black ash, brass, chrome), animate the camera between Front, Side and Back views, and explode the sofa into labelled components and reassemble it. The price updates live, Add to Cart stores the configuration with a rendered thumbnail, and gallery thumbnails and feature images are rendered from the same scene so they always match the chosen configuration.
- The clue (one product, one environment): a single bent-plane infinity cove, one key light with soft shadows, and a sofa made of 13 meshes, with no model or texture downloads
- Real configuration: 5 fabric colours with smooth colour tweens, fabric vs leather that swaps weave or grain bump maps plus sheen or clearcoat, and 5 leg finishes (3 woods, 2 metals) that reflect the studio environment
- Camera views: Front, Side and Back tween along the orbit sphere the short way round instead of cutting through the sofa, plus 5 preset angle thumbnails
- Idle auto-rotate starts after 3.5 s without input, drifts back to the centre, and is disabled for prefers-reduced-motion
- Bonus explode view: every component flies apart along its own axis with the whole stack lifted clear of the floor, with projected HTML labels (base frame, legs, deck, arms, back frame, cushions)
- Self-rendered imagery: thumbnails, feature cards and cart images are snapshots of the live scene, so they re-render whenever the configuration changes
- Live price (£1,890 base, +£600 leather, +£60 metal legs), a spec sheet that follows the options, and a localStorage cart drawer
- Lightweight and responsive: pixel ratio capped (1.5 on mobile), 1024 px shadow map on phones, rendering pauses when the viewer is off-screen, and a WebGL/CDN fallback keeps the configurator usable
Built with: Three.js r169 (ES modules), OrbitControls, RoundedBoxGeometry, RoomEnvironment IBL, MeshPhysicalMaterial (sheen, clearcoat), PCF Soft Shadows, Procedural Canvas Textures, Vanilla JavaScript, CSS3 Responsive Layout