Three.js Scroll Spiral Staircase Climb — WebGL Camera Rig

The Three.js Scroll Spiral Staircase Climb snippet builds a full helix of stair treads around a central post and sends the camera up it as the visitor scrolls, using nothing more exotic than trigonometry, a handful of point lights, and one scrubbed progress value that both the geometry and the camera share.

One helix formula generates the whole structure

Every tread, railing segment, and the camera's own path are positioned with the same function, helixPoint(i), which returns x = cos(angle) * RADIUS, z = sin(angle) * RADIUS, y = i * RISE for a step index i. Because geometry and camera motion both come from one formula, retuning RADIUS, RISE, or ANGLE_STEP reshapes the entire staircase — tighter spiral, taller risers, steeper pitch — without the camera ever drifting out of alignment with the treads. This is the same "one curve drives both the world and the camera" idea used in the scroll tunnel snippet, applied here with simple trig instead of a spline.

Treads as fanned, rotated boxes rather than a lathe

Each step is a plain THREE.BoxGeometry tread positioned at a scaled-down helix point and rotated around Y by -i * ANGLE_STEP so its long edge faces tangent to the spiral, the way a real stair tread is angled to the direction of travel rather than the direction to the center post. A lathe-generated spiral ramp would look smoother but reads as a slide, not stairs; discrete boxes at a fixed angular step is what makes each tread register individually as the camera passes it.

Railings built from short cylinder segments, not a swept tube

A mathematically "correct" helical railing would use THREE.TubeGeometry along a helix curve, but that adds another curve object and another set of parameters to keep in sync with the treads. Instead, each railing segment is a short THREE.CylinderGeometry stretched and rotated between two consecutive helixPoint() calls with quaternion.setFromUnitVectors(), reusing the exact same step index the treads use. The seams between segments are invisible at the climb's speed, and the approach avoids introducing a second geometry system just for the handrail.

Point lights that brighten as the camera nears them

Six THREE.PointLight instances are spaced evenly up the helix at zero initial intensity. Every frame, each light's intensity is recomputed from its vertical distance to the camera — the closer the camera's Y position gets to a light's height, the brighter it glows, capped by Math.max(0, 1.6 - dist * 0.35). A single ambient light would leave the whole stairwell flatly lit and give no sense of progress; lights that individually bloom as you approach and fade behind you are what make the climb feel like it has distinct floors, similar in spirit to the depth cues used in scroll depth parallax.

Fog hides both ends of an unbounded-feeling stairwell

FogExp2 set to the same color as the page background swallows the treads and railing far above and below the camera's current position. Without it, ninety treads rendered all at once would be visible simultaneously stacked into the distance, which breaks the illusion of climbing through a real, dim stairwell — fog is what keeps the visible section feeling local to wherever the camera currently is, echoing the same trick the tunnel snippet uses to hide its tube's finite length.

A time-based bob and sway, deliberately decoupled from scroll

The vertical position and look target are entirely driven by the scrubbed climb.t value, but a small additional bob and sway are layered on top using THREE.Clock's elapsed wall-clock time rather than scroll progress. Tying the bob to scroll would make it stutter or freeze whenever the user pauses scrolling mid-page; tying it to real elapsed time keeps the "footsteps" motion alive and continuous even while the climb itself is paused, which reads as a much more physical, embodied camera rather than a detached dolly shot.

Look-ahead targeting keeps the turn feeling walked, not watched

Just like a first-person camera following a curved path needs to look where it's going rather than at a fixed point, this rig aims camera.lookAt() at helixPoint(i + 1.4) — a step and a half ahead of the camera's current position — so the view banks gently into each turn of the spiral. Paired with the scroll camera path snippet's straight-line dolly technique, this staircase shows the same look-ahead principle applied to a rotating, rising path instead of a flat one.