Understanding particles

Like we do with most new concepts, we'll start with an example. In the sources for this chapter, you'll find an example with the name 01-particles.html. Open this example and you'll see a grid of very uninteresting-looking white cubes, as shown in the following screenshot:

What you see in this screenshot are 100 sprites. A sprite is a 2D plane that always faces the camera. If you create a sprite without any properties, they are rendered as small, white, two-dimensional squares. These sprites were created with the following lines of code:

function createSprites() {
  var material = new THREE.SpriteMaterial();
  for (var x = -5; x < 5; x++) {
    for (var y = -5; y < 5; y++) {
      var sprite = new THREE.Sprite(material);
      sprite.position.set(x * 10, y * 10, 0);
      scene.add(sprite);
    }
  }
}

In this example, we create the sprites manually using the THREE.Sprite(material) constructor. The only item we pass in is a material. This has to be either THREE...