Question

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

问题是什么。

从上面的链接可以看出，边缘上较小的立方体以随机的方式移动（至少不是我预期的那样）

我做了什么。

在尝试旋转面部时，我将属于面部的9个立方体分组为新的Object3D对象。然后我使用object3d.rotate.x（或y或z）沿其轴旋转object3d。

我调试了什么

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

实际发生的事情

我做的一个观察是在对象3d（父亲持有9个面的立方体）旋转之后，立方体（较小的）轴被改变。并且面旋转后立方体的坐标不会自动更新。比如说，如果其中一个立方体在面部之前有（0,0,22）作为坐标旋转，即使旋转后坐标也相同。但是，立方体的轴方向会发生变化。

围绕轴旋转一组对象的最佳方法是什么？使用Object3D是否正确？我们是否应该将孩子从一个父母中删除，然后再将其添加到另一个组进行第二次面部轮换？

我是否要对各个立方体进行某种更新，然后再将它们添加到第二组以进行第二次面旋转？

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

你能告诉我在哪里可以阅读像applyMatrixWorld这样的概念，它是一种常见的概念吗？普通的3D编程？

这是一个非常长的问题。非常感谢您的回复：）

Answer 1

诀窍是利用THREE.SceneUtils.attach()和THREE.SceneUtils.detach()。

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

让枢轴为Object3D()。

让active成为包含要旋转的9个多维数据集的数组。现在让立方体成为枢轴的子项：

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

for ( var i in active ) {

    THREE.SceneUtils.attach( active[ i ], scene, pivot );

}

然后，在旋转之后，将多维数据集作为scene。

的子项重新放回

pivot.updateMatrixWorld();
for ( var i in active ) {

    cubes[ i ].updateMatrixWorld(); // if not done by the renderer
    THREE.SceneUtils.detach( active[ i ], pivot, scene );

}

阅读SceneUtils.js来源，以便了解正在发生的事情。

可以在/examples/js/utils/SceneUtils.js中找到这些实用程序。此文件必须添加到您的项目中。

three.js r.96

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

1 个答案: