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

标签 javascript three.js

除了自己组装几何体之外,还有其他方法来控制每个面吗?我想创建类似爆炸效果的效果,但为了实现此效果,我必须控制每个面以将它们移动到不同的维度。

是否可以“分解”预制几何图形(立方体、多面体等),还是必须手动构建它们?

最佳答案

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

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

三.js r.70

关于javascript - 在 Three.js 中控制立方体或其他几何体的每个面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28970078/

相关文章:

javascript - CakePHP 3.8 根据用户选择更改表单数据

html5-canvas - 三.js不渲染

3d - 阴影质量(阴影痤疮)

javascript - three.js 定向光影

Three.js - 导入时可以检测几何图形 'islands' 吗?

javascript - 替换行的内容(在 ace.editor 中)并覆盖它

javascript - Redux 中的 Actions 和 Reducers 有什么意义?

javascript - IE 11 上的 Angular 7.2 未构建 HTTP GET 参数

javascript - 通过文本框将数据从选择选项传递到另一个页面

javascript - 我们如何在不修改场景树结构或几何形状的情况下更改 Three.js 对象的旋转原点(枢轴点)?