Threejs camera rotation problems

Question

I know this a well documented problem and I have searched far and wide, trying all solutions I have found, However, I cannot get the last step to work. I have a 3D object with a camera added, and am trying to get a first person setup working (order of the camera is set to YXZ), and when I try to rotate the object in the x-axis, the resulting movement is...odd. The y rotation (i.e. looking left/right) works fine. If i change the x rotation at the beginning of the simulation, looking up and down works fine too, but as soon as I look left or right, and THEN try and look up/down, it rotates at the weirdest angle, making the scene spiral. Here's some of the code:

                camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );             

                neck = new THREE.Object3D();
                neck.rotateOnAxis(new THREE.Vector3(1, 0, 0), degInRad(90));
                neck.up = new THREE.Vector3(0, 0, 1);
                neck.position.z = 10;
                neck.position.y = -5;
                neck.add(camera);
                scene.add(neck);

                if (leftPressed) {
                        neck.rotation.y += degInRad(1);  //look left
                } else if (rightPressed) {
                    neck.rotation.y -= degInRad(1);      //look right
                }
                if (upPressed) {
                    neck.rotation.x += degInRad(1);      //look up
                } else if (downPressed) {
                    neck.rotation.x -= degInRad(1);      //look down
                }

edit I've read a few more github questions on this very problem and understand the problem with rotation with the order. I guess or more pointed version of my question is: how do I change lookAt() (or using any other method) so that change the x rotation doesn't affect the y rotation?

Yikai Gong · Accepted Answer · 2014-09-18 14:06:52Z

How about create another node (Object3D) for the neck. The idea is to use two separated coordinates for the rotation. Then you can rotate the new node at y axis and rotate the neck at x axis. Tip: Do not forget adding the neck to the new Object3d node.

.......
var neckNode = new THREE.Object3D();
neckNode.add(neck);
scene.add(neckNode);
.......
if (leftPressed) {
    neckNode.rotation.y += degInRad(1);  //look left
} else if (rightPressed) {
    neckNode.rotation.y -= degInRad(1);  //look right
}
if (upPressed) {
    neck.rotation.x += degInRad(1);      //look up
} else if (downPressed) {
    neck.rotation.x -= degInRad(1);      //look down
}

Hope it helps.

Collectives™ on Stack Overflow

Threejs camera rotation problems

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related