Three.js：旋转的对象的添加和删除儿童 [英] Three.js: Adding and Removing Children of Rotated Objects

问题描述

我试图模拟一个魔方。我想选择一个鬼脸随机旋转。所以，我创建了27立方网格和定位他们。你可以看到 工作（不正常）魔方的立方体在这里 HTTP：//$c$cpen.io/theonepa1/full/fzAli

I'm trying to simulate a rubik's cube. I wanted to choose a face at random and rotate it. So I've created 27 cube meshes and positioned them. You can see the working (erratically) rubik's cube here http://codepen.io/theonepa1/full/fzAli

问题是什么。

正如你可以从上面的链接看到，在边缘的小立方体以随机的方式移动（ATLEAST不是我期望它的方式）

As you can see from the above link, the smaller cubes on the edges move in a random way (atleast not the way I expect it to be)

我所做的。

当试图旋转面，我归属于脸部9立方体加他们为孩子们一个新的Object3D对象。然后我 使用object3d.rotate.x（或Y或Z）旋转沿其轴线的object3d。

When trying to rotate a face , I've grouped 9 cubes belonging to the face added them as children to a new Object3D object. I then rotated the object3d along its axis using object3d.rotate.x (or y or z).

我已经调试

我确信，我选择第二面旋转的立方体是正确的。第一面旋转完成之后，我更新其 虚拟位置（而不是实际的坐标）。因此，对于第二面旋转我验证过的立方体被正确采摘。

I've made sure that the cubes I'm selecting for the second face rotation are correct. After the first face rotation is completed, I update their virtual positions (not actual coordinates). So for the second face rotation I've verified that the cubes are picked correctly.

究竟发生了

一次观测我提出的是，皂（小的）轴object3d（父持面的立方体9）旋转之后被改变。并且 立方体坐标没有得到自动脸部旋转后更新。说，例如，如果立方体中的一个具有（0,0,22），为前脸座标 旋转，坐标即使在旋转后是相同的。然而立方体的轴的方向被改变。

One observation I made was that cubes' (smaller ones) axes are altered after the object3d (parent holding the 9 cubes of a face) is rotated. And also the cubes' coordinates are not getting auto updated after the face rotation. Say for example if one of the cube has (0,0,22) as coordinates before the face rotation, the coordinates are same even after the rotation. However the orientation of axes of the cube is changed.

什么是旋转一组围绕一个轴对象的最佳方式？使用Object3D正确吗？ 我们是否应该将它添加到另一个组的第二张脸旋转前去除从一位家长的孩子？

What is the best way to rotate a group of objects around a axis ? Is using Object3D correct ? Are we supposed to remove the children from one parent before adding it to another group for the second face rotation ?

难道我已经将其添加到第二组第二面旋转前做一些对个人立方体更新？

Do I've to do some kind of update on the individual cubes before adding them to second group for the second face rotation ?

我读过有关applyMatrixWorld一些帖子，但我真的无法理解它的作用是在轴的方向 和多维数据集的坐标？

I've read some posts about applyMatrixWorld , but I really could not understand what its effect was on the orientation of the axes and the coordinates of the cube ?

您可以让我知道我在哪里可以读到类似applyMatrixWorld的概念，它是某种在一个共同的概念 正常的3D节目？

Can you let me know where can I read about the concepts like applyMatrixWorld , is it some kind of common concept in a normal 3d programming ?

那是一个很长的问题。真的AP preciate您的回复：）

Thats a really long question. Would really appreciate your reply :)

推荐答案

诀窍是利用 THREE.SceneUtils.attach的（）和 THREE.SceneUtils.detach（）。

您需要开始与所有的27个方块作为场景的孩子。

You need to begin with all your 27 cubes as a child of the scene.

让支点是 Object3D（）。

让主动是包含要旋转9多维数据集的数组。现在让立方体枢轴的孩子：

Let active be an array containing the 9 cubes you want to rotate. Now make the cubes a child of the pivot:

pivot.rotation.set( 0, 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 源，以便您了解正在发生的事情。

Read the SceneUtils.js source so you understand what is happening.

three.js r.63

three.js r.63

这篇关于Three.js：旋转的对象的添加和删除儿童的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！