javascript - 将旋转从父级 Object3D 传输到子级 - 三个 js

Question

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

我的方法可能是完全错误的，但它似乎对第一乐章有效，但在那之后就崩溃了。我认为这可能与欧拉订单有关。

我使用的代码是:

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/

Answer 1

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

child.applyMatrix( parent.matrixWorld );

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

function mouseUp() {

    window.removeEventListener('mousemove', mouseMove);

    cube.applyMatrix( object.matrixWorld );

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

}

fiddle :http://jsfiddle.net/BJaju/5/

三.js r.59