Particles are a useful tool in adding a little extra juice to your THREE.js scene. They're good for all sorts of things: dust, fire, water, explosions, stars, fireflies -- basically dots of all kinds.

Here's a Pen with a few example effects:

Now I'll walk you through creating some of your own! This assumes you have at least a basic familiarity with Javascript, and hopefully aren't totally scared by math words like "cosine".

## Getting Started

To start, fork this pen. It's not much too look at right now, but it's a good starting point! THREE.js is included, as well as lodash, and the file is wrapped up in a javascript closure. The scene, camera, and renderer have already been created, so we can get straight to drawing stuff.

## Particles

A particle is simply a point in space represented by an x, y, z coordinate, or in this case an instance of THREE.Vector3. To draw the particle, it must be a part of what is called a PointCloud. A point cloud works like any other polygonal mesh, in that it's just an array of vertices with a material. The difference is that when it's rendered it's as a set of points instead of faces.

Let's start with something simple: a randomly generated "star field". First we define a material:

```  ```var material = new THREE.PointCloudMaterial({
color: 0xffffcc
});
```
```

Pale, yellow dot. Perfect! Next, we create the geometry and fill it up with some randomly placed points. Say, a thousand of them randomly placed somewhere between -400 and 400 on each axis.

```  ```var geometry = new THREE.Geometry();
var x, y, z;
_.times(1000, function(n){
x = (Math.random() * 800) - 400;
y = (Math.random() * 800) - 400;
z = (Math.random() * 800) - 400;

geometry.vertices.push(new THREE.Vector3(x, y, z));
});
```
```

Finally, we create our point cloud and add it to the scene.

```  ```var pointCloud = new THREE.PointCloud(geometry, material);
```
```

## Animating the Particles

Moving the particles around is as simple as updating their coordinates and re-rendering the image. To do that, first we'll replace the render call with this code:

```  ```function render(){
window.requestAnimationFrame(render);
renderer.render(scene, camera);
}

render();
```
```

When render() is run it will pass itself into window.requestAnimationFrame. This way it will continue to get called repeatedly and at a consistent framerate for as long as the window is actively working to animate stuff.

Now we just add a little code to move our stars around. This time I'm going to use what's called Brownian Motion. On each frame of animation we give each particle just a tiny push in a random direction.

```  ```function render(){
window.requestAnimationFrame(render);

_.forEach(geometry.vertices, function(particle){
var dX, dY, dZ;
dX = Math.random() * 2 - 1;
dY = Math.random() * 2 - 1;
dZ = Math.random() * 2 - 1;

});
geometry.verticesNeedUpdate = true;

renderer.render(scene, camera);
}

render();
```
```

And now our stars have become fireflies.

## Fancy Fireflies

Finally, let's look at how to color individual particles. The first thing we do is update the material so that instead of having a color, we set it's vertexColors property to be THREE.VertexColors. Also while we're at it I'm going to increase the size so we cen get a better look at the color.

```  ```var material = new THREE.PointCloudMaterial({
size: 5,
vertexColors: THREE.VertexColors
});
```
```

Now all we need to do is add colors to the geometry object's colors property while we're creating our particles.

```  ```geometry.vertices.push(new THREE.Vector3(x, y, z));
geometry.colors.push(new THREE.Color(Math.random(), Math.random(), Math.random()));
```
```

And since we're going for gratuitous effects here, let's also have it change to a random color on each frame of animation.

```  ```particle.add(new THREE.Vector3(dX, dY, dZ));
geometry.colors[index] = new THREE.Color(Math.random(), Math.random(), Math.random());
```
```

This post really only scratches the surface of what you can do with point clouds in THREE.js and there are a TON of great examples all over CodePen to learn from. To learn more, I'd suggest you search CodePen, or maybe take a look at some of the stuff on the ever-impressive THREE.js examples page.

20,807 5 54