Graphics Reference
In-Depth Information
var geometry = new THREE.Geometry();
var pSize = [];
var pOpacity = [];
var width= 100;
var height = 100;
// create the geometry and set custom
values
for (var i = 0 ; i < width ; i++) {
for (var j = 0 ; height < y ; j++) {
var v = new THREE.Vector3();
v.x = i / 10;
v.y = (Math.sin(i/200 * Math.PI*2)
+ Math.cos(j/50 * Math.PI) +
Math.sin((j+i)/40 * Math.PI))/2;
v.z = j / 10;
// add the vertex
geometry.vertices.push(v);
// add vertex specific color, size
and opacity
geometry.colors.push(new
THREE.Color(v.y,0.5,0.7));
pSize.push(Math.random());
pOpacity.push(Math.random()/4+0.5);
}
}
As you can see, we create
THREE.Geometry
from scratch and generate
10,000 vertices. As we want to change the color, size, and opacity of the in-
dividual vertices, we also generate values for these properties for each of the
10,000 vertices. The colors are stored in the
geometry.colors
array as
this is the standard Three.js functionality. We store the size in the
pSize
ar-
ray and the opacity in the
pOpacity
array.
2. Now that we've got a geometry and a couple of arrays containing the expec-
ted size and opacity for the individual vertices, let's define the material for the
point cloud:
