Product Viewer

Lesson 6

Product viewers let users inspect a 3D object interactively. The key patterns: constrained drag-to-rotate, variant color swaps, and smooth transitions.

Constrained Orbit

Limit OrbitControls to prevent disorientation:

controls.minPolarAngle = Math.PI / 4;
controls.maxPolarAngle = (3 * Math.PI) / 4;
controls.minDistance = 2;
controls.maxDistance = 8;
controls.enablePan = false;

Variant Color Swap

const variants = {
  black:  { color: 0x111111, metalness: 0.8, roughness: 0.2 },
  silver: { color: 0xcccccc, metalness: 0.9, roughness: 0.1 },
  gold:   { color: 0xd4a853, metalness: 0.9, roughness: 0.15 },
};

function applyVariant(name) {
  const v = variants[name];
  mesh.material.color.set(v.color);
  mesh.material.metalness = v.metalness;
  mesh.material.roughness = v.roughness;
}

Smooth Camera Reset

function resetCamera() {
  gsap.to(camera.position, {
    x: 0, y: 0, z: 4,
    duration: 1,
    ease: 'power2.inOut',
    onUpdate: () => controls.update()
  });
}

What to Experiment With

  • Add annotations: raycasting click → tooltip with product info
  • controls.autoRotate = true when idle, stop on pointerdown
  • gsap.to(material, { metalness: 1 }) for animated material transitions