Rotate wheels on 2 axis in Three.JS

Question

I'm trying to rotate object on two axis y and x. But it does not work properly. Here is example

https://imge.to/i/vqyt20 local axis (no rotations)

https://imge.to/i/vqypnA what I have after moving with rotations

wheel1.rotation.x += movement;
wheel1.rotation.y = angle;

PS it works when movement == 0 or angle == 0 but fails when they both are not 0.

I've tried to use quaternions and multiply rotation vectors but nothing helps. Thanks in advance!

SOLUTION:

I've found answer on my question with vector rotation around y-axis

 angleX += movement; 

    [wheel1, wheel2].forEach(function (wheel) {
        let vector = new THREE.Vector3(1, 0, 0);
        vector.applyAxisAngle(new THREE.Vector3(0, 1, 0), angleY);

        wheel.rotation.y = angleY;
        wheel.rotation.x = 0;
        wheel.rotation.z = 0;

        wheel.rotateOnWorldAxis(vector, angleX);
    });

ONE MORE SOLUTION given in comments is to change wheel.rotation to 'YXZ' How to Rotate an Object and Reset it's Rotation to Zero?

Take a look at this [SO answer](https://stackoverflow.com/a/40395484/4045502) — prisoner849, Sep 29 '19 at 15:04
@prisoner849 I know this method, but thats quite a cheating for real physics — Oleh Patrushev, Sep 29 '19 at 15:27
@OlegPatron See https://stackoverflow.com/questions/14774633/how-to-rotate-an-object-and-reset-its-rotation-to-zero/14776900#14776900 and set `rotation.order = 'YXZ'`. — WestLangley, Sep 29 '19 at 15:49

Rotate wheels on 2 axis in Three.JS

0 Answers0