Graphics Reference
In-Depth Information
1. Make sure you've got a point cloud with a geometry. Look at the
Creating a
point cloud from scratch
and
Creating a point cloud based on a geometry
re-
cipes to learn how to create such a point cloud. In this recipe, we assume the
point cloud can be referenced through the
ps
variable.
2. The next step is to update the position of the individual points of the point
cloud. We do that by updating the
render
loop:
var step = 0;
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
step=0.005;
var count = 0;
var geometry = ps.geometry;
geometry.vertices.forEach(function(v){
// calculate new value for the y
value
v.y = ( Math.sin((v.x/20+step) *
Math.PI*2) + Math.cos((v.z/5+step*2) *
Math.PI) + Math.sin((v.x + v.y +
step*2)/4 * Math.PI))/2;
// and calculate new colors
geometry.colors[count++]= new
THREE.Color(v.y,0.5,0.7);
});
geometry.verticesNeedUpdate = true;
geometry.colorsNeedUpdate = true;
}
In the
render
loop, we access geometry through the
ps
variable. Next, we
change the
y
position (
v.y
) of each point based on the value of the step vari-
able. By increasing the step value in each render loop, we create the anim-
ation you can see when you look at the example for this recipe. Finally, we
need to tell Three.js that the positions of the vertices in the geometry have
changed by setting
geometry.verticesNeedUpdate
to
true
.
In this recipe, we also change the colors of each point, so to inform Three.js about
these changes, we also set
geometry.colorsNeedUpdate
to
true
.
