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?

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();
.......
if (leftPressed) {
} else if (rightPressed) {