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

帕万

我正在尝试模拟魔方。我想随机选择一张脸并旋转它。因此,我创建了27个立方体网格并将其定位。您可以在这里http://codepen.io/theonepa1/full/fzAli看到正常工作的魔方

有什么问题

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

我做了什么

尝试旋转面部时,我对属于该面部的9个多维数据集进行了分组,将它们作为子级添加到新的Object3D对象中。然后,我使用object3d.rotate.x(或y或z)沿其轴旋转了object3d。

我调试过的

我确保为第二次面旋转选择的多维数据集是正确的。第一次面部旋转完成后,我将更新其虚拟位置(而不是实际坐标)。因此,对于第二次面旋转,我已经验证了正确选择了多维数据集。

实际发生了什么

我观察到的一个观察结果是,在旋转object3d(持有一个面的9个立方体的父对象)之后,改变了立方体(较小的)的轴。而且,在旋转面之后,多维数据集的坐标也不会自动更新。例如,如果多维数据集之一在面旋转之前具有(0,0,22)作为坐标,则即使在旋转之后坐标也相同。但是,立方体轴的方向已更改。

绕轴旋转一组对象的最佳方法是什么?使用Object3D是否正确?我们是否应该在将其添加到另一组以进行第二张面孔旋转之前从一个父母中删除孩子?

在将各个多维数据集添加到第二组以进行第二次面旋转之前,我是否必须对单个多维数据集进行某种更新?

我已经阅读了一些有关applyMatrixWorld的文章,但是我真的不明白它对坐标轴和立方体坐标的影响是什么?

您能告诉我在哪里可以阅读诸如applyMatrixWorld之类的概念,这是普通3D编程中的某种常见概念吗?

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

西兰吉

诀窍是利用THREE.Object3D.attach()

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

让pivot成为一个Object3D()

active是包含要旋转的立方体9数组。现在,使多维数据集成为枢轴的子级:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Three.js:使用THREE.SceneUtils.attach / detach函数添加和删除子对象的正确方法

来自分类Dev

使用Three.js,WebGL显示对象的顶点并旋转对象

来自分类Dev

three.js通过鼠标向下旋转对象并移动

来自分类Dev

three.js旋转面向对象

来自分类Dev

围绕对象轴THREE.js旋转对象

来自分类Dev

three.js通过轴方向旋转对象

来自分类Dev

Three.js合并对象和纹理

来自分类Dev

在Three.js的中心旋转mergeometry对象

来自分类Dev

Three.js将对象添加到组中,但保持原样的全局位置/旋转/比例

来自分类Dev

Three.js对象居中

来自分类Dev

删除和创建对象后,Three.js变得非常慢

来自分类Dev

Three.js旋转和定位几何

来自分类Dev

Three.JS通过移动设备围绕对象旋转相机

来自分类Dev

Three.js OrbitControls平移和场景旋转

来自分类Dev

使用Three.js,WebGL显示对象的顶点并旋转对象

来自分类Dev

Three.js:如何在运行时添加和删除灯光?

来自分类Dev

Three.js通过圆路径旋转对象

来自分类Dev

当对象旋转时Three.js旋转相机

来自分类Dev

Three.JS对象遵循样条路径-旋转/切线问题和恒速问题

来自分类Dev

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

来自分类Dev

从Three.js多维数据集中删除旋转动画

来自分类Dev

Three.js-设置对象从X轴,Y轴和Z轴的标准化方向旋转

来自分类Dev

Three.js旋转

来自分类Dev

Three.js-围绕特定轴旋转对象

来自分类Dev

如何在Three.js中使用鼠标旋转对象?

来自分类Dev

如何使用THREE.InstancedBufferGeometry动态添加和删除对象?

来自分类Dev

Three.js-相机旋转和TransformControls

来自分类Dev

Three.js 对象返回错误的位置/旋转/缩放值

来自分类Dev

在three.js中旋转对象

Related 相关文章

热门标签

归档