Basic Concepts

Understanding the core concepts of threeparticles.

Particles

The Particles class is the main container that manages all particles. It extends THREE.Object3D so you can add it directly to your scene and transform it like any other object.

import { Particles } from "@threeparticles/core";
 
const particles = new Particles(config);
scene.add(particles);
particles.start();

Configuration

Particle systems are configured through three main sections:

particles

Controls the visual appearance:

• count - Maximum number of particles
• colors - Color gradient over lifetime
• intensity - Brightness multiplier
• fadeSize / fadeAlpha - Size and opacity transitions
• gravity - World-space gravity force
• appearance - Shape mode (square or circular)

emitter

Controls spawning behavior:

• rate - Particles per emission cycle
• lifetime - How long particles live [min, max]
• speed / size - Velocity and scale ranges
• startPositionMin / startPositionMax - Spawn volume
• directionMin / directionMax - Emission direction range
• loop - Whether to continuously emit
• spawnMode - "time" (gradual) or "burst" (all at once)

render

Controls WebGPU rendering:

• blendingMode - Additive, normal, etc.
• depthTest - Z-buffer testing
• side - Front, back, or double-sided

Lifecycle

1. Spawn - Particles are created with randomized properties within configured ranges
2. Update - Call particles.update(delta) each frame to animate
3. Recycle - When lifetime expires, particles are reused for new emissions

Control Methods

particles.start(); // Begin emitting
particles.pause(); // Pause (keeps state)
particles.stop(); // Stop and hide
particles.dispose(); // Clean up resources