Three.js Scroll Orbit Showcase — GSAP Camera Orbit on Scroll

<section class="orb-top"><p>Scroll ↓ to orbit the object</p></section>
<section class="orb-stage" id="orbStage">
  <canvas id="orbCanvas"></canvas>
  <div class="orb-angle"><span id="orbDeg">0</span>°</div>
</section>
<section class="orb-bottom"><p>A full turn, examined.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#080a10;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.orb-top,.orb-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#727a94;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.orb-stage{height:100vh;position:relative;overflow:hidden;background:radial-gradient(65% 60% at 50% 42%,#141826,#080a10)}
#orbCanvas{display:block;width:100%;height:100%}
.orb-angle{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.2em;color:#5eead4}

const canvas = document.getElementById('orbCanvas');
const degEl = document.getElementById('orbDeg');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);

scene.add(new THREE.AmbientLight(0x334155, 0.7));
const key = new THREE.DirectionalLight(0xffffff, 1.3); key.position.set(5, 8, 6); scene.add(key);
const rim = new THREE.DirectionalLight(0x5eead4, 0.9); rim.position.set(-6, -3, -5); scene.add(rim);

// The hero object at the origin. The camera will orbit it; the object itself
// stays put so every face gets examined in turn.
const hero = new THREE.Mesh(
  new THREE.TorusKnotGeometry(1.1, 0.34, 180, 24),
  new THREE.MeshStandardMaterial({ color: 0x38bdf8, metalness: 0.7, roughness: 0.22, emissive: 0x0e3a52, emissiveIntensity: 0.4 })
);
scene.add(hero);

// A ground reflection-ish ring and floating detail dots to give the orbit a
// sense of place, so the camera clearly moves around a fixed subject.
const ring = new THREE.Mesh(
  new THREE.RingGeometry(2.4, 2.5, 64),
  new THREE.MeshBasicMaterial({ color: 0x1e293b, side: THREE.DoubleSide })
);
ring.rotation.x = -Math.PI / 2;
ring.position.y = -1.6;
scene.add(ring);

gsap.registerPlugin(ScrollTrigger);

// Spherical coordinates for the camera: azimuth goes a full turn, polar dips
// from a high angle to eye level, radius pulls in slightly — all scrubbed.
const orbit = { az: 0, polar: 0.9, radius: 6.5 };
gsap.to(orbit, {
  az: Math.PI * 2, polar: 1.45, radius: 4.6,
  ease: 'none',
  scrollTrigger: {
    trigger: '#orbStage',
    start: 'top top',
    end: '+=500%',
    scrub: 0.6,
    pin: true,
    onUpdate: (self) => { degEl.textContent = Math.round(self.progress * 360); },
  },
});

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

function animate() {
  requestAnimationFrame(animate);
  // Convert spherical (azimuth, polar, radius) to a Cartesian camera position
  // that circles the origin. sin(polar) controls how high/low the camera sits.
  const { az, polar, radius } = orbit;
  camera.position.set(
    Math.sin(polar) * Math.cos(az) * radius,
    Math.cos(polar) * radius,
    Math.sin(polar) * Math.sin(az) * radius
  );
  camera.lookAt(0, 0, 0);

  hero.rotation.y += 0.002; // slow idle spin so it lives when paused
  renderer.render(scene, camera);
}

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