Three.js From Zero · Article s12-09
Jewelry Configurator Materials — gemstones, metal, scale cues
Jewelry Configurator Materials — gemstones, metal, scale cues is Article s12-09 of Three.js From Zero, a MasterAllArts free interactive lesson for artists learning creative 3D on the web.
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.
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.
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.