Three.js：添加和删除旋转对象的子项

Question

我正在尝试模拟一个魔方。我想随机选择一张脸并旋转它。所以我创建了 27 个立方体网格并将它们定位。你可以看到 在这里工作的（不规则的）魔方 http://codepen.io/theonepa1/full/fzAli

有什么问题。

正如您从上面的链接中看到的，边缘上的较小立方体以随机方式移动（至少不是我期望的方式）

我做了什么。

当尝试旋转一个面时，我将属于该面的 9 个立方体分组，并将它们作为子对象添加到一个新的 Object3D 对象中。我那时 使用 object3d.rotate.x（或 y 或 z）沿其轴旋转 object3d。

我调试的内容

我已确保我为第二个面旋转选择的立方体是正确的。第一次面部旋转完成后，我更新了他们的 虚拟位置（不是实际坐标）。所以对于第二个面旋转，我已经验证了立方体被正确拾取。

实际发生了什么

我所做的一个观察是，在 object3d（持有面的 9 个立方体的父级）旋转后，立方体（较小的）轴发生了变化。并且 面旋转后立方体的坐标不会自动更新。举例来说，如果立方体之一有 (0,0,22) 作为面部之前的坐标 旋转，即使旋转后坐标也相同。但是立方体的轴方向发生了变化。

绕轴旋转一组对象的最佳方法是什么？使用 Object3D 是否正确？ 我们是否应该在将其添加到另一个组以进行第二次面部旋转之前从一个父级中删除子级？

在将单个立方体添加到第二组以进行第二次面旋转之前，我是否必须对它们进行某种更新？

我已经阅读了一些关于 applyMatrixWorld 的帖子，但我真的无法理解它对轴方向的影响 以及立方体的坐标？

你能告诉我在哪里可以读到 applyMatrixWorld 这样的概念吗？ 普通的 3d 编程？

这是一个很长的问题。非常感谢您的回复:)

Answer 1

诀窍是利用THREE.Object3D.attach()。

您需要将所有 27 个立方体作为 scene 的子级开始。

设枢轴为Object3D()。

让active 成为一个数组，其中包含您要旋转的 9 个立方体。现在让立方体成为枢轴的孩子：

pivot.rotation.set( 0, 0, 0 );
pivot.updateMatrixWorld();

for ( var i in active ) {

    pivot.attach( active[ i ] );

}

然后，在旋转之后，将立方体放回为scene 的子代。

pivot.updateMatrixWorld();

for ( var i in active ) {

    scene.attach( active[ i ] );

}

three.js r.115