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

Question

我正在尝试模拟一个魔方.我想随意选择一张脸并旋转它.所以我创建了27个立方体网格并定位它们.你可以在这里看到工作(不规律)rubik的立方体 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.SceneUtils.attach()和THREE.SceneUtils.detach().

你需要从你的所有27个立方体开始作为孩子的scene.

让枢轴成为一个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