My goal in Three.js is to create an orbiting camera that can be rotated around the x and y axes. I have implemented two functions to achieve this:
function rotateX(rot) {
var x = camera.position.x,
y = camera.position.y,
z = camera.position.z;
camera.position.x = x * Math.cos(rot) + z * Math.sin(rot);
camera.position.z = z * Math.cos(rot) - x * Math.sin(rot);
camera.lookAt(scene.position);
}
function rotateY(rot) {
var x = camera.position.x,
y = camera.position.y,
z = camera.position.z;
camera.position.z = z * Math.cos(rot) + y * Math.sin(rot);
camera.position.y = y * Math.cos(rot) - z * Math.sin(rot);
camera.lookAt(scene.position);
}
Currently, the x rotation works as intended, but the y rotation encounters issues. When the camera's z position becomes negative beyond a certain point, the lookAt method rotates the camera by PI on the Z axis, causing an unexpected flip of the model. While I could address this specific issue by adjusting the camera's rotation for negative z values, it leads to malfunction when combining x and y rotations simultaneously.
How should I approach resolving this dilemma?