Particles

Particles

Three.js can render thousands of points efficiently using Points with a BufferGeometry.

BufferGeometry + Float32Array

Particle positions are stored in a typed array and uploaded to the GPU:

const count = 1000;
const positions = new Float32Array(count * 3); // x,y,z per particle

for (let i = 0; i < count; i++) {
  positions[i * 3]     = (Math.random() - 0.5) * 20; // x
  positions[i * 3 + 1] = (Math.random() - 0.5) * 20; // y
  positions[i * 3 + 2] = (Math.random() - 0.5) * 20; // z
}

const geo = new THREE.BufferGeometry();
geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));

PointsMaterial

const mat = new THREE.PointsMaterial({
  color: 0x88ccff,
  size: 0.1,
  sizeAttenuation: true, // size scales with distance
});

Creating the Points Object

const particles = new THREE.Points(geo, mat);
scene.add(particles);

Animating Particles

You can update positions each frame by modifying the array and flagging it dirty:

geo.attributes.position.needsUpdate = true;

Your Task

Implement createParticleSystem(count, spread, size, color) that:

• Creates a BufferGeometry with count particles, each randomly positioned in a cube of side spread centered at origin
• Uses PointsMaterial with the given size and color
• Returns the Points object