Built a luxury product configurator with an interactive 3D viewer.
The brief was simple: what would a high-fashion brand's product page look like if the hero image was a real-time 3D render you could interact with?
The 3D scene uses raw Three.js — no React Three Fiber, no abstraction layers. A WebGL renderer with ACES filmic tone mapping, physically-based materials, and a 4-light rig (key, rim, fill, ambient) creates a cinematic product shot that runs at 60fps in the browser.
The material system supports 6 finishes — Gold, Rose Gold, Silver, Platinum, Obsidian, and Emerald. Switching between them triggers a smooth transition using linear interpolation in the render loop.
Stack: React 19, Three.js, Tailwind CSS v4, Framer Motion, Vite, Vercel.
Live: https://maisonnoir.highbee.dev
#webdevelopment #threejs #react #3d #uxdesign