从孩子克隆轮换并将其分配给 THREE.JS 中不同父母的另一个孩子答案

【问题标题】：Clone rotation from child and assign it to another child of a different parent in THREE.JS从孩子克隆轮换并将其分配给 THREE.JS 中不同父母的另一个孩子
【发布时间】：2014-10-09 14:39:07
【问题描述】：

我有一个包含子对象的父对象

var parent1 = new THREE.Object3D();
parent1.rotation.set(1,2,3);
scene.add(parent1);

var child1= new THREE.Object3D();
child1.rotation.set(0.5,0.1,0.3);
parent.add(child1);

和另一个包含另一个孩子的父母。

var parent2= new THREE.Object3D();
scene.add(parent2);

var child2= new THREE.Object3D();
childC2.rotation.set(3,1.15,2);
parent.add(child2);

现在我想通过旋转 parent2 给 child2 与 child1 相同的旋转。

正如提到的here，我可以像这样从我原来的child1 获得世界旋转：

var quaternion = new THREE.Quaternion();
child1.matrixWorld.decompose( new THREE.Vector3(), quaternion, new THREE.Vector3() );

并将其应用到我的parent2，如下所示：

parent2.quaternion.copy( quaternion );

现在parent2 与原始child1 具有相同的旋转，但我希望它的子child2 具有与child1 相同的旋转（仅通过修改parent2）

我认为这可以通过从parent2 和child2 中获取世界旋转的差异并从child1 的世界旋转中减去它来纠正@987654345 旋转产生的偏移量@。但是我对四元数和矩阵的了解太糟糕了，无法让它发挥作用。

查看fiddle，了解我的问题。非常感谢。

更新

我尝试了 WestLangley 的方法。如果我的对象只围绕 x 轴旋转，它的工作原理是这样的 (see fiddle)

//calculate the relative rotation of child2
THREE.SceneUtils.detach( child2, parent2, scene );
var rotX=parent2.rotation.x-child2.rotation.x;
var rotY=parent2.rotation.y-child2.rotation.y;
var rotZ=parent2.rotation.z-child2.rotation.z;
THREE.SceneUtils.attach( child2, scene, parent2 );

//combine the relative rotation of child2 and the 'world' rotation of child1
THREE.SceneUtils.detach( child1, parent1, scene );
rotX+=child1.rotation.x;
rotY+=child1.rotation.y;
rotZ+=child1.rotation.z;
THREE.SceneUtils.attach( child1, scene, parent1 );
parent2.rotation.set(rotX,rotY,rotZ);//assign it to parent2

如果我的对象围绕 x、y、z 旋转，这将不再有效 (fiddle)。这是云台锁的问题吗？我需要用四元数而不是欧拉对象来计算吗？

【问题讨论】：

见stackoverflow.com/questions/23002984/…
使用 'Scene.Detach' / 'Scene.Attach' 方法我只能让它在 x 轴上旋转。这是 Three.js (68) 中的错误吗？
您不能按分量减去欧拉旋转。看看这个小提琴是否符合您的要求。 jsfiddle.net/715v2hr1。如果是这样，我会发布一个答案。小提琴有点棘手。
是的。这正是我想要的。

标签： rotation three.js rotational-matrices quaternions

【解决方案1】：

因此，您希望旋转父对象以使父对象的子对象具有特定方向，并且您希望该特定方向与不同父对象的子对象的方向匹配。呼！

这是一种方法：

// detach the children from their parents and add them to the scene
THREE.SceneUtils.detach( child2, parent2, scene );
THREE.SceneUtils.detach( child1, parent1, scene );

// here is the tricky part: add the second parent as a child of its former child
THREE.SceneUtils.attach( parent2, scene, child2 );

// copy the first child's rotation, and make sure the matrix is updated   
child2.rotation.copy( child1.rotation );
child2.updateMatrixWorld( true );

// detach the parent from the child and add it to the scene
THREE.SceneUtils.detach( parent2, child2, scene );

// put the children back where the were before   
THREE.SceneUtils.attach( child2, scene, parent2 );
THREE.SceneUtils.attach( child1, scene, parent1 );

这是一个小提琴：http://jsfiddle.net/715v2hr1/

three.js r.68

【讨论】：