Three.js:添加和删除旋转对象的子对象 [英] Three.js: Adding and Removing Children of Rotated Objects
问题描述
我正在尝试模拟魔方.我想随机选择一张脸并旋转它.所以我创建了 27 个立方体网格并定位它们.你可以看到在这里工作的(不规则的)魔方http://codepen.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
这是什么问题.
正如您从上面的链接中看到的，边缘上较小的立方体以随机方式移动(至少不是我期望的方式)
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 个面的 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 ?
这是一个很长的问题.非常感谢您的回复:)
Thats a really long question. Would really appreciate your reply :)
推荐答案
诀窍是利用THREE.Object3D.attach().
您需要将所有 27 个立方体作为 scene 的子项开始.
You need to begin with all your 27 cubes as a child of the scene.
让枢轴成为一个 Object3D().
让 active 成为一个包含要旋转的 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 ) {
pivot.attach( active[ i ] );
}
然后，在旋转后，将立方体放回 scene 的子元素.
Then, after the rotation, put the cubes back as children of the scene.
pivot.updateMatrixWorld();
for ( var i in active ) {
scene.attach( active[ i ] );
}
three.js r.115
three.js r.115
这篇关于Three.js:添加和删除旋转对象的子对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
