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 allow 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 ...

Get Three.js Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.