Graphics Reference
In-Depth Information
function explode(outwards) {
var dir = outwards === true ? 1 : -1;
var count = 0;
cube.vertices.forEach(function(v){
v.x+=(avgVertexNormals[count].x *
v.velocity * control.scale)*dir;
v.y+=(avgVertexNormals[count].y *
v.velocity * control.scale)*dir;
v.z+=(avgVertexNormals[count].z *
v.velocity * control.scale)*dir;
count++;
});
cube.verticesNeedUpdate = true;
}
The
control.scale
variable is set through GUI and determines the speed
at which our geometry expands, and the
dir
property is based on whether
we want to move the points outwards or inwards. The
verticesNeedUp-
date
property is required to inform Three.js about these changes.
5. Now all that is left to do is call the explode function from the
render
loop:
function render() {
renderer.render(scene, camera);
explode(true); // or explode(false)
requestAnimationFrame(render);
}
There's more
In this example, we've used a standard geometry; you can, of course, also use an
externally loaded model.