3D commerce
Production 3D product configuration
Make a Ring
A production Three.js and ThreeKit ring configurator for Richter & Phillips, built into the live shopping flow.
Three.jsThreeKitJavaScriptHTMLCSS
View live experience How the system fits together.
-
Choose
Ring options and variants
-
Preview
ThreeKit and Three.js scene
-
Continue
Existing store shopping flow
Make a Ring is the production ring configurator I worked on for iDoAgency and Source360 for Richter & Phillips. It combines custom options with a ThreeKit and Three.js preview inside the existing store.
That constraint mattered. Shoppers had to choose a ring and continue through the store, so a standalone 3D demo would not do.
What I built
- ThreeKit and Three.js configuration and product preview work.
- Custom flow for ring options and variant choices.
- Integration with the Richter & Phillips site.
- HTML, CSS, and JavaScript around the 3D experience.
Engineering notes
The preview had to load cleanly inside the store, fit the page, and keep every ring option legible.