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

问题描述 投票:8回答:1

我正在尝试模拟一个魔方。我想随意选择一张脸并旋转它。所以我创建了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编程中的某种常见概念吗?

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

3d three.js
1个回答
13
投票

诀窍是利用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

© www.soinside.com 2019 - 2024. All rights reserved.