3d - Three.js:添加和删除旋转对象的子代

Question

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

有什么问题

从上面的链接中可以看到，边缘上的较小立方体以随机方式移动(至少不是我期望的那样)

我做了什么

尝试旋转面部时，我对属于该面部的9个多维数据集进行了分组，将它们作为子级添加到新的Object3D对象中。然后我
使用object3d.rotate.x(或y或z)沿其轴旋转了object3d。

我调试过的

我确保为第二次面旋转选择的多维数据集是正确的。第一轮面部旋转完成后，我更新了
虚拟位置(不是实际坐标)。因此，对于第二次面旋转，我已经验证了是否正确选择了多维数据集。

实际发生了什么

我观察到的一个观察结果是，在旋转object3d(持有一个面的9个立方体的父对象)之后，改变了立方体(较小的)的轴。并且
旋转面后，立方体的坐标不会自动更新。举例来说，假设其中一个多维数据集具有(0,0,22)作为面之前的坐标
旋转后，即使旋转后的坐标也相同。但是，立方体的轴的方向已更改。

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

在将各个多维数据集添加到第二组以进行第二次面旋转之前，我是否必须对各个多维数据集进行某种更新？

我已经阅读了一些有关applyMatrixWorld的文章，但我真的不明白它对轴的方向有什么影响
和立方体的坐标？

您能告诉我在哪里可以阅读诸如applyMatrixWorld之类的概念吗？
普通的3D编程？

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

Answer 1

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

您需要将所有27个多维数据集作为scene的子级开始。

让pivot为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