Scroll-Scrubbed GLB Turntable — Free GSAP ScrollTrigger + Three.js glTF Snippet

Most "3D on scroll" demos either fake the model with a primitive shape or lock the camera so tightly to the scroll animation that a visitor can't actually look at the thing from their own angle. This snippet does neither: it loads a genuine .glb file with Three.js's GLTFLoader, spins that model's own rotation directly from scroll position via GSAP ScrollTrigger's scrub, and keeps full OrbitControls dragging active the entire time — so scrolling and manually orbiting the camera both work, simultaneously, without a single line of conflict-resolution code.

Two independent transforms, not one shared one

The trick that makes drag-to-orbit and scroll-to-spin coexist for free is that they never touch the same property. OrbitControls moves the camera around a fixed target point — that's camera-space. The scroll handler sets duck.rotation.y directly on the model — that's object-space. A visitor dragging the canvas is orbiting the camera around the duck; scrolling is spinning the duck itself. Both are true simultaneously, and because they're different transforms on different objects, there's nothing to arbitrate — no "pause auto-rotate while dragging" logic needed at all, unlike patterns where scroll and drag would fight over the same camera position.

A real glTF binary, not a placeholder mesh

new THREE.GLTFLoader().load(MODEL_URL, ...) fetches Khronos' own official sample-asset Duck model — a real .glb binary containing mesh geometry, UVs, and a baked texture — from its GitHub repository via the jsdelivr CDN, no asset hosting of your own required. The load is async: the duck variable starts null, and the ScrollTrigger's onUpdate callback checks for that before touching .rotation, so scrolling before the model finishes loading never throws.

Scrubbed, not animated on a timer

ScrollTrigger's onUpdate receives a progress value from 0 to 1 representing exactly how far through the pinned scroll range the user currently is, and duck.rotation.y is set to progress * Math.PI * 2 * TOTAL_TURNS — a direct, reversible function of scroll position. There's no requestAnimationFrame tween running on its own clock; scroll back up by one pixel and the model rotates back by the exact corresponding fraction of a turn.

A named, honest fallback if the CDN model fails

The loader's third argument is an error callback. If the .glb genuinely fails to fetch (a blocked network, an offline preview), the snippet logs the real error and swaps in a plain sphere so the scene is never a silent empty void — the same shape-matched-fallback discipline used throughout this library for anything that depends on an external resource.

Zoom is opt-in, not a hijacked scroll wheel

OrbitControls' built-in wheel-zoom is deliberately turned off (controls.enableZoom = false) — left on, it calls preventDefault() on every wheel event over the canvas, silently swallowing the page scroll this whole demo depends on. Zoom is reimplemented as two explicit, opt-in gestures instead: a vertical slider next to the canvas, and Ctrl/Cmd + scroll wheel (the same convention embedded Google Maps and most map widgets use). Both call the same setZoomDistance() helper, which clamps to controls.minDistance/maxDistance and keeps the slider's position in sync no matter which input triggered the change.

Customizing it

Swap MODEL_URL for any other Khronos sample-asset `.glb` or your own hosted model, change TOTAL_TURNS for a faster or slower spin, or combine this pattern with scroll reveal grid for a longer scroll narrative. Pair it conceptually with three product viewer, which uses the same OrbitControls setup on a procedural (non-glTF) shape.