Three.js From Zero · Article s12-09
S12-09 Jewelry Configurator Materials
Skip to demo
Season 12 · S12-09 · Specialized Production Patterns
Jewelry Configurator Materials — gemstones, metal, scale cues
Jewelry is the opposite of giant scenes. Tiny forms mean every camera move, reflection, and material decision carries more weight, because there is nowhere to hide imprecision.
industryluxuryconfigurator
1. Why this article exists
It extends the luxury/product-viewer story beyond watches and makes the material lessons more obviously transferable across high-ticket retail categories.
2. What we are building in the demo
- A ring silhouette with a hero stone and configurable metal tone.
- Camera framing that sells scale and sparkle instead of merely orbiting.
- A product-viewer reading of what matters most in a jewelry scene.
3. Live demo
The demo below is a compact study model, not a full production system. The goal is to make the article’s mental model tactile: what changes, what matters, and what you would keep when the codebase graduates into a real project.
booting...
Season 12 is deliberately less single-vertical than Season 11. The throughline is still applied production: every demo is framed as a pattern you could reuse in paid work.
4. Implementation sketch
metal.color.set(finishColor);
stone.material.ior = 2.1;
stone.material.transmission = sparkleBias;
ring.rotation.y += autoTurn ? 0.004 : 0.0;5. Production notes
Useful companion articles from earlier seasons:
What usually goes wrong first:
- If the reflections are wrong, the whole piece feels cheap.
- Tiny products need stronger composition than big hero objects.
- Do not confuse “lots of bloom” with perceived value.
6. Takeaways
- Luxury rendering is mostly discipline, not spectacle.
- Camera and environment choices matter more when the object is small.
- Configurable jewelry is a useful proving ground for premium materials work.