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
O
- position of camera
O-O1
- current camera direction
R1
- current rotation direction
R
- direction what I want
Sorry for good picture.
You might get what you want simply by setting camera.rotation.order = 'YXZ';