Learn Three.js - Third Edition

Using HTML5 canvas with WebGLRenderer

If we want to use an HTML5 canvas with a THREE.WebGLRenderer, we can take two different approaches. We can use the THREE.PointsMaterial and create a THREE.Points object, or we can use a THREE.Sprite and the map property of THREE.SpriteMaterial.

Let's start with the first approach and create a THREE.Points object. 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. An example showing this concept is 05-program-based-points-webgl.html. The following screenshot shows this example:

Let's look at the code we wrote to get this effect. Most of ...