Three.js Scroll Constellation Web — GSAP Star Chart Reveal

The Three.js Scroll Constellation Web snippet scatters a field of stars through 3D space and, as the visitor scrolls, progressively wires them together into glowing constellation lines — not with a particle system that fades in randomly, but with a precomputed, sorted list of edges whose reveal is driven directly by the scrollbar via a single scrubbed value.

Stars are generated once, positions frozen forever

At load time, 260 points are scattered inside a hollow sphere shell using spherical coordinates (theta/phi sampled from a uniform sphere distribution, radius randomized between 14 and 40 units) and written into a Float32Array backing a THREE.BufferGeometry. Those positions are never touched again. Freezing the star field up front is what lets the edge list computed in the next step stay valid for the lifetime of the scene — there is no need to recompute distances every frame because nothing moves relative to anything else, only the camera and the whole group rotate together.

A precomputed, sorted edge list instead of per-frame distance checks

Naively, you might loop over every star pair every frame and draw a line if they're close enough — that's an O(n²) distance check running 60 times a second for no reason, since the stars are static. Instead, the snippet loops over all pairs exactly once at startup, keeps only pairs closer than a threshold distance, and sorts the resulting candidate list by distance ascending. That sorted array becomes the fixed script for the whole scroll journey: edge 0 is the shortest link in the sky, edge 219 is the longest kept link, and scrolling simply decides how far into that script the reveal has progressed.

setDrawRange is the entire reveal mechanism

The line geometry is built once as a single THREE.BufferGeometry holding all edges as line-segment pairs, wrapped in one THREE.LineSegments object with additive blending for a glow-on-black look. Revealing more of the constellation as scroll progresses does not mean rebuilding that geometry, re-uploading a new attribute buffer, or adding new mesh objects — it means calling lineGeo.setDrawRange(0, revealedCount * 2) with a growing count. The GPU already has every possible edge in VRAM; the draw range just tells it how much of the array to actually rasterize this frame. That single call is why the reveal has effectively zero per-scroll-frame cost regardless of how many total edges exist, and why scrolling back up instantly un-reveals lines with no extra bookkeeping — shrinking the draw range is exactly as cheap as growing it.

Flashing a star the moment its first edge lands

To make each newly formed link feel like a discovery rather than a line silently appearing, the snippet tracks, for every star index touched by a newly revealed edge, a small expiry time in a flashUntil array. A second, parallel THREE.Points cloud sitting exactly on top of the star positions uses a per-vertex pulseSize attribute and additive blending to render as a soft cyan glow; each frame, any star whose flash window hasn't expired gets a temporary opacity boost proportional to how much of its 0.6-second flash window remains. This is a similar technique to the star-highlighting used in the network graph snippet, adapted here so it's driven by scroll position rather than user interaction.

Continuous rotation layered on top of discrete reveal

The reveal progress (t, scrubbed 0 to 1 across the pinned stage) and the ambient parallax rotation are deliberately kept independent: rotation advances every animation frame regardless of scroll state, while the edge count only changes when t changes. This separation means the constellation still feels alive — drifting gently, like the starfield warp backdrop — even when the visitor pauses mid-scroll with the scrollbar completely still, rather than freezing into a static image the moment scrolling stops.

Why LineBasicMaterial with additive blending, not a shader

A custom shader could draw fading gradient lines or animate line width, but for a webbing effect of thin glowing threads, THREE.LineBasicMaterial with blending: THREE.AdditiveBlending and depthWrite: false gets a convincing neon-on-black look for free: overlapping lines brighten where they cross, exactly like real light does, and there is no depth-fighting because nothing needs to write to the depth buffer for a wireframe web. This keeps the whole snippet dependency-free beyond three.js and GSAP, the same constraint followed by the holographic globe and comet trail snippets in this gallery.