Building a Three.js Product Viewer: Why Lighting, Not Geometry, Makes 3D Look Real
Build a Three.js product viewer from scratch: three-point lighting, OrbitControls damping, metalness vs roughness, and the resize bug everyone hits.
Building a Three.js Product Viewer: Why Lighting, Not Geometry, Makes 3D Look Real
The first 3D object almost everyone renders on the web looks wrong, and it's never obvious why. The geometry is right, the code runs, the thing spins — and it still reads as a flat colored shape floating in a black void rather than an object you could pick up. The instinct is to blame the model: more polygons, a better mesh, maybe a texture. It's almost never the model. It's the lighting, the material, and the fact that nothing is grounding the object in a space. The Three.js Product Viewer snippet is about seventy lines of JavaScript that render a metallic object you can drag to inspect, recolor with a swatch, and leave slowly turning — and roughly a quarter of those lines are doing nothing but arranging four lights and a disc on the floor. Here it is live — drag to orbit it, scroll to zoom, tap a swatch: Grab the code, or open the full editor with live HTML/CSS/JS panels: Three.js Product Viewer on FWD Tools . The snippet is plain HTML, CSS, and JavaScript with Three.js from…
