Graphics Reference
In-Depth Information
Styling individual points
With the standard Three.js functionality, you can't style the individual points of a point
cloud. You can change their color, as we've shown in the
Coloring the individual points
in a point cloud
recipe, but it isn't possible to change a point's size or opacity. In this
recipe, we'll show you how to create a custom vertex and fragment shader, which al-
low you to change the color, opacity, and size of the individual points of a point cloud
and that you can also easily extend to add more properties.
Getting ready
There are no external libraries used in this recipe. We'll just extend the basic Three.js
functionality by creating our own custom shaders. To see the shaders in action, open
the
06.04-style-individual-points-in-point-system-with-custom-
shader.html
example in your browser. You will see something similar to the follow-
ing recipe:
As you can see in this screenshot, the size, color, and opacity of the individual points
differ.
How to do it…
Let's look at the steps that you need to take to accomplish this:
1. Let's start simple and first create the geometry from which we'll create the
point cloud:
