All work →
01Case study

3D Product Configurator

A real-time “design your own” experience for a fine-jewelry brand. Shoppers combine settings and stones and see the finished piece render live in 3D before adding to cart.

  • Interactive WebGL product viewer
  • Guided multi-step configurator
  • Headless commerce back end
Sector
E-commerce · Fine jewelry
Scope
Configurator, pricing engine, checkout
Stack
Three.js, WebGL, React, Next.js
Status
In production
  • Next.js
  • React
  • Three.js / WebGL
  • Headless Commerce
  • TypeScript
Try the live configurator →
Real-time 3D
built for the shopper's browser, priced as the piece comes together
02Live demo

Build a ring.

Pick a shape, a weight, a metal and a size. The ring is drawn in your browser as you choose, and the price follows the configuration.

Your ring

A 1.00 ct round-cut center stone in a solitaire 18k white gold setting, US size 6.5.

This browser cannot draw in 3D, so the ring is described instead. Every control still works, and the description and the price both follow it.

Stone shape
Carat
Metal
Ring size

Illustrative total

$6,650

Not a quote. This figure is arithmetic on the published numbers below, not a lookup against anybody's inventory.

Show the working
Setting
$1,450 × 1.00 metal = $1,450
Stone
$5,200/ct × 1.00 carat × 1.00 shape × 1.00 ct = $5,200
Total
$6,650

What this is

A working rebuild of the capability behind case study 01, made for this page. It is not the client's shipped storefront, and the numbers beside it are not their prices.

It also does not work the way theirs does. That configurator loads a separate model file for every combination it offers, and fetches another one each time a shopper changes a choice. This one downloads no model at all: the ring is generated from its dimensions in about ten kilobytes of code, so it can show every combination there is rather than a fixed list prepared in advance.

What the numbers mean

Carat is mass, not width
A stone's linear size follows the cube root of its weight, so 1.00 ct to 2.00 ct is a stone about 26% wider, not twice as wide. Each outline is also normalized to the same girdle area, which is why a marquise comes out long and narrow and a princess compact at the same weight. That matches the trade's own observation that a marquise faces up bigger.
Ring size changes the ring
US sizes 4 to 10, on the real scale: 11.63 mm across plus 0.8128 mm per size. Nothing is rescaled to fit the frame, so a size 10 is visibly a size 10, and the head is measured off the band's own surface so it stays seated at every one.
The price is invented, the shape of it is not
Every coefficient is shown above. The direction each one pulls is true of real stones: price per carat climbs with carat because size is what is scarce, and a round costs more than any fancy cut because it wastes the most rough. The figures themselves are ours, though, and buy nothing.
Nothing here is anybody else's geometry
The ring is built from numbers in a source file that ships with the site. The competitor models the client project collected during a teardown appear nowhere on this domain, in whole or modified.