Three.js Faire pivoter la caméra dans le plan

Question

J'ai une caméra dans mon application:

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); 

Ceux code render fonction doit faire pivoter la caméra pendant que je suis en appuyant sur les touches:

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)); 
} 

Caméra tourne, mais pas de la manière dont j'ai besoin. Je veux que la caméra tourne comme dans FPS (First Person Shooter) dans l'avion. Voir l'image pour comprendre ce que je veux ...
Je suis d'essayer d'utiliser sin(1) et cos(1), mais je ne comprends pas comment fonctionne rotateOnAxis, car translate fonctions fonctionnent comme un charme et déplace la caméra dans la direction de ce qu'elle voit.
P.S.
Voici un docs au three.js peut-être que cela aide.
Pour gérer les événements clavier que j'utilise KeyboardJS
Et voici une fonction degInRad:

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

Lien sur JSFiddle

O - position de la caméra
O-O1 - direction actuelle de la caméra
R1 - direction de rotation actuelle
R - direction ce que je veux
Désolé pour bonne photo.

Answer 1

Vous pouvez obtenir ce que vous voulez simplement en mettant camera.rotation.order = 'YXZ';

Answer 2

croyez ce que vous cherchez conceptuellement est une installation de caméra de forage. Dans cette approche, vous construisez d'abord un Object3D pour être le "cou", puis attachez la caméra à cet objet avec la rotation désirée. Ensuite, vous pouvez appliquer les rotations au Object3D pour regarder autour sans l'effet d'oscillation. Pour le porter plus loin, vous pouvez imbriquer cet objet "cou" dans un autre Object3D pour agir comme le "corps" et appliquer les traductions à cet objet pour se déplacer sur la scène. De cette façon, vous avez une base de contrôleur de caméra. J'ai modifié votre violon comme suit:

Éditer: changement de mise en œuvre pour mieux adapter le cas d'utilisation @ostapische. Voici le violon link

function degInRad(deg) { 
    return deg * Math.PI/180; 
} 
///////////////////////////////// 
function render() { 
    requestAnimationFrame(render); 
    if (leftPressed) { 
     neck.rotation.y += degInRad(1); 
    } else if (rightPressed) { 
     neck.rotation.y -= degInRad(1); 
    } 
    if (upPressed) { 
     camera.rotation.x += degInRad(1); 
    } else if (downPressed) { 
     camera.rotation.x -= degInRad(1); 
    } 
    renderer.render(scene, camera); 
} 
///////////////////////////////// 
var scene, camera, renderer, grass, neck; 
var leftPressed = false; 
var rightPressed = false; 
var upPressed = false; 
var downPressed = false; 
///////////////////////////////// 
window.onload = function() { 
    scene = new THREE.Scene(); 
    camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
    cameraHolder = new THREE.Object3D(); 
    cameraHolder.add(camera); 
    renderer = new THREE.WebGLRenderer(); 
    renderer.rendererSize = {width: window.innerWidth, height: window.innerHeight, quality: 100, maxQuality: 400, minQuality: 20}; 
    renderer.setSize(renderer.rendererSize.width, renderer.rendererSize.height); 
    document.body.appendChild(renderer.domElement); 

    var texture, material, geometry, element; 

    material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); 
    material.side = THREE.DoubleSide; 
    geometry = new THREE.PlaneGeometry(24, 24); 
    grass = new THREE.Mesh(geometry, material); 
    grass.name = "grass"; 
    scene.add(grass); 

    neck = new THREE.Object3D(); 
    neck.rotateOnAxis(new THREE.Vector3(1, 0, 0), degInRad(90)); 
    neck.up = new THREE.Vector3(0, 0, 1); 
    neck.position.z = 1; 
    neck.position.y = -5; 


    neck.add(camera); 
    scene.add(neck);  

    KeyboardJS.on('left', function() { leftPressed = true; }, function() { leftPressed = false; }); 
    KeyboardJS.on('right', function() { rightPressed = true; }, function() { rightPressed = false; }); 
    KeyboardJS.on('up', function() { upPressed = true; }, function() { upPressed = false; }); 
    KeyboardJS.on('down', function() { downPressed = true; }, function() { downPressed = false; }); 

    render(); 
} 

je vais parler de la PointLockControl ou FirstPersonControl, mais je vois WestLangley a été si gentil à suggérer. Quoi qu'il en soit bonne chance,