Three.js Comet Trail — Looping WebGL Meteor With Fading Particle Tail

The Three.js Comet Trail snippet flies a glowing comet head along a continuously looping path, leaving behind a particle trail that glows brightest right behind the head and fades smoothly to nothing further back — built from a fixed-size recycled particle pool and a simple two-axis sine path, using core Three.js loaded from a CDN.

A Lissajous-style path instead of an authored spline

Rather than hand-placing waypoints along a curve, the comet's position at any moment is computed directly from cometPositionAt(time) — X and Z driven by sine and cosine of the time value at one frequency, Y driven by sine at a *different* frequency. Because the X/Z and Y frequencies don't share a simple ratio, the resulting 3D loop never retraces exactly the same path twice within any short viewing window, giving a comet flight path that looks organic and non-repeating despite being entirely deterministic math.

A fixed-size recycled pool, not a growing array

The trail never allocates a new particle as the comet flies — it maintains exactly TRAIL_LENGTH particle slots from the very first frame, forever. Each frame, exactly one slot (tracked by a simple wrapping trailWriteIndex) gets overwritten with the comet's *current* position and its age reset to zero. This "always overwrite the next slot in a fixed ring" approach is the standard pattern for any bounded-length trail, motion blur, or particle-limited effect — the same recycling philosophy used in the starfield warp snippet, just spawning behind a moving object instead of resetting particles that reach the camera.

Age drives color, and color is the entire fade effect

Every trail particle carries its own age value, starting at 0 the instant it's spawned and creeping toward 1 every frame thereafter (clamped so it never exceeds 1). That age is converted directly into a brightness value — 1 - age — which feeds every particle's vertex color. There's no separate opacity animation or shrinking scale involved: a particle simply gets darker and darker as it ages, until it's rendered as black and visually disappears against the dark background, at which point its slot is eventually recycled by the write index looping back around.

Warm color drifting toward black, not toward transparent

Rather than fading each particle's *alpha* toward zero, this snippet fades its *color* toward black — multiplying a warm, comet-tail palette (slightly orange-tinted) by the shrinking brightness value. Combined with additive blending, this produces a trail that looks like it's genuinely cooling and dimming, similar to embers or a fading spark, rather than simply becoming more see-through.

Additive blending makes the head-adjacent trail glow brightest

Because newly-spawned trail particles cluster most densely right behind the comet's head (it moves a small, consistent distance each frame), and THREE.AdditiveBlending sums overlapping particle colors rather than letting one occlude another, the section of trail immediately behind the head reads as noticeably brighter and denser than the thinning tail further back — exactly the visual hierarchy a comet trail should have, achieved without any explicit "brighten near the head" logic.

A static starfield gives the scene scale

A field of 800 faint, unmoving background points (very slightly rotating for ambient life) gives the eye a fixed reference frame — without it, the comet and its trail would read as floating in a scale-less void with no sense of how large or fast the loop actually is.

Where this technique applies

The fixed-pool, age-to-color trail pattern generalizes to sparks, magic wand trails, sword-swing motion trails, or any effect where something needs to leave a fading trace behind its movement. Pair this snippet with a starfield warp for a fuller space-themed scene, or contrast its glowing, additive trail against the flat, opaque look of the instanced cube wave.