Imagine you want to create a sky full of stars.

Wrong Way

Create 10,000 small spheres.

const star = new THREE.Mesh(
    new THREE.SphereGeometry(),
    material
);

Problem:

• 10,000 Meshes
• Very heavy
• Slow website

Right Way

Create 10,000 dots (particles).

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

Three.js treats them as one object.

Result:

• Fast
• Less memory
• Can create thousands of particles easily

How Does Three.js Know Where To Place Particles?

Every particle needs:

X position
Y position
Z position

Example:

Particle 1 = (1,2,3)
Particle 2 = (4,1,0)
Particle 3 = (-2,5,1)

These positions are stored inside a BufferGeometry.

BufferGeometry

Think of BufferGeometry as a big container that stores all particle positions.

const geometry =
new THREE.BufferGeometry();

Float32Array

Stores coordinates.

const positions =
new Float32Array(count * 3);

Why * 3?

Because every particle needs:

x
y
z

Example:

[
 1,2,3,
 4,5,6,
 7,8,9
]

Means:

Particle 1 → x=1 y=2 z=3
Particle 2 → x=4 y=5 z=6
Particle 3 → x=7 y=8 z=9

Creating Random Particles

for(let i=0;i<count*3;i++){
    positions[i] =
    (Math.random()-0.5)*10;
}

This gives random positions.

PointsMaterial

Particles need a material just like meshes.

const material =
new THREE.PointsMaterial();

Particle Size

size:0.1


const material =
new THREE.PointsMaterial({
    size:0.1
});

Makes particles bigger.

Particle Color

color:"white"


const material =
new THREE.PointsMaterial({
    color:"yellow"
});

All particles become yellow.

Creating The Particle System

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

scene.add(particles);

Now particles appear in the scene.