Graphics Reference
In-Depth Information
var x = 100;
var y = 100;
var geometry = new THREE.Geometry();
for (var i = 0 ; i < x ; i++) {
for (var j = 0 ; j < y ; j++) {
var v = new THREE.Vector3(i,0,j);
var rnd = Math.random()/2 + 0.5;
geometry.colors.push(
new THREE.Color(rnd, rnd/4, 0));
geometry.vertices.push(v);
}
}
In this code snippet, we create a random color and push it to the
geo-
metry.colors
array. At the end of these two loops, we will have 10000 ver-
tices in the
vertices
array and 10000 colors in the
colors
array.
2. Now, we can create
THREE.PointCloudMaterial
and use it together with
the geometry to create
THREE.PointCloud
:
var pcMat = new
THREE.PointCloudMaterial(geometry);
pcMat.vertexColors = true;
pcMat.map =
THREE.ImageUtils.loadTexture("../assets/
textures/ps_smoke.png");
pcMat.transparent = true;
pc = new THREE.PointCloud(geometry,
pcMat);
scene.add(pc);
To use the colors we created in step 1, we need to set the
vertexColors
property of
THREE.PointCloudMaterial
to
true
. In this code snippet,
we also load a texture and assign it to the
map
property. We use individual
colors, so there is no need to set the
color
property on the material we need
to set color on
THREE.Geometry
, which we show in the next step.
