O'Reilly logo

Learning Three.js: The JavaScript 3D Library for WebGL by Jos Dirksen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using textures to style particles

In the previous example we saw how you could style a particle system using an HTML5 canvas. Since you can draw anything you want, even load external images, you can use this approach to add all kinds of styles to the particle system. There is, however, also a more direct way to use an image to style your particles. Three.js allows you to load external images with the THREE.ImageUtils.loadTexture() function.

In this section we'll show you two examples, and explain how to create them. Both these examples use an image as a texture for your particles. In the first example we create an example that simulates rain 06-rainy-scene.html as shown in the following screenshot:

The first thing we need to do is get a texture ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required