rotate camera in three.js not working properly

Question

i have the following code to rotate my camera around the x-axis in a three.js scene:

var cameraOrginX = 0, cameraOrginY = 0, cameraOrginZ = 0;
var cameraEndX = 0, cameraEndY = 0, cameraEndZ = 1000;
var angle = 0;

function init(){
     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;
     //

     //CAMERA NEW POS
     camera.position.x = cameraOrginX + cameraEndX;
     camera.position.y = cameraOrginY + cameraEndY;
     camera.position.z = cameraOrginZ + cameraEndZ;
     console.log(camera.position.y + "   " + camera.position.z);
}

when i set the angle variable to 0 my camera position is at x=0, y=0, z=1000; this is what expect and is good.

but when i change the angle to 90 degrees for example my position gets changed to x=0 y= -1000 z=-999,99999; while you would expect the position to be x =0, y=-1000, z =0;

why is this happening? could someone explain to me what i am doing wrong :)

all the angles with the exception of 0 give me weird positions :(

if there is any need for more code or a jsfidle just ask me :)

Rasheduzzaman Sourov · Accepted Answer · 2016-08-24 13:22:32Z

cameraEndY = Math.cos(radians) * (cameraEndY-cameraOrginY) - Math.sin(radians) * (cameraEndZ-cameraOrginZ) + cameraOrginY;
cameraEndZ = Math.sin(radians) * (cameraEndY-cameraOrginY) + Math.cos(radians) * (cameraEndZ-cameraOrginZ) + cameraOrginZ;

You cant use cameraEndY in cameraEndZ calculation since it has been already updated. You are supposed to use old y and z coordinate in this rotation calculation, not the updated ones. Use the following instead -

var cosTheta = Math.cos(radians);
var sinTheta = Math.sin(radians);

var a = cosTheta * (cameraEndY-cameraOrginY);
var b = sinTheta * (cameraEndZ-cameraOrginZ);
var c = sinTheta * (cameraEndY-cameraOrginY);
var d = cosTheta * (cameraEndZ-cameraOrginZ);


cameraEndY = a - b + cameraOrginY;
cameraEndZ = c + d + cameraOrginZ;

Collectives™ on Stack Overflow

rotate camera in three.js not working properly

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related