three.js rotate camera in plane

ostapische picture ostapische · Sep 16, 2013 · Viewed 23.4k times · Source

I have a camera in my app:

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 1;
camera.position.y = -5;
camera.rotateOnAxis(new THREE.Vector3(1, 0, 0), degInRad(90));
camera.up = new THREE.Vector3(0, 0, 1);  

Those code in render function must rotate the camera while I'm pressing the keys:

if (leftPressed) {
    camera.rotateOnAxis((new THREE.Vector3(0, 1, 0)).normalize(), degInRad(1));
} else if (rightPressed) {
    camera.rotateOnAxis((new THREE.Vector3(0, 1, 0)).normalize(), degInRad(-1));
}
if (upPressed) {
    camera.rotateOnAxis((new THREE.Vector3(1, 0, 0)).normalize(), degInRad(1));
} else if (downPressed) {
    camera.rotateOnAxis((new THREE.Vector3(1, 0, 0)).normalize(), degInRad(-1));
}  

Camera rotates, but not in way I need. I want that camera rotates like in FPS (first person shooter) on plane. See picture to understand what I want...
I'm try to use sin(1) and cos(1) but can't understand how rotateOnAxis works, cause translate functions work like a charm and moves camera in direction in what she sees.
P.S.
Here is a docs to the three.js maybe it helps.
To handle keyboard events I use KeyboardJS
And here is a degInRad function:

function degInRad(deg) {
    return deg * Math.PI / 180;
}  

Link on JSFiddle

camera rotation

O - position of camera
O-O1 - current camera direction
R1 - current rotation direction
R - direction what I want
Sorry for good picture.

Answer

IceCreamYou picture IceCreamYou · Sep 17, 2013

You might get what you want simply by setting camera.rotation.order = 'YXZ';