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

Styling particles with the HTML5 canvas

Three.js offers two different ways in which you can use an HTML5 canvas to style your particles. If you use the CanvasRenderer class you can directly reference an HTML5 canvas from the ParticleCanvasMaterial object. When you use the WebGLRenderer class you need to take a couple of extra steps to use an HTML5 canvas as a style for your particle. In the following two sections we'll show you both of these approaches.

Using HTML5 canvas with the CanvasRenderer class

With the ParticleCanvasMaterial you can use the output from the HTML5 Canvas as a texture for your particles. This material is specifically created for the CanvasRenderer and only works when you use this specific renderer. Before we look at how to ...

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