Three.js Starfield Warp — WebGL Hyperspace Point Field Effect

The Three.js Starfield Warp snippet renders thousands of stars flying past the camera in real 3D depth, with a press-and-hold button that pushes the field into "warp speed" — widening the field of view and speeding up the stream — using core Three.js loaded from a CDN and no external texture or model assets.

Perspective division is what makes stars fly outward

Every star is stored as a plain {x, y, z} object, independent of the BufferGeometry that actually renders it. Each frame, a star's on-screen X and Y position is computed as (x / z) × constant — dividing by the star's remaining distance from the camera. As z shrinks toward zero, that division makes the same fixed X/Y spread out further and further from the center of the screen. This one line of perspective math is the entire secret behind the classic "hyperspace" look: stars near the camera appear to streak outward toward the frame edges, while distant stars barely seem to move.

Recycling stars instead of destroying and recreating them

Rather than allocating new star objects as ones pass the camera, every star that reaches z <= 0.1 is simply reassigned a fresh random X/Y and pushed back out to the far edge of the field via resetStar(). The underlying BufferGeometry — and its Float32Array of positions — is allocated exactly once at startup and never resized. This recycling pattern is standard for any continuously-flowing particle effect (rain, snow, sparks, or starfields): allocate a fixed pool once, and cycle members through it forever rather than paying for garbage collection on every reset.

Two separate parameters drive the field: speed and field of view

Holding the warp button changes two things simultaneously, not just one: the per-frame Z-decrement speed (how fast stars travel toward the camera) and the camera's field of view (camera.fov), which is widened from 75° to 92°. Speed alone would just make stars move faster in a straight line; widening the FOV at the same time is what makes the streaks visibly stretch and bow outward toward the frame edges, matching the exaggerated, wide-angle look of film hyperspace sequences.

Point size also scales with warp state

The PointsMaterial's size property doubles while warping, since faster-moving points crossing more screen distance per frame read as thinner without a matching size increase — a detail easy to miss but noticeable by its absence once you compare the effect with and without it.

A press-and-hold button, not a toggle

The warp button responds to pointerdown/pointerup/pointerleave (plus touchstart/touchend for older mobile browsers that fire pointer events inconsistently), rather than toggling on click. That choice matches the interaction pattern of the "hold" metaphor: warp speed is a temporary boost the visitor actively sustains, not a persistent mode they forget is on.

Where to take it from here

This same recycled-particle-with-perspective-division pattern underlies rain, snow, embers, and confetti effects just as much as starfields — only the reset direction and per-particle physics differ. Pair it with a particle network for a "space station" themed section, or contrast the real 3D depth here against the flat Canvas 2D starfield snippet to see the difference perspective division makes.