Three.js Scroll Prism — Spectrum Dispersion Fan

The Three.js Scroll Prism Light Split snippet stages the most famous experiment in optics: a white beam extends across a dark room into a glass prism, and as the user keeps scrolling, seven spectral rays fan out of the far face — red bending least, violet most — while the camera swings from an edge-on beam view to the full *Dark Side of the Moon* silhouette. GSAP's ScrollTrigger scrubs one dispersion value; the beams are boxes laid between computed points.

A prism from a three-sided cylinder

Three.js has no prism primitive, but CylinderGeometry(6, 6, 7, 3) — three radial segments — is exactly an extruded equilateral triangle. Rotated so its axis lies horizontal, it presents a triangular cross-section to the camera at zero modeling cost. The glass recipe repeats this series' budget formula (see the hourglass bulbs): MeshPhysicalMaterial at 22% opacity with near-zero roughness, depthWrite off, plus an EdgesGeometry wireframe overlay so the silhouette stays crisp even where the glass is nearly invisible.

Beams are boxes, not lines

WebGL line width is capped at 1px on most platforms, so glowing light rays can't be Line objects. Every beam here is a 1-unit BoxGeometry stretched between two points by a layBeam() helper: scale.x becomes the length, position the midpoint, rotation.z the atan2 of the direction. Additive blending makes overlapping beams brighten each other, and each ray's cross-section shimmers independently on clock time so the fan reads as *light*, not painted stripes. The white beam thins as dispersion grows — its energy visibly transferring into the spectrum.

Dispersion as a per-ray bend factor

Each of the seven rays stores a bend factor from −3 (red) to +3 (violet), and its exit angle is −0.12 − bend × 0.085 × dispersion — so at zero dispersion all rays overlap the white beam's line, and as the scrub advances the fan opens with violet deflecting most, the correct physics ordering. Ray length also grows with dispersion (4 to 50 units), shooting color to the frame edges at full split. Because angle and length are pure functions of the scrubbed value, scrolling back retracts the spectrum into the prism and restores the undivided white beam.

Two phases, one camera thesis

The scrub splits at 30%: first the white beam *reaches* — extending from off-screen to the entry face, an arrival that gives the split a cause — then the fan opens through a smoothstepped 70%. Meanwhile the camera swings 1.1 radians from nearly edge-on (where the beam is a bright line and the prism a dark triangle) to frontal (where the fan is widest). The camera move is doing argumentative work: it starts where the *beam* is the subject and ends where the *spectrum* is, the same choreography-as-explanation idea as the pendulum wave's profile-to-front slide.

Dust makes light visible

Beams in empty space are invisible in reality and unconvincing in 3D. Three hundred additive dust motes drift through the scene, giving the beams something to appear to illuminate — the same trick film sets use with haze machines. The prism itself rotates half a radian as dispersion grows, suggesting the split is *caused* by the geometry change, and idles with a gentle wobble so the scene never freezes. For the full-scene color treatment of this idea, see the scroll color morph; for beams at architectural scale, the lightning orb.