Three.js Scroll Tunnel — GSAP ScrollTrigger WebGL Flythrough

The Three.js Scroll Tunnel snippet drops the visitor inside a glowing wireframe tube and flies them down its length as they scroll — the scrollbar drives camera position directly along a curved 3D path, not a timer — by pairing Three.js TubeGeometry with GSAP's ScrollTrigger plugin, both loaded from a CDN.

One curve defines both the tunnel and the camera path

The whole effect hinges on a single CatmullRomCurve3 built from a dozen control points that gently wander in X and Y while marching steadily in negative Z. That one curve is used twice: once to extrude the TubeGeometry that becomes the visible tunnel walls, and again as the exact path the camera travels. Because the geometry and the camera share the same curve, the camera is always perfectly centered inside the tube looking down its throat — there is no separate "align the camera to the wall" step to get wrong.

A single scrubbed number walks the whole scene

Rather than tweening the camera object, the snippet scrubs one plain value — travel.t — from 0 to just under 1. Every frame, curve.getPointAt(t) returns the camera's exact world position and curve.getPointAt(t + 0.01) returns a look-ahead point a little further down the tube. Deriving everything from one normalized parameter means the tunnel can be reshaped, lengthened, or curved differently without touching the ScrollTrigger timeline at all.

Look-ahead, not look-at-center

If the camera simply stared at the tunnel's far end, cornering would feel wrong — you would see the wall swing past rather than the path bend toward you. Instead the look target is sampled a small fraction of the curve *ahead* of the camera's current position, so the camera always faces the direction of travel and banks naturally into each turn, exactly like a real vehicle following a track.

Neon rings sell the speed

Forty torus rings are threaded along the curve at even intervals, each oriented perpendicular to the path using curve.getTangentAt() and lookAt(), and tinted across a hue sweep. A featureless tube gives almost no sense of motion; the rings streaking past the camera are what make the flythrough read as genuine forward speed, and they double as depth markers.

Exponential fog hides the seams

FogExp2 fades the far end of the tunnel into the background color, which both hides where the finite tube geometry ends and concentrates the neon glow near the camera. Because the fog color matches the page background exactly, the WebGL canvas blends seamlessly into the surrounding scroll sections above and below the pinned stage.

scrub: 0.7 for cinematic glide

A numeric scrub value lets the camera position glide toward the scroll position over about seven-tenths of a second rather than snapping frame-perfectly. Fast camera travel through a tunnel amplifies input jitter, so this smoothing is what turns raw trackpad and wheel noise into a fluid, deliberate ride. This is the same scrubbing pattern used by the scroll camera path snippet, applied to a curved tube instead of a straight gallery. Pair it with a starfield warp intro or a synthwave terrain outro for a full retro-futurist scroll journey.