Points and Sprites

In previous chapters, we discussed the most important concepts, objects, and APIs that Three.js has to offer. In this chapter, we'll look into the only concept we've skipped until now: points and sprites. With THREE.Points (sometimes also called sprites), it is very easy to create many small objects that you can use to simulate rain, snow, smoke, and other interesting effects. For instance, you can render individual geometries as a set of points and control these points separately. In this chapter, we'll explore the various point- and sprite-related features provided by Three.js. To be more specific, we'll look at the following subjects in this chapter:

• Creating and styling particles using THREE.SpriteMaterial
• Using THREE.Points to create a grouped set of points
• Creating a THREE.Points object from existing geometries
• Animating...

Understanding points

As 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-sprites.html. Open this example and you'll see a grid of very uninteresting-looking colored cubes, as shown in the following screenshot:

58 FPS (53-60)

We've also enabled the mouse controls for this example, so you can use the mouse or your trackpad to navigate around this scene. One thing you'll notice is that no matter how you look at the squares, they will always look the same. For instance, the following screenshot shows a view of the same scene from a different position:

56 FPS (49-60)

What you see in this screenshot are a number of 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...

THREE.Points and THREE.PointsMaterial

At the end of the previous section Understanding points, we briefly introduced THREE.Points. The constructor of THREE.Points takes two properties: a geometry and a material. The material is used to color and texture the particles (as we'll see later on), and the geometry defines where the individual particles are positioned. Each vertex and each point used to define the geometry is shown as an element on screen. When we create a THREE.Point object based on THREE.BoxGeometry, we get eight particles, one for each corner of the cube. Normally, though, you won't create a THREE.Points object from one of the standard Three.js geometries, but add the vertices manually to a geometry created from scratch (or use an externally loaded model) just as we did at the end of the previous section...

Working with sprite maps

At the beginning of this chapter, we used a THREE.Sprite object to render single particles with the THREE.CanvasRenderer and the THREE.WebGLRenderer. These sprites were positioned somewhere in the 3D world, and their size was based on the distance from the camera (this is also sometimes called billboarding). In this section, we'll show an alternative use of the THREE.Sprite object. We'll show you how you can use THREE.Sprite to create a layer similar to a head-up display (HUD) for your 3D content using an extra THREE.OrthographicCamera instance. We will also show you how to select the image for a THREE.Sprite object using a sprite map.

As an example, we're going to create a simple THREE.Sprite object that moves from left to right over the screen. In the...

Creating THREE.Points from an advanced geometry

If you remember, THREE.Points renders each particle based on the vertices from the geometry supplied. This means that if we provide a complex geometry (for example, a torus knot or a tube), we can create THREE.Points based on the vertices from that specific geometry. In the final section of this chapter, we'll create a torus knot, like the one we saw in Chapter 6, Advanced Geometries and Binary Operations, and render it as THREE.Points.

We've already explained the torus knot in the previous chapter, so we won't go into much detail here. We're using the exact code from Chapter 6, Advanced Geometries and Binary Operations, and we've added a single menu option that you can use to transform the rendered mesh into THREE.Points. You can find the example (11-create...

Summary

That's a wrap for this chapter. We've explained what sprites and points are and how you can style these objects with the materials available. In this chapter, you saw how you can use THREE.Sprite directly with THREE.CanvasRenderer and THREE.WebGLRenderer. If you want to create a large number of particles, however, you should use a THREE.Points object. With THREE.Points, all the elements share the same material, and the only property you can change for an individual particle is their color by setting the vertexColors property of the material to true and providing a color value in the colors array of THREE.Geometry used to create THREE.Points. We also showed how you can easily animate particles by changing their position. This works the same for an individual THREE.Sprite ...