Three.js Scroll Gear Train — GSAP Mechanical Ratios

<section class="gtr-stage" id="gtrStage">
  <div class="gtr-intro"><p>Scroll ↓ to turn the machine</p></div>
  <canvas id="gtrCanvas"></canvas>
  <div class="gtr-hud">DRIVE <span id="gtrRot">0</span>°</div>
</section>
<section class="gtr-bottom"><p>Every tooth in mesh.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#12100c;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.gtr-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#a89a7c;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.gtr-stage{height:100vh;position:relative;overflow:hidden;background:#12100c}
.gtr-intro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;pointer-events:none;z-index:5;color:#a89a7c;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease}
#gtrCanvas{display:block;width:100%;height:100%}
.gtr-hud{position:absolute;left:24px;bottom:24px;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:#f59e0b;text-transform:uppercase;opacity:.85}

const canvas = document.getElementById('gtrCanvas');
const rotEl = document.getElementById('gtrRot');
const introEl = document.querySelector('.gtr-intro');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x12100c);
scene.fog = new THREE.Fog(0x12100c, 40, 110);
const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 200);

scene.add(new THREE.AmbientLight(0xffe8c4, 0.4));
const key = new THREE.DirectionalLight(0xffd9a0, 1.1);
key.position.set(12, 18, 14);
scene.add(key);
const fill = new THREE.PointLight(0xf59e0b, 0.6, 80);
fill.position.set(-10, 4, 8);
scene.add(fill);

// A gear = disc + teeth boxes + hub, merged into one Group per gear so a
// single rotation.z drives the whole assembly.
function makeGear(radius, teeth, thickness, color) {
  const g = new THREE.Group();
  const mat = new THREE.MeshStandardMaterial({ color, roughness: 0.45, metalness: 0.85 });
  const disc = new THREE.Mesh(new THREE.CylinderGeometry(radius, radius, thickness, 48), mat);
  disc.rotation.x = Math.PI / 2;
  g.add(disc);
  const toothW = (2 * Math.PI * radius / teeth) * 0.45;
  for (let i = 0; i < teeth; i++) {
    const tooth = new THREE.Mesh(new THREE.BoxGeometry(toothW, radius * 0.22, thickness * 0.95), mat);
    const a = (i / teeth) * Math.PI * 2;
    tooth.position.set(Math.cos(a) * (radius + radius * 0.1), Math.sin(a) * (radius + radius * 0.1), 0);
    tooth.rotation.z = a + Math.PI / 2;
    g.add(tooth);
  }
  const hub = new THREE.Mesh(new THREE.CylinderGeometry(radius * 0.22, radius * 0.22, thickness * 1.7, 24),
    new THREE.MeshStandardMaterial({ color: 0x2b2115, roughness: 0.3, metalness: 0.9 }));
  hub.rotation.x = Math.PI / 2;
  g.add(hub);
  // Spoke cutout illusion: four dark wedge boxes on the disc face.
  for (let i = 0; i < 4; i++) {
    const spoke = new THREE.Mesh(new THREE.BoxGeometry(radius * 0.5, radius * 0.28, thickness * 1.02),
      new THREE.MeshStandardMaterial({ color: 0x1a140c, roughness: 0.6, metalness: 0.6 }));
    const a = (i / 4) * Math.PI * 2 + Math.PI / 4;
    spoke.position.set(Math.cos(a) * radius * 0.55, Math.sin(a) * radius * 0.55, 0);
    spoke.rotation.z = a;
    g.add(spoke);
  }
  return g;
}

// The train: teeth counts set the exact ratios; neighbors counter-rotate.
// Positions chain left → right, each spaced by the sum of pitch radii.
const specs = [
  { r: 6, teeth: 24, color: 0xb08d57 },
  { r: 3.4, teeth: 14, color: 0x8f7a5a },
  { r: 5, teeth: 20, color: 0xa77b3e },
  { r: 2.6, teeth: 10, color: 0x9c8a6a },
  { r: 4.2, teeth: 17, color: 0xb08d57 },
];
const gears = [];
let cx = -14;
specs.forEach((s, i) => {
  const g = makeGear(s.r, s.teeth, 1.4, s.color);
  if (i > 0) cx += specs[i - 1].r * 1.1 + s.r * 1.1 + 0.25;
  // Alternate vertical offset so the train zigzags instead of lying flat.
  g.position.set(cx, (i % 2 ? -1 : 1) * (i * 0.7), i * -0.0);
  // Half-tooth phase offset on alternating gears so teeth interleave.
  g.rotation.z = (i % 2) ? Math.PI / s.teeth : 0;
  scene.add(g);
  gears.push({ g, teeth: s.teeth, baseZ: g.rotation.z, x: cx, y: g.position.y });
});

gsap.registerPlugin(ScrollTrigger);
const drive = { angle: 0 };
gsap.to(drive, {
  angle: Math.PI * 4, // two full driver turns across the scroll
  ease: 'none',
  scrollTrigger: { trigger: '#gtrStage', start: 'top top', end: '+=400%', scrub: 0.4, pin: true },
});

function resize() {
  const w = canvas.clientWidth, h = canvas.clientHeight;
  renderer.setSize(w, h, false);
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}

const clock = new THREE.Clock();
function animate() {
  requestAnimationFrame(animate);
  const t = clock.getElapsedTime();
  const a = drive.angle;
  if (introEl) introEl.style.opacity = a > 0.05 ? '0' : '1';

  // Gear ratios: each gear's angle derives from the driver through the
  // chain of tooth ratios, alternating direction at every mesh point.
  let angle = a, dir = 1;
  gears.forEach((gear, i) => {
    if (i > 0) {
      angle = angle * (gears[i - 1].teeth / gear.teeth);
      dir *= -1;
    }
    gear.g.rotation.z = gear.baseZ + angle * dir * (i === 0 ? 1 : 1);
  });

  // Camera dollies along the train as the drive turns, ending on the
  // smallest, fastest gear.
  const prog = Math.min(1, a / (Math.PI * 4));
  const lookX = -14 + prog * 26;
  camera.position.set(lookX * 0.8, 3 + Math.sin(t * 0.3) * 0.5, 24 - prog * 7);
  camera.lookAt(lookX, 0, 0);

  rotEl.textContent = Math.round(a * 180 / Math.PI);
  renderer.render(scene, camera);
}

resize();
window.addEventListener('resize', resize);
animate();