HOW TO PROGRAM A
COMET PARTICLE SYSTEM IN THREE.JS
Create stunning comet-tail effects in Three.js with custom geometry, materials, and animation. The comet streaking behind this page is the live demo — copy the code or launch it in one click.
LIVE DEMO
The comet streaking behind this page is a live Three.js particle system. Launch the full-screen demo to orbit around it — drag to rotate, scroll to zoom. On a phone, drag with one finger.
Drag to orbit · scroll to zoom · Esc to exit
WANT TO BLOW STUFF UP?
From a comet tail to a full detonation: build a 3D rockfire explosion in Three.js — flying debris rocks, fire, smoke, a shockwave ring, and camera shake. The whole blast in one copy-paste file, with a live demo you can orbit.
See the Rockfire Explosion Tutorial
Introduction
Three.js is a JavaScript library that opens up a world of possibilities for creating mesmerizing 3D animations on the web. One of its most eye-catching uses is a comet particle system: thousands of points streaming through space, leaving behind a glowing tail reminiscent of a real comet. With a single THREE.Points cloud backed by a BufferGeometry, you can draw the entire effect in one GPU call and animate it by editing typed arrays each frame.
Frequently Asked Questions
How do you create a comet particle trail in Three.js?
Create a particle system using THREE.Points with a custom BufferGeometry. Assign each particle a velocity and lifetime. On each frame, move particles outward from the comet head while fading their opacity as they age. Reset expired particles at the comet origin to create a continuous trail effect.
What geometry and material are used for particle systems in Three.js?
Use THREE.BufferGeometry with position, color, and size attributes stored in Float32Array buffers. For the material, use THREE.PointsMaterial with size, vertexColors, transparent, and blending properties. AdditiveBlending creates the glowing effect typical of comet tails and fire particles.
How do you animate particles with velocity in Three.js?
Store velocity vectors for each particle in a separate array. In the animation loop, add each particle's velocity to its position every frame. Apply damping (multiply velocity by 0.98) to slow particles over time, and add gravity or random forces for more natural movement. Mark the position attribute as needsUpdate after modifying.
How do you create a glow effect on Three.js particles?
Use THREE.AdditiveBlending on the PointsMaterial, which makes overlapping particles brighter rather than opaque. Combine this with a circular gradient texture (bright center fading to transparent edges) applied as a point sprite map. The result is soft, luminous particles that naturally glow when clustered together.
How do I make a realistic comet tail in Three.js?
Use one THREE.Points system with a custom ShaderMaterial and two particle populations: a slow dust tail pushed away from the sun that curves sideways as it ages (yellow-white), and a fast, straight blue ion tail pointing directly away from the sun. Fade each particle by its remaining life and draw with additive blending.
Why does a comet have two tails?
The dust tail is made of grains pushed gently by sunlight, so it lags behind the comet and curves along its orbit. The ion tail is gas ionised by the Sun and carried by the solar wind, so it is blue and points straight away from the Sun.
How do I make a rocky comet nucleus in Three.js without lights?
Displace the vertices of a low-detail IcosahedronGeometry with 3D noise, then shade it in a ShaderMaterial with a dot product against a fixed sun direction plus a Fresnel rim for the bright sunlit edge. No PointLights are needed.
