在 three.js 中控制立方体或其他几何体的每个面

Question

除了自己组装几何体，还有什么方法可以控制每个面吗？我想创建类似爆炸效果的东西，但要实现此效果，我必须控制每个面以将它们移动到不同的维度。

是否可以"dissasemble"预制几何体（立方体、多面体等），还是我必须手动构建它们？

Answer 1

如果要分解几何体，需要确保每个面都有唯一的顶点，并且不与另一个面共享顶点。

THREE.ExplodeModifier 将修改 THREE.Geometry 以便面不再共享顶点。它位于示例目录中，如果要使用它，必须明确包含在您的项目中。

你像这样使用修饰符：

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

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

然后，在你的渲染循环中，你可以做这样的事情，例如：

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

您可以在 this example 中查看其使用示例。

ExplodeModifier目前不支持BufferGeometry.

three.js r.70

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