To create an explosion effect on a geometry, ensure that each face has its own distinct vertices and does not share vertices with other faces.
The THREE.ExplodeModifier
function can be used to modify a THREE.Geometry
in such a way that faces do not share vertices anymore. This function is located in the examples directory and needs to be explicitly added to your project for implementation.
You can apply the modifier like this:
var geometry = new THREE.BoxGeometry( 10, 10, 10 );
var explodeModifier = new THREE.ExplodeModifier();
explodeModifier.modify( geometry );
After that, within your rendering loop, you might want to incorporate something similar to the following:
mesh.geometry.vertices[ THREE.Math.randInt( 0, 35 ) ].multiplyScalar( 1.01 );
mesh.geometry.verticesNeedUpdate = true; // make sure to include this line
An illustration of how to use it can be found in this demo.
Please note that ExplodeModifier
does not currently support BufferGeometry
.
This information pertains to three.js r.70