three.js:结合tween.js围绕世界轴旋转对象

three.js: rotate object around world axis combined with tween.js

本文关键字:js 世界 对象 旋转 结合 tween three      更新时间:2023-09-26

我目前正在尝试在3D中旋转立方体,由于这篇文章(如何在axis world three.js上旋转对象。因此,目前我正在尝试将setFromRotationMatrix完成的旋转转换为可以用作青少年的末端旋转的东西。

编辑:

以下是我目前拥有的:

// function for rotation dice
function moveCube() {
    // reset parent object rotation
    pivot.rotation.set( 0, 0, 0 );
    pivot.updateMatrixWorld();
    // attach dice to pivot object
    THREE.SceneUtils.attach( dice, scene, pivot );
    // set variables for rotation direction
    var rotateZ = -1;
    var rotateX = -1;
    if (targetRotationX < 0) {
        rotateZ = 1;
    } else if (targetRotationY < 0) {
        rotateX = 1;
    }
    // check what drag direction was higher
    if (Math.abs(targetRotationX) > Math.abs(targetRotationY)) {
            // rotation
            var newPosRotate = {z: rotateZ * (Math.PI / 2)};
            new TWEEN.Tween(pivot.rotation)
                .to(newPosRotate, 2000)
                .easing(TWEEN.Easing.Sinusoidal.InOut)
                .start();
            //rotateAroundWorldAxis(dice, new THREE.Vector3(0, 0, rotateZ), Math.PI / 2);
    } else {
            // rotation
            var newPosRotate = {x: -rotateX * (Math.PI / 2)};
            new TWEEN.Tween(pivot.rotation)
                .to(newPosRotate, 2000)
                .easing(TWEEN.Easing.Sinusoidal.InOut)
                .start();
            //rotateAroundWorldAxis(dice, new THREE.Vector3(-rotateX, 0, 0), Math.PI / 2);
    }
    // detach dice from parent object
    THREE.SceneUtils.detach( dice, pivot, scene );
}

多亏了WestLangley,我想我终于接近了一个简单易行的解决方案。初始化枢轴对象时,我将其设置为与骰子完全相同的位置,因此旋转仍将围绕骰子的中心。

var loader = new THREE.JSONLoader();
loader.load(
    'models/dice.json',
    function ( geometry, materials ) {
        material = new THREE.MeshFaceMaterial( materials );
        dice = new THREE.Mesh( geometry, material );
        dice.scale.set(1.95, 1.95, 1.95);
        dice.position.set(2.88, 0.98, 0.96);
        scene.add( dice );
        pivot = new THREE.Object3D();
        pivot.rotation.set( 0, 0, 0 );
        pivot.position.set(dice.position.x, dice.position.y, dice.position.z);
        scene.add( pivot );
    }
);

我拥有的解决方案atm(上面的片段)没有将骰子作为父对象附加到pivot对象。我可能忽略了一些非常基本的东西。。。

编辑结束

因为我认为这是一件非常简单的事情,所以我必须做它才能工作:

我只需要将子对象(骰子)的分离移动到函数的开头,而不是将其放在函数的末尾,它就发挥了魅力。

这是工作代码:

// function for rotating dice
function moveCube() {
    // detach dice from parent object first or attaching child object won't work as expected
    THREE.SceneUtils.detach( dice, pivot, scene );
    // reset parent object rotation
    pivot.rotation.set( 0, 0, 0 );
    pivot.updateMatrixWorld();
    // attach dice to pivot object
    THREE.SceneUtils.attach( dice, scene, pivot );
    // set variables for rotation direction
    var rotateZ = -1;
    var rotateX = -1;
    if (targetRotationX < 0) {
        rotateZ = 1;
    } else if (targetRotationY < 0) {
        rotateX = 1;
    }
    // check what drag direction was higher
    if (Math.abs(targetRotationX) > Math.abs(targetRotationY)) {
            // rotation
            var newPosRotate = {z: rotateZ * (Math.PI / 2)};
            new TWEEN.Tween(pivot.rotation)
                .to(newPosRotate, 2000)
                .easing(TWEEN.Easing.Sinusoidal.InOut)
                .start();
    } else {
            // rotation
            var newPosRotate = {x: -rotateX * (Math.PI / 2)};
            new TWEEN.Tween(pivot.rotation)
                .to(newPosRotate, 2000)
                .easing(TWEEN.Easing.Sinusoidal.InOut)
                .start();
    }
}

非常感谢你的帮助!