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.