Three.js Scroll Portal Gate Sequence — GSAP Ring Flythrough

The Three.js Scroll Portal Gate Sequence snippet flies the camera through ten discrete glowing rings spaced along the Z axis, each one pulsing brighter right as the camera crosses its plane, using GSAP's ScrollTrigger to scrub a single camera-position value and a per-frame distance check to drive each ring's reaction. Where the scroll tunnel snippet builds one continuous TubeGeometry corridor, this snippet is built from ten independent TorusGeometry gates the camera threads one at a time, which changes both the geometry approach and how the "reactive" moment is detected.

Discrete gates instead of a continuous tube

Each gate is its own THREE.Mesh combining a glowing TorusGeometry ring with a faint inner CircleGeometry "membrane" disc, positioned at a fixed Z offset with a small random-looking tilt and rotation so the sequence reads as hand-placed rather than mechanically repeated. Because gates are discrete objects rather than samples along a shared curve, each one can be independently colored, scaled, and reacted to — a flexibility a single extruded tube does not offer, at the cost of needing per-gate state tracked in a plain array instead of one shared geometry.

Comparing camera Z to ring Z, not ScrollTrigger callbacks per ring

A naive implementation might register ten separate ScrollTrigger instances, one per gate, each firing an enter/leave callback. This snippet instead keeps a single ScrollTrigger that scrubs one travel.z value for the whole flight, and every animation frame computes Math.abs(camera.position.z - gate.z) for all ten gates to derive a 0–1 proximity value per ring. This is simpler to reason about, avoids ten separate trigger/scrub configurations drifting out of sync with each other, and means adding an eleventh gate requires no new ScrollTrigger wiring at all — just another entry in the gates array.

Two-part glow: proximity plus a sine pulse

Each gate's brightness boost multiplies two signals: proximity, which ramps up as the camera nears the ring's plane and back down after it passes, and a continuous per-gate sine pulse offset by its index so the ten rings do not all throb in unison. The proximity term gives the "the camera is passing through me right now" reaction the spec calls for, while the sine term keeps distant gates visually alive rather than static, so the corridor never looks like a row of inert shapes waiting to be triggered.

Color and scale react without a shader

Rather than writing a custom fragment shader for the glow, the ring's MeshBasicMaterial.color is nudged toward white with Color.offsetHSL, its opacity is raised, and the mesh itself is scaled up slightly — three cheap, GPU-shader-free properties that combine into a convincing pulse-and-brighten effect. This mirrors the philosophy in synthwave terrain and the scroll tunnel: favor material and transform tweaks over custom GLSL wherever the visual target allows it, since it keeps the snippet copy-pasteable with zero shader compilation risk.

A recycled particle field for depth cueing

Five hundred points drift toward the camera and wrap around using modular Z arithmetic once they pass it, exactly like the corridor-filling technique used in the starfield warp snippet, so the space between gates never reads as empty black void. Combined with FogExp2 matched to the background color, distant gates fade in gradually rather than popping into existence, which hides the fixed GATE_COUNT boundary at the far end of the sequence.

One scrubbed Z value, independent micro-drift

The camera's Z position is fully driven by the GSAP scrub, but X and Y get a small independent sine/cosine drift based on elapsed clock time rather than scroll, so the flight never feels perfectly rigid even though forward progress is 100% scroll-controlled. Because only Z is tied to scroll, scrolling back up reverses gate order and undoes every ring's "passed" flag exactly, with the drift simply continuing to animate in the background as a live-clock-driven flourish, similar in spirit to the scroll camera path snippet's handling of secondary motion.