CODEWITHSUNDEEP
javascriptthree.js
mjanisz1
mjanisz1

Reputation: 1516

Control over each face of a cube or other geometry in three.js

Is there other method than assembling a geometry by myself to get control of each face? I want to create something like an explosion effect, but to get this I have to control each face to move them in different dimensions.

Is it possible to "dissasemble" premade geometries (cube, polyhedron etc), or do I have to construct them manually?

Upvotes: 0

Views: 979

Answers (1)

WestLangley
WestLangley

Reputation: 104783

If you want to explode a geometry, you need to make sure each face has unique vertices, and does not share vertices with another face.

THREE.ExplodeModifier will modify a THREE.Geometry so that faces no longer share vertices. It is in the examples directory, and must be explicitly included in your project if you want to use it.

You use the modifier like so:

var geometry = new THREE.BoxGeometry( 10, 10, 10 );

var explodeModifier = new THREE.ExplodeModifier();
explodeModifier.modify( geometry );

Then, in your render loop, you could do something like this, for example:

mesh.geometry.vertices[ THREE.Math.randInt( 0, 35 ) ].multiplyScalar( 1.01 );
mesh.geometry.verticesNeedUpdate = true; // important

You can see an example of its use in this example.

ExplodeModifier currently does not support BufferGeometry.

three.js r.70

Upvotes: 3

Related Questions