Three.js Scroll Camera Path — GSAP ScrollTrigger WebGL Flythrough

The Three.js Scroll Camera Path snippet pins a WebGL scene in place and flies the camera through a small gallery of five distinct 3D shapes as the visitor scrolls — with the scrollbar directly controlling camera position, not a timer — combining GSAP's ScrollTrigger plugin with core Three.js, both loaded from a CDN.

The camera moves, not the shapes

It would be tempting to animate each shape's own position as the visitor scrolls past it, but this snippet does the opposite: every shape sits at a fixed Z position along one axis, placed once at startup, and it's the camera that travels through that fixed gallery. This mirrors how a real flythrough or dolly shot works, and it means adding a sixth or seventh shape to the gallery requires no changes to the animation logic at all — just another entry in the shape list at whatever Z depth you choose.

A plain object as the tweened value, not the camera directly

Rather than handing GSAP the camera object to tween directly, the snippet tweens a tiny plain object — { z, lookZ } — with GSAP's ScrollTrigger scrub, and then, every single animation frame, manually copies those two numbers onto the camera's actual position and look-target. This indirection matters: it decouples "what GSAP is scrubbing" from "how Three.js renders it," which means the same scrubbed values could just as easily drive a camera path with curves, banking, or multiple axes without changing how the ScrollTrigger timeline itself is defined.

The look target moves too, not just the camera

If only the camera's Z position moved while it kept staring straight down a fixed axis, the flythrough would feel mechanical and flat. Instead, a separate lookZ value — always kept a fixed distance ahead of the camera's own Z — is tweened in lockstep, and camera.lookAt() is called every frame with that shifting target. This is what gives the flythrough a sense of "heading toward" the next shape rather than sliding sideways past a static viewing direction.

scrub: 0.6, not scrub: true

Unlike a typing effect where the scrubbed value must snap exactly to scroll position, camera motion benefits from a small amount of smoothing. scrub: 0.6 tells ScrollTrigger to let the tweened values glide toward the current scroll position over roughly six-tenths of a second rather than matching it with zero latency, which smooths out the inevitable jitter of real trackpad and mouse-wheel input into something that reads as a deliberate, cinematic camera move rather than a jerky, frame-perfect scrollbar-slave.

A pinned stage, +=400% of extra scroll distance

The #scpStage section is pinned in place for +=400% of the viewport's height worth of additional scrolling — enough room for five distinct shapes to each get a clear, unhurried moment as the camera passes through their vicinity. Widening that value stretches the whole flythrough across more scroll distance, giving each shape more screen time; narrowing it compresses the whole trip into a quicker scroll.

Each shape spins independently, at its own rate

While the camera trip itself is precisely scroll-driven, every individual shape's own rotation runs on the regular requestAnimationFrame clock, completely independent of scroll position, each at a slightly different speed. This keeps the gallery feeling alive even while the visitor pauses scrolling mid-flight — the camera holds still, but the shapes keep turning.

Why combine two libraries instead of one

Three.js has no built-in concept of "scroll," and GSAP's ScrollTrigger has no concept of a 3D scene — each library does exactly one job well. This is the same combination used by the scroll typewriter snippet, just applied to camera position instead of character opacity, and it's a useful pattern to internalize: any property that can be represented as a plain number or object can be scrubbed by ScrollTrigger, then applied manually to whatever rendering system — DOM, Canvas 2D, or WebGL — actually needs it. Pair this flythrough with a starfield warp as a "before" scene, or contrast its cinematic pacing against the physically-orbiting motion of orbit rings.