3D webpersonal

Jewellery Designer — Interactive 3D Configurator

A browser-based 3D jewellery configurator with live model switching, metal and gemstone presets, finish controls, HDRI lighting, and real-time interaction.

Live configurator →

Project details

Role

3D direction · product UX · customization planning · model prep · implementation orchestration

Tools

BlenderThree.jsReactViteTailwind CSSGitHub Pages

Credits / disclosure

Personal project. Creative direction, 3D prep, and product thinking by me; implemented as a working web configurator and deployed publicly.

Live embedded demoExpand in page

Try the working jewellery configurator

Explore rings, necklaces, earrings, and bracelets in real time, with metal and gemstone presets, finish controls, and responsive studio lighting.

Multiple jewellery typesMetal + gemstone presetsFinish controlsHDRI lightingReal-time interaction

Open full demo →

For the best experience on smaller screens, open the full demo in a new tab.

Overview

Jewellery Designer is a real-time 3D customizer for rings, necklaces, earrings, bracelets, and similar products, letting users explore variants directly in the browser instead of relying only on static renders.

What is working today

The live build already supports switching between jewellery types, adjusting metal and gemstone presets, changing finish options, orbiting the camera, and previewing the result under different lighting conditions.

System design

The experience combines a Three.js scene, React-based controls, configurable model-loading logic, material preset management, HDRI environment lighting, and post-processing to create a polished luxury presentation.

Why it matters

For premium products, interactive 3D helps buyers inspect details, compare finishes, and build confidence before inquiry or purchase while also giving brands a reusable web sales tool.