The Points material in three.js

The use of Vector3 class instances in three.js is a major part of the process of doing much of anything in three.js. Everything that will be placed in a Scene will contain at least a few points in space made with Vector3, typically combined with a collection of Face3 instances to help compose a geometry representing some kind of solid geometric object. However what if you just want to work with a collection of vectors, and have some kind of way of just displaying some points in space? For this there is the Points constructor that can be used with the Special Points Material that is put in place just for this purpose.

This post will mainly be about the Points Material rather than the Points constructor, but from what I have gathered thus far it looks like there might not be much to write about the Points constructor so for the moment I will cover both of theme here.

What to know before getting started

This is a post on three.js, a javaScript library that is used to work with 3d space. It is not a getting stared post on three.js, or javaScript in general. If you are new to three.js you might want to start with my getting started post on the subject. I assume that you have at least some experience making three.js demos, and are not only interested in making a certain kind of demo where you are only dealing with a collection of points. Also in this post I will not be getting into every little additional detail on every other little thing about three.js, but I do have many other posts on this subject.

Points vs Mesh Constructors

If you have made at least a few three.js demos you might be at the point where you understand that at least part of the process is to create and add a Mesh that is composed of a Geometry, and at least one material to be used when rendering that Geometry.

1
2
3
4
5
6
7
8
scene.add(
new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({
color: 0x00ff00
})
)
);

The Mesh is something that binds everything together into a single package of sorts, and it has properties and methods that are appropriate for it, as is the same with the instance of geometry, and the basic material used in the above example.

The Points constructor is like that Mesh constructor only instead of giving in a geometry composed of vertices, faces, and other properties such as vector, and face normals. I am just giving it a geometry that can just simple be a collection of vertices only, and a Material that is used just to render those points in space. So in other words the points constructor is just a more primitive kind of mesh that can also be added to a scene.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var pointsGeometry = new THREE.Geometry();
var i = 0;
while (i < 500) {
var star = new THREE.Vector3();
star.set(
THREE.Math.randFloatSpread(45),
THREE.Math.randFloatSpread(45),
THREE.Math.randFloatSpread(45));
pointsGeometry.vertices.push(star);
i += 1;
}
scene.add(
new THREE.Points(
pointsGeometry,
new THREE.PointsMaterial({
color: 0x00afaf
})
)
);