Styling particles using textures
- 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 (
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...