I have been working on a code snippet to rotate my camera around the x-axis within a three.js environment:
var cameraOrginX = 0, cameraOrginY = 0, cameraOrginZ = 0;
var cameraEndX = 0, cameraEndY = 0, cameraEndZ = 1000;
var angle = 0;
function initializeCamera(){
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 0, 1000);
//ROTATE THE CAMERA
var radians = angle * Math.PI / 180.0;
cameraEndY = Math.cos(radians) * (cameraEndY-cameraOrginY) - Math.sin(radians) * (cameraEndZ-cameraOrginZ) + cameraOrginY;
cameraEndZ = Math.sin(radians) * (cameraEndY-cameraOrginY) + Math.cos(radians) * (cameraEndZ-cameraOrginZ) + cameraOrginZ;
//
//NEW CAMERA POSITION
camera.position.x = cameraOrginX + cameraEndX;
camera.position.y = cameraOrginY + cameraEndY;
camera.position.z = cameraOrginZ + cameraEndZ;
console.log(camera.position.y + " " + camera.position.z);
}
Initially, setting the angle variable to 0 results in the camera position at x=0, y=0, z=1000, which is what I expect and works correctly.
However, changing the angle to 90 degrees leads to unexpected positioning with x=0, y=-1000, z=-999.99999 instead of x=0, y=-1000, z=0 as anticipated.
I'm puzzled as to why this discrepancy occurs. Can someone shed light on what might be going wrong? Any insights or suggestions would be greatly appreciated :)
It seems that angles other than 0 are causing unusual positions. If more code or a jsfiddle example is needed, please let me know!