Scroll GLB Camera Flythrough — Free GSAP ScrollTrigger + Three.js glTF Tour

<section class="ght-intro"><h1>Scroll to fly the camera around a real glTF model</h1><p>Four camera checkpoints, interpolated live by scroll — grab and drag at any point to take over manually.</p></section>
<section class="ght-pin" id="ghtPin">
  <canvas id="ghtCanvas"></canvas>
  <div class="ght-stage" id="ghtStage">Front</div>
  <div class="ght-hint" id="ghtHint">Drag to take over · release to resume · Ctrl/Cmd + scroll to zoom</div>
  <div class="ght-zoom">
    <span class="ght-zoom-label">+</span>
    <input type="range" id="ghtZoom" class="ght-zoom-slider" min="0" max="100" step="1" />
    <span class="ght-zoom-label">&minus;</span>
  </div>
</section>
<section class="ght-outro"><p>Reached the last checkpoint — scroll back up to reverse the flythrough.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;color:#fff;background:#0a0b12}
.ght-intro,.ght-outro{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px;padding:24px}
.ght-intro h1{font-size:clamp(28px,6vw,50px);letter-spacing:-.02em}
.ght-intro p,.ght-outro p{color:#9aa0b8;font-size:15px;max-width:460px}
.ght-pin{position:relative;height:100vh;overflow:hidden;background:radial-gradient(60% 60% at 50% 42%,#1a1420,#0a0b12)}
#ghtCanvas{display:block;width:100%;height:100%;cursor:grab}
#ghtCanvas:active{cursor:grabbing}
.ght-stage{position:absolute;top:24px;left:50%;transform:translateX(-50%);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fca5a5;background:rgba(10,12,20,.55);padding:7px 18px;border-radius:999px;border:1px solid rgba(252,165,165,.3);backdrop-filter:blur(6px);transition:color .2s}
.ght-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:12px;font-weight:600;color:#b7c0da;background:rgba(10,12,20,.55);padding:8px 16px;border-radius:999px;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08)}
.ght-zoom{position:absolute;right:22px;top:74px;bottom:74px;width:34px;display:flex;flex-direction:column;align-items:center;gap:8px;background:rgba(10,12,20,.55);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:10px 0;backdrop-filter:blur(6px)}
.ght-zoom-label{font-size:13px;font-weight:700;color:#b7c0da;line-height:1;user-select:none}
.ght-zoom-slider{flex:1;width:6px;-webkit-appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl;accent-color:#fca5a5;cursor:pointer}

gsap.registerPlugin(ScrollTrigger);

const canvas = document.getElementById('ghtCanvas');
const stageLabel = document.getElementById('ghtStage');
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(42, 1, 0.1, 60);

// OrbitControls is always live so a visitor can grab the canvas at any
// moment, but here — unlike a simple object-spin demo — the camera's
// POSITION is also what the scroll path drives. Two systems both wanting
// to set camera.position genuinely would conflict, so a small isInteracting
// flag is the handoff: while the user is actively dragging, the scroll
// path's own camera writes are skipped; a short delay after release lets
// them resume smoothly instead of snapping.
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.08;
controls.minDistance = 1.5;
controls.maxDistance = 12;

let isInteracting = false;
let resumeTimer = null;
controls.addEventListener('start', () => {
  isInteracting = true;
  if (resumeTimer) clearTimeout(resumeTimer);
});
controls.addEventListener('end', () => {
  resumeTimer = setTimeout(() => { isInteracting = false; }, 900);
});

// OrbitControls' own wheel-zoom is turned off on purpose: left on, it calls
// preventDefault() on every wheel event over the canvas — including a plain
// scroll — which would silently swallow the page scroll this whole demo
// depends on. Zoom is reimplemented below as an explicit, opt-in gesture
// (a slider, and Ctrl/Cmd + scroll) instead of hijacking the default wheel.
controls.enableZoom = false;

// Zoom here is a relative MULTIPLIER on top of whatever distance the
// checkpoint path (or a manual drag) currently puts the camera at, rather
// than an absolute distance — the four checkpoints are different distances
// from the model, so "zoomed in 30%" needs to mean the same thing at every
// one of them, not just at the checkpoint it was set at.
const ZOOM_MIN = 0.5;  // most zoomed in
const ZOOM_MAX = 2.2;  // most zoomed out
let zoomFactor = 1;
let lastProgress = 0;

const zoomSlider = document.getElementById('ghtZoom');
zoomSlider.value = String(Math.round(((ZOOM_MAX - zoomFactor) / (ZOOM_MAX - ZOOM_MIN)) * 100));

function setZoomFactor(nextFactor) {
  nextFactor = THREE.MathUtils.clamp(nextFactor, ZOOM_MIN, ZOOM_MAX);
  if (isInteracting) {
    // Mid-drag, the camera's current position came from OrbitControls'
    // free orbit, not from the checkpoint path — so just rescale the
    // existing offset from the target by how much the factor changed,
    // rather than recomputing it from a checkpoint that may not apply.
    const ratio = nextFactor / zoomFactor;
    const offset = camera.position.clone().sub(controls.target).multiplyScalar(ratio);
    camera.position.copy(controls.target).add(offset);
  }
  zoomFactor = nextFactor;
  if (!isInteracting) applyFlythrough(lastProgress); // reapply at the same scroll position with the new zoom
  zoomSlider.value = String(Math.round(((ZOOM_MAX - zoomFactor) / (ZOOM_MAX - ZOOM_MIN)) * 100));
}

zoomSlider.addEventListener('input', () => {
  const t = Number(zoomSlider.value) / 100;
  setZoomFactor(ZOOM_MAX - t * (ZOOM_MAX - ZOOM_MIN));
});

canvas.addEventListener('wheel', (e) => {
  if (!e.ctrlKey && !e.metaKey) return; // plain scroll always passes through to the page
  e.preventDefault();
  setZoomFactor(zoomFactor + e.deltaY * 0.0015);
}, { passive: false });

scene.add(new THREE.AmbientLight(0x445066, 0.6));
const key = new THREE.DirectionalLight(0xffffff, 2.0);
key.position.set(3, 4, 5);
scene.add(key);
const fill = new THREE.DirectionalLight(0x93c5fd, 0.6);
fill.position.set(-4, 1, 3);
scene.add(fill);
const rim = new THREE.PointLight(0xfca5a5, 1.4, 20);
rim.position.set(-2, 2, -4);
scene.add(rim);

let helmet = null;

// Khronos' official sample-asset "Damaged Helmet" — a highly-detailed,
// freely-licensed .glb with real PBR textures, chosen here specifically
// because it has enough surface detail (visor, straps, battle damage) to
// make a multi-checkpoint camera tour actually worth taking.
const MODEL_URL = 'https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Assets@main/Models/DamagedHelmet/glTF-Binary/DamagedHelmet.glb';

const loader = new THREE.GLTFLoader();
loader.load(
  MODEL_URL,
  (gltf) => {
    helmet = gltf.scene;
    helmet.rotation.x = Math.PI / 10;
    scene.add(helmet);
  },
  undefined,
  (err) => {
    console.error('GLB failed to load, showing a placeholder instead:', err);
    const placeholder = new THREE.Mesh(
      new THREE.IcosahedronGeometry(1, 1),
      new THREE.MeshStandardMaterial({ color: 0xfca5a5, roughness: 0.4, metalness: 0.3 })
    );
    helmet = placeholder;
    scene.add(placeholder);
  }
);

// Four named camera checkpoints around the model — each a position + a
// lookAt target. Scroll progress selects which pair of adjacent
// checkpoints to interpolate between, and how far, turning four fixed
// shots into one continuous, scrubbable flythrough.
const CHECKPOINTS = [
  { name: 'Front',  pos: [0, 0.1, 3.2],   look: [0, 0, 0] },
  { name: 'Visor',  pos: [0.4, -0.1, 1.6], look: [0, -0.1, 0] },
  { name: 'Side',   pos: [3.0, 0.3, 0.2],  look: [0, 0, 0] },
  { name: 'Back',   pos: [-0.2, 0.4, -3.0], look: [0, 0, 0] },
];

const tmpPos = new THREE.Vector3();
const tmpLook = new THREE.Vector3();

function lerpVec3(a, b, t, out) {
  out.set(
    a[0] + (b[0] - a[0]) * t,
    a[1] + (b[1] - a[1]) * t,
    a[2] + (b[2] - a[2]) * t
  );
  return out;
}

function applyFlythrough(progress) {
  const segments = CHECKPOINTS.length - 1;
  const scaled = progress * segments;
  const i = Math.min(segments - 1, Math.floor(scaled));
  const t = scaled - i;
  const a = CHECKPOINTS[i], b = CHECKPOINTS[i + 1];

  lerpVec3(a.pos, b.pos, t, tmpPos);
  lerpVec3(a.look, b.look, t, tmpLook);
  controls.target.copy(tmpLook);

  // Apply the zoom multiplier as a radial offset from the checkpoint-defined
  // look-at target, so the current zoom level holds steady across every
  // checkpoint rather than resetting to each checkpoint's authored distance.
  const dir = tmpPos.clone().sub(tmpLook).multiplyScalar(zoomFactor);
  camera.position.copy(tmpLook).add(dir);

  stageLabel.textContent = t < 0.5 ? a.name : b.name;
}

ScrollTrigger.create({
  trigger: '#ghtPin',
  start: 'top top',
  end: '+=3200',
  pin: true,
  scrub: 0.5,
  onUpdate(self) {
    lastProgress = self.progress;
    if (isInteracting) return; // the visitor is dragging — let them drive
    applyFlythrough(self.progress);
  },
});

applyFlythrough(0);

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

function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}

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