Particles guide

Three.js Particles with BufferGeometry

Use one BufferGeometry and one PointsMaterial when you want a star field, data cloud, dust layer, or abstract background without creating hundreds of meshes.

Good first target: 2,000 to 8,000 points, one material, one draw call, and a slow rotation on the Points object.

Why particles work well in static pages

A particle scene can make a developer page feel alive while staying cheap to render. The trick is to keep particle data in a typed array, attach it to BufferGeometry, and animate the parent object before trying custom shaders.

That pattern is also search-friendly. People often search for "three js particles example", "three js pointsmaterial", and "three js buffergeometry particles" because they need a small starting point they can paste into a scene.

Minimal particle sphere

const count = 4000;
const positions = new Float32Array(count * 3);

for (let i = 0; i < count; i += 1) {
  const radius = 1.4 + Math.random() * 0.25;
  const theta = Math.random() * Math.PI * 2;
  const phi = Math.acos(2 * Math.random() - 1);
  const index = i * 3;

  positions[index] = radius * Math.sin(phi) * Math.cos(theta);
  positions[index + 1] = radius * Math.sin(phi) * Math.sin(theta);
  positions[index + 2] = radius * Math.cos(phi);
}

const geometry = new THREE.BufferGeometry();
geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));

const material = new THREE.PointsMaterial({
  color: 0x6be2d0,
  size: 0.025,
  sizeAttenuation: true
});

const particles = new THREE.Points(geometry, material);
scene.add(particles);

function animate() {
  particles.rotation.y += 0.0025;
  renderer.render(scene, camera);
}
Open Live Examples

Useful variations

Star field

Spread points through a cube or sphere, keep the camera near the center, and move the point cloud slowly on z. Use small point size and low opacity.

Data cloud

Map data values into x, y, z positions. Store color as a second buffer attribute when each point needs its own color.

Hero background

Use fewer points, larger spacing, and calmer motion. A static site can look polished without forcing the GPU to work hard.

Shader particles

Move from PointsMaterial to ShaderMaterial when size, color, or position needs time-based logic per point.

Performance checklist

  • Reuse one BufferGeometry instead of creating one mesh per dot.
  • Change the parent rotation before editing thousands of positions every frame.
  • Dispose old geometries and materials when replacing a particle scene.
  • Test on a phone before raising the particle count.

FAQ

Should I use PointsMaterial or ShaderMaterial?

Start with PointsMaterial. Move to ShaderMaterial when you need animated point size, color ramps, procedural noise, or custom alpha behavior.

How many particles can Three.js handle?

It depends on device, point size, overdraw, and shader cost. A conservative static-page demo should stay under 10,000 points until measured.

Can particles help SEO?

The canvas itself is not the SEO content. The page still needs readable text, headings, code, FAQ, and internal links around the demo.

Related Three.js Lab pages

Three.js Examples with Code ShaderMaterial Example Camera FOV Calculator

Sources