Jewelry configurator

Create an interactive presentation to build a jewelry customizer for your clients.
Open the interactive demo

What is a jewelry configurator?

A 3D jewelry configurator is an online tool created in Vectary that invites the shopper to design and personalize their own jewelry pieces in a digital space. The intuitive interface with a wide range of options lets the user configure their own final design. It can be shared as a direct link or embedded directly on a website.

Concept development

This project takes a more storytelling approach compared to a standard configurator. It allows users to craft their own unique ring in three steps, rather than interacting with objects at a single location. The Floating UI controls basic navigation through the scene while displaying configurable options. These are the steps:

  • Select the material of the ring's shank
  • Choose the gemstone
  • Preview the look, start again, or proceed to make an order using an API

The final variation can also be shared as Augmented Reality (AR) and viewed in a real environment.

How to make a jewelry configurator

Setting up the model

The ring itself was modeled in Blender and imported as .obj file. Stones were created by 3D scanning using photogametry and imported into Vectary Studio as .obj files. Polycount on stones was reduced in Studio using Simplify plugin.

Lighting Setup

The scene is divided into three areas with different lighting setups. Each area features still-life compositions made of realistic rocks, with interactive elements positioned in the middle of each. One directional light remains outside of these groups and is visible at all times. Lighting the shank and gemstones presents challenges. In the first area, the shank is surrounded by three rectangular lights and one spotlight, aiming to highlight all parts within the shank's reflections. The gemstone area relies solely on the directional light, while the final ring assembly includes two spotlights and a rectangular light.



Lights are organized into groups and placed under variants to optimize performance and use only one active group of lights. The next area is never fully visible due to camera angle and fading effects.

Materials & baking

The overall color palette of the scene is neutral, with a shade of old pink instead of monochromatic white, complementing the still-life rocks in the scene environment. The stones are realistic 3D-scanned assets with optimized textures only in the color slot; all other slots are empty to reduce scene size. The variation in the appearance of these rocks is achieved through baked lightmaps.



Tip: Remove unnecessary geometry from invisible places, such as the bottom of these rocks. Additionally, there is only one type of rock in the scene, duplicated as an instance with different size parameters which again save on file size.
The shank in the first area features four different metallic materials inspired by precious metals.

The gemstones employ multiple techniques to achieve the desired look. Each gemstone contains a smaller duplicate inside it, and the refraction parameter with absorption for color plays a key role. Additionally, the outer gemstones have a clear coat with the value set to 1000% on top. This combination of different materials applied to the outer and inner gemstones creates a more complex final look.

Interactions

The first two areas feature looped 360-degree animations of each shank and gemstone, set to repeat linearly. The Floating UI menu controls navigation through the scene and material configurations. The UI contains images with names, which change materials for the shank and gemstones upon click.

Materials of the shank in the first and last areas are not linked, requiring users to change two materials at once. This ensures that when moving to step number three, users see the same material selected at the beginning.

Learn more about Vectary configurators

The benefits of having a 3D jewelry configurator

Customization

A jewelry configurator enables customers to create a bespoke jewelry design. It offers a wide range of options such as metal type, gemstones, settings, engraving, and more. This final design outcome can be shared with the manufacturing and supply teams as guidance on what materials need to be available and in stock.

Visualization

A key benefit is its ability to provide users with realistic and detailed visualization of their customized jewelry designs. Customers can see their selections reflected in real-time on a 3D model by rotating the model, zooming in and out, and viewing different angles. Clear visualization helps in with making purchase decisions.

Accessibility

Customers have a convenient and accessible way to design and order custom jewelry pieces from the comfort of their own homes. By eliminating the need for in-person consultations and visits to physical stores, a jewelry configurator streamlines the design and purchasing process, saving customers time and effort.

Discover Vectary Business solutions for jewelry companies

Let us show you how it works. Your questions - answered.
Book a demo