简体   繁体   中英

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

I'm currently trying to tween-rotate a cube in 3D and thanks to this post ( How to rotate a object on axis world three.js? ) the rotation without tweening works without any problems. So currently I'm trying to transfer the rotation done by setFromRotationMatrix to something I can use as end rotation for my tween.

EDIT:

Here is what I have at the moment:

// 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 );
}

Thanks to WestLangley I think I'm finally close to a solution that is easy to do and will serve my purpose. When initializing the pivot object I set it to the exact same position as the dice, so the rotation will still be around the center of the dice.

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 );
    }
);

The solution I have atm (upper snippet) does not attach the dice to the pivot object as parent. I'm probably overlooking something very basic ...

EDIT END

As I thought it was a really simple thing I had to do, to get it working:

I only needed to move the detachment of the child object (the dice) to the beginning of the function, instead of having it at the end of it and it works the charm.

Here's the working code:

// 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();
    }
}

Thanks a lot for helping!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM