Graphics Reference
In-Depth Information
In this code snippet, we load the external model, so we have geometry on
which we can base the point cloud.
2. Before we create the point cloud, we first have to tell Three.js what we
want the point cloud to look like. For this, we create
THREE.PointCloudMaterial
:
var pcMat = new
THREE.PointCloudMaterial();
pcMat.map =
THREE.ImageUtils.loadTexture("../assets/
textures/ps_smoke.png");
pcMat.color = new THREE.Color(0x5555ff);
pcMat.transparent = true;
pcMat.size = 0.2;
pcMat.blending = THREE.AdditiveBlending;
This material defines what each point will look like. Most of the properties are
pretty self-explanatory. The interesting one here is the
blending
property.
By setting the
blending
property to
THREE.AdditiveBlending
, you get
the nice glow effect you can see in the screenshot at the beginning of this
recipe.
3. At this point, we have
THREE.Geometry
and
THREE.PointCloudMaterial
; with these two objects, we can create the
point cloud:
pc = new THREE.PointCloud(geometry,
pcMat);
pc.sizeAttenuation = true;
pc.sortPoints = true;
As you can see, we pass in
THREE.Geometry
and
THREE.PointCloudMaterial
to create
THREE.PointCloud
. On the cre-
ated point cloud, we set two additional properties to
true
. The
sizeAt-
tenuation
property makes sure that the size of a point also depends on
the distance from the camera. So, points farther away look smaller. The
