3D Jewelry Configurator — Interactive Ring Collections

We built a browser-based presentation for the Selene and EMO ring collections. The opening scene shows the rings floating around each collection, with a closer view for exploring the individual designs.

In the detail view, you can move through set combinations of metals and stones using the previous and next controls. The variations also advance automatically. Gold, silver and rose-gold finishes sit alongside different stone colours, with light and dark versions of the scene.

We spent much of the development on the materials and movement: how the metal catches the light, how the stones refract it, and how the camera moves between views. The floating rings and cloud layers give the collection room without adding more controls.

We used React Three Fiber and Three.js for the scene, Drei for the stone materials, and Maath for smooth movement. The selection uses predefined combinations; each metal and stone is not independently configurable.

Built with React, JavaScript, Vite, Three.js, React Three Fiber, Drei, GSAP, Maath and Tailwind CSS.

Explore the live ring collections — open a collection for a closer look and browse the preset metal-and-stone combinations.