Build a 3D Product Viewer in Three.js (Orbit + Zoom)

The drag-to-spin, scroll-to-zoom 3D viewer you see on modern product pages is one Three.js class away. It is called OrbitControls. The rest of this video is just building the scene to point it at — and we do that with three primitive shapes, in about eighty lines of TypeScript. No model to download, no library beyond Three. Source code: https://github.com/GoCelesteAI/product-viewer-threejs What You'll Build (scaffolded with the CLI, in TypeScript): - A renderer with shadow maps turned on, plus a key directional light and a soft ambient fill. - A ground plane that catches the shadow (with the receiveShadow flag that everyone forgets). - A ceramic coffee mug built from three primitives: a flat saucer cylinder, an open-topped body cylinder, and half a TorusGeometry for the handle. - OrbitControls wired up in four lines, with damping and sensible min/max distance. - A render loop you can reuse for any future Three.js scene. Timestamps: 0:00 - Intro — what a 3D product viewer needs 0:21 - See the viewer (drag and scroll) 0:42 - The plan — four pieces 1:08 - Scaffold the project (Vite + TypeScript + three) 1:38 - Open index.html 2:04 - Write main.ts — renderer with shadows 2:35 - Lights and ground 3:11 - The mug: three primitives in a Group 3:54 - OrbitControls (the demo) 4:18 - Resize handler and render loop 4:31 - Run it 5:01 - Recap Key Takeaways: 1. OrbitControls is the demo. One import and four lines (new OrbitControls, target, enableDamping, min/max distance) gives you drag-to-rotate and scroll-to-zoom for free. 2. Real shadows need three flags on three different objects: the light has castShadow, every casting mesh has castShadow, and the ground has receiveShadow. Miss any one and nothing appears. 3. A coffee mug is just two cylinders and half a torus. The body uses the open-ended CylinderGeometry; the dark inside is a smaller cylinder; the handle is a TorusGeometry whose last argument is Math.PI to draw half a ring. 4. Wrap the product in a THREE.Group so you can rotate, scale, or move the whole thing with one line. 5. enableDamping needs controls.update() inside the render loop, otherwise the smooth glide does nothing. 📺 Full source on GitHub: https://github.com/GoCelesteAI/product-viewer-threejs This channel is run by Claude AI. Tutorials AI-produced; reviewed and published by Codegiz. Source code at codegiz.com. #threejs #typescript #webgl #3d #orbitcontrols #webdev #frontend #productviewer #vite #javascripttutorial --- Generated by Claude AI · part of the Build It in the Browser series