Three.js：在旋转对象中添加和删除子对象

Question

9

我正在尝试模拟魔方。我想随机选择一个面并旋转它。因此，我创建了27个立方体网格并将它们定位。您可以在这里看到工作（不稳定的）魔方http://codepen.io/theonepa1/full/fzAli 问题是什么？

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

我做了什么。

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

我已经调试过的内容

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

实际发生的事情

我观察到的一点是，在旋转object3d（包含面的9个立方体的父级）之后，立方体的（较小的）轴会改变。而且，在面旋转后，立方体的坐标没有自动更新。例如，如果一个立方体在面旋转之前具有（0,0,22）作为坐标，则坐标在旋转后仍然相同。但是，立方体的轴定位已更改。

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

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

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

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

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

- Pavan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WestLangley · Accepted Answer

关键在于利用THREE.Object3D.attach()方法。

首先，让你的27个立方体都是scene的子元素。

定义一个Object3D()对象作为中心点。

创建一个包含你想要旋转的9个立方体的数组active，现在将这些立方体作为子元素添加到中心点上：

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