I have encountered a well-documented issue that has been extensively researched and attempted to resolve. Despite trying various solutions, I am unable to make the final step work successfully. My situation involves a 3D object with an added camera, where I am attempting to establish a first-person setup (camera order set to YXZ). However, when I try to rotate the object on the x-axis, the resulting movement is quite unusual. Surprisingly, the y rotation (left/right) functions correctly. If I initially adjust the x rotation, looking up and down works smoothly as well. Yet, once I turn left or right before attempting to look up/down, the object rotates at a peculiar angle, causing the scene to spiral. Below is a snippet 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 After reading additional questions on GitHub regarding this particular issue, I now understand the challenge associated with rotation order. A more focused version of my question would be: how can I modify the usage of lookAt() (or any alternative method) so that adjusting the x rotation does not impact the y rotation?