将旋转从父 Object3D 转移到子 - 三个 js答案

【问题标题】：Transferring rotation from parent Object3D to child - three js将旋转从父 Object3D 转移到子 - 三个 js
【发布时间】：2014-02-07 13:56:25
【问题描述】：

我有一个 Mesh 嵌套在 Object3D 中。我想做的是在拖动过程中在 x 和 y 轴上旋转 Object3D，然后在释放时将 Object3D 旋转重置为 0、0、0，然后将其旋转转移到内部的 Mesh .

我的方法可能完全错误，但它似乎适用于第一个乐章，但之后就中断了。我认为这可能与 Euler 顺序有关。

我使用的代码是：

function mouseDown(e) {
    hold.x = e.pageX;
    hold.y = e.pageY;
    window.addEventListener('mousemove', mouseMove);
}

function mouseMove(e) {
    var diffX = e.pageX - hold.x;
    var diffY = e.pageY - hold.y;

    object.rotation.x = (diffY * 0.25) * RADIAN;
    object.rotation.y = (diffX * 0.25) * RADIAN;
}

function mouseUp() {
    window.removeEventListener('mousemove', mouseMove);

    cube.rotation.x += object.rotation.x;
    cube.rotation.y += object.rotation.y;

    object.rotation.x = 0;
    object.rotation.y = 0;
}

我还做了一个 jsfiddle 来演示确切的问题：http://jsfiddle.net/BJaju/4/

【问题讨论】：

标签： javascript 3d three.js

【解决方案1】：

要将父级的世界变换传递给子级，您需要调用

child.applyMatrix( parent.matrixWorld );

所以在你的情况下，它会是

function mouseUp() {

    window.removeEventListener('mousemove', mouseMove);

    cube.applyMatrix( object.matrixWorld );

    object.rotation.x = 0;
    object.rotation.y = 0;

}

小提琴：http://jsfiddle.net/BJaju/5/

three.js r.59

【讨论】：

请注意，此解决方案不再可行，因为 matrix4.rotate 已被删除

【解决方案2】：

我能够使用四元数找到解决方案！

我有两个单独的转换，如下所示：baseQuaternion = (new THREE.Quaternion).setFromEuler(new THREE.Euler(-Math.PI / 2, 0, -Math.PI / 2 , 'XYZ'))

当相乘时，它们会合并和组合效果。 myMesh.quaternion = baseQuaternion.clone().multiply((new THREE.Quaternion).setFromEuler(...

此视频有帮助：https://www.udacity.com/course/viewer#!/c-cs291/l-124106599/m-175393413

【讨论】：