Particle systems

Back to Modules

Particle Systems in Three.js

Particle systems are a powerful way to create visual effects like smoke, fire, rain, dust, and stars in 3D web applications. They are highly performant, allowing for hundreds of thousands of particles on screen with a reasonable frame rate.

Core Components for Creating Particle Systems:

  1. BufferGeometry: This is used to define the positions of individual particles. Each vertex in the BufferGeometry represents a single particle. You can manually add vertices to a geometry created from scratch, or use existing geometries.
  2. PointsMaterial: This material is specifically designed for rendering points. It allows you to control properties like the color, size, and even apply textures to the particles. The size property defines the size of the points in pixels, and sizeAttenuation can be used to make distant particles appear smaller.
  3. Points: Instead of creating a Mesh object, you create a Points object by passing the BufferGeometry and PointsMaterial to its constructor. This tells Three.js to render the vertices as points rather than a solid object.

Basic Example: Simple Starfield

Here's a basic example of how you might set up a simple particle system to create a starfield effect:

import *s THREE from 'three';

// Scene, Camera, Renderer setup (assuming these are already defined)
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 1. Create a BufferGeometry
const particlesGeometry = new THREE.BufferGeometry();
const vertices = [];

// Add some random vertices for particles
for (let i = 0; i < 10000; i++) {
    const x = THREE.MathUtils.randFloatSpread(2000); // Random value between -1000 and 1000
    const y = THREE.MathUtils.randFloatSpread(2000);
    const z = THREE.MathUtils.randFloatSpread(2000);
    vertices.push(x, y, z);
}

particlesGeometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

// 2. Create a PointsMaterial
const particlesMaterial = new THREE.PointsMaterial({
    color: 0x888888, // Grey color
    size: 15,        // Size of the particles
    sizeAttenuation: true // Particles further away appear smaller
});

// You can also add a texture to the particles
// const particleTexture = new THREE.TextureLoader().load('path/to/your/particle_texture.png');
// particlesMaterial.map = particleTexture;
// particlesMaterial.transparent = true; // Enable transparency for textures with alpha channels

// 3. Create a Points object and add it to the scene
const particleSystem = new THREE.Points(particlesGeometry, particlesMaterial);
scene.add(particleSystem);

camera.position.z = 500;

function animate() {
    requestAnimationFrame(animate);

    particleSystem.rotation.x += 0.0005;
    particleSystem.rotation.y += 0.001;

    renderer.render(scene, camera);
}
animate();

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

Advanced Particle Systems:

For more advanced particle systems with complex behaviors like spawning, destruction, and animation, you often need to: