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

前端之家收集整理的这篇文章主要介绍了3d – Three.js:添加和删除旋转对象的子项前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试模拟一个魔方.我想随意选择一个脸并旋转它.所以我创建了27个立方体网格并定位它们.你可以看到
在这里工作(不规律)rubik的立方体
http://codepen.io/theonepa1/full/fzAli

问题是什么

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

我做了什么.

在尝试旋转面部时,我将属于面部的9个立方体分组为子节点添加到新的Object3D对象中.然后我
使用object3d.rotate.x(或y或z)沿其轴旋转object3d.

我调试了什么

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

实际发生了什么

我做的一个观察是,在object3d(父亲持有9个面的立方体)旋转之后,立方体(较小的)轴被改变.并且
面旋转后立方体的坐标不会自动更新.比如说,如果其中一个立方体在面部之前具有(0,22)坐标
旋转,即使旋转后坐标也相同.但是,立方体的轴的方向改变了.

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

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

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

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

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

解决方法

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

您需要从作为场景的孩子的所有27个立方体开始.

让pivot成为Object3D().

让active成为包含要旋转的9个多维数据集的数组.现在使多维数据集成为数据透视表的子项:

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

for ( var i in active ) {

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

}

然后,在旋转之后,将立方体作为场景的孩子放回去.

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

原文链接:https://www.f2er.com/js/158210.html

猜你在找的JavaScript相关文章