Three.js Scroll Möbius Ride — Camera on a One-Sided Surface

The Three.js Scroll Möbius Strip Ride snippet puts the camera on the centerline of a mathematically real Möbius strip and lets scroll drive it around — with the twist that makes the topology famous: after one full ring lap the camera is riding the *underside* of the surface, upside down relative to where it started, and only after a second lap (u = 4π) does it come home. GSAP's ScrollTrigger scrubs the ride parameter; the geometry, the roll, and the two-lap structure all fall out of the parametrization.

Building the strip from its equation

The surface is generated directly from the Möbius parametrization: for ring angle u and width coordinate v, the point is ((R + vW·cos(u/2))·cos u, vW·sin(u/2), (R + vW·cos(u/2))·sin u). The u/2 half-angle is the entire secret — the strip's cross-section rotates half a turn while u makes a full turn, joining the ribbon to itself with a flip. A 260×10 grid of these points becomes an indexed BufferGeometry with computeVertexNormals(), rendered DoubleSide because a one-sided surface, ironically, needs both GL faces drawn.

A camera frame with no world up

Riding a surface that turns you upside down means camera.lookAt with the default world-up would fight the roll and flip violently at the poles of the twist. Instead the snippet constructs the rider's frame from the surface itself: two finite-difference tangents (one step along u, one along v) cross-multiplied into a local surface normal, the camera positioned 1.5 units along that normal, camera.up set to it, and the look-at aimed at a point further along the centerline lifted by the same normal. The camera therefore rolls exactly as the surface rolls — by the end of lap one it is fully inverted, and most viewers only notice when the fog-dimmed far side of the ring appears "above" them.

The 4π edge and the lap-two flip

Two details encode the topology honestly. The glowing boundary line is built by walking u from 0 to 4π while alternating the v = ±1 side each lap — because a Möbius strip has exactly one edge, and that edge closes only after two circuits. And during lap two, the finite-difference normal (which always samples the same parametric side) is negated so the ride surface stays underfoot; without the flip the camera would clip through the strip the moment u crossed 2π. These are the kinds of sign subtleties that make one-sided surfaces a rite of passage.

Speed made visible

A camera gliding over a smooth purple ribbon has no motion cues, so 36 dash markers sit along the centerline, oriented by lookAt toward the next sample. Each dash brightens as the rider approaches — opacity derived from angular distance with proper 2π wrapping — producing a runway-light effect that communicates both speed and direction, similar in role to the recycled particles of the scroll tunnel. The single edge pulses slowly on clock time so the scene idles alive, per this series' convention.

Why scrub suits this topology

The Möbius property is an experiential claim — "go around once and you are flipped" — that a fired animation asserts but a scrub *proves*: users can stop at u = 2π, look around while inverted, and back up to re-watch the roll accumulate. The gear train scrubs an angle and the pendulum wave scrubs time; this scrubs a coordinate on a surface, completing the series' tour of what a single scrubbed number can be. For the straight-line cousin of this ride, see the staircase climb.