Styling particles using textures

In this section, we’ll look at the following two ways of changing what the sprite looks like:

• Use an HTML canvas to draw an image and show that for each sprite
• Load an external image file to define what each sprite looks like

Let’s start by drawing the image ourselves.

Drawing an image on the canvas

In the attributes for THREE.PointsMaterial, we mentioned the map property. With the map property, we can load a texture for the individual points. With Three.js, this texture can also be the output from an HTML5 canvas. Before we look at the code, let’s look at an example (canvastexture.js):

Figure 7.4 – Creating sprites using a canvas-based texture

Here, you can see that we’ve got a large set of Pac-Man-like ghosts on the screen. This uses the same approach that we saw in the Understanding points and sprites section earlier. This time, though, we aren’t showing...