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);
scene.add(pointCloud);

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;

    particle.add(new THREE.Vector3(dX, dY, dZ));
  });
  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.


19,703 5 54