Three.js Product Viewer — Draggable 3D Showcase With Color Swatches

The Three.js Product Viewer snippet renders a metallic 3D object under proper studio lighting, lets visitors drag to inspect it from any angle, tap color swatches to recolor it live, and toggle auto-rotation on or off — the same interaction pattern used by real e-commerce 3D product configurators, built with core Three.js and its OrbitControls addon loaded from a CDN.

Three-point lighting, not a single flat light

A single light source on any metallic object produces harsh, unconvincing shading — either a blown-out highlight or a mostly-black silhouette. This snippet uses the classic photography three-point setup translated into WebGL lights: a bright DirectionalLight key light establishes the main highlight and shadow direction, a dim, cool-tinted fill light on the opposite side softens the shadow so it doesn't go pure black, and a rim PointLight positioned behind the object catches its silhouette edge, separating it visually from the dark background. This is the actual reason the product reads as a real, dimensional object rather than a flat cutout, and it's the single biggest lighting lesson in this snippet.

A grounding disc, not an empty void

A large, dark, matte CircleGeometry disc sits beneath the product, angled flat and positioned just below it. It never needs its own texture or reflection — its only job is to catch a hint of ambient light and give the product something to visually "sit on," which reads as far more grounded than an object floating in an obviously empty black scene.

Live material recoloring via swatch buttons

Each color swatch button is wired to a single line: material.color.set(hexValue). Because the MeshStandardMaterial's color is a live, mutable THREE.Color object, changing it doesn't require rebuilding the mesh, recompiling any shader, or reloading anything — the very next rendered frame simply reflects the new color under the exact same three-point lighting setup.

OrbitControls' autoRotate as a toggleable property, not a separate system

Rather than writing a custom rotation increment in the animation loop, the snippet leans on OrbitControls' own built-in autoRotate boolean and autoRotateSpeed property — both of which the same controls.update() call already handles every frame. The toggle button does nothing more than flip that one boolean, which means auto-rotation and manual dragging never fight each other: grabbing the canvas and dragging always instantly overrides the auto-rotation, and letting go resumes it smoothly thanks to the existing damping.

A TorusKnotGeometry stands in for "the product"

The demo object is a TorusKnotGeometry — a continuously twisting tube — chosen specifically because its complex, non-symmetrical curvature shows off lighting, metalness, and rotation far more clearly than a plain sphere or cube would. In a real product page you'd swap this for an imported GLTF model; every lighting, control, and recoloring technique here applies identically regardless of what geometry sits in that spot.

Where this pattern is used in production

This exact combination — three-point lighting, a grounding plane, OrbitControls with damping and toggleable auto-rotate, and live material property changes — is the backbone of nearly every real 3D product configurator on the web, from sneaker customizers to furniture previews. Pair it conceptually with a color wheel picker for a full 2D-plus-3D product customization flow, or contrast its studio presentation against the more playful, ambient look of the morphing blob snippet.