three.js pivoter la caméra dans le plan

J'ai un appareil photo 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 du code dans render fonction doit tourner 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 les FPS (first person shooter) sur le plan. Voir la photo pour comprendre ce que je veux...
Je suis d'essayer d'utiliser sin(1) et cos(1), mais ne peut pas comprendre comment rotateOnAxis œuvres, cause translate fonctions de travail comme un charme et mouvements de la caméra dans la direction de ce qu'elle voit.
P. S.
Voici une docs à la three.js peut-être que ça aide.
Pour gérer les événements de clavier j'utilise KeyboardJS
Et voici une degInRad fonction:

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

Lien sur JSFiddle

three.js pivoter la caméra dans le plan

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

Envisager, au lieu de cela, utiliser, modifier, THREE.PointerLockControls. Voir threejs.org/examples/misc_controls_pointerlock.html. Remarque dans le pointeur-lock code source de la façon dont la caméra est ajoutée comme un enfant ou petit-enfant de 2 objets pour obtenir l'effet que vous voulez.
c'est sympa le lien, merci, mais je n'ai pas besoin de déplacer la caméra avec la souris. Et camera utilise uniquement dans controls = new THREE.PointerLockControls( camera ); scene.add( controls.getObject() ); - c'est PointerLockControls objet interne ajoute à la scène, pas camera lui-même et dans onWindowResize fonction de l'application de nouvelles propriétés, et dans renderer.render( scene, camera ); - ici est d'utiliser d'origine camera variable. Sur ce child/grandchild Vous parlez? Je ne comprends vraiment pas, pouvez-Vous expliquer? Merci à l'avance.
Remarquez comment PointerLockControls fait pivoter la caméra comme vous le souhaitez, sauf qu'il utilise la souris, au lieu du clavier. Pour obtenir cet effet, il utilise le pitchObject et yawObject technique. Voir le code source. C'est ce que je voulais dire par child/grandchild. Vous n'avez pas à utiliser l' PointerLockControls; vous pouvez mettre en œuvre une logique similaire vous-même.
c'est mon échec. Je ne vois pas le code source de PointerLockControls sur la page. Maintenant, je donne un essai et si tout le bien que je donne une réponse à une question, ou Vous demander si j'ai fait une erreur.
J'ai écrit de travail exemple là. Mais je ne comprends pas pourquoi les développeurs de three.js l'utilisation de ces pitchObject.rotation.x = Math.max( - PI_2, Math.min( PI_2, pitchObject.rotation.x ) ); de la construction dans le code. Quand je décommentez cette ligne dans mon code mobile vertical œuvres mauvaises. Pouvez-vous expliquer? Merci.

OriginalL'auteur ostapische | 2013-09-16

  1. 14

    Vous pourriez obtenir ce que vous voulez tout simplement par la mise en camera.rotation.order = 'YXZ';

    +1. Oui, et il suffit d'incrémenter/décrémenter camera.rotation.xet .y directement.
    Je pense que c'est une meilleure solution, merci. Maintenant, je vois que Object3D.rotation est un Euler pas Vector3 type...

    OriginalL'auteur IceCreamYou

  2. 5

    croire ce que vous recherchez sur le plan conceptuel est une plate-forme de caméra de l'installation. Dans cette approche, il est tout d'abord créer une Object3D être le "cou", puis fixez la caméra à l'objet en question avec votre rotation désirée. Ensuite, vous pouvez appliquer les rotations de la Object3D regarder autour de vous sans l'effet de chancellement. Pour aller plus loin vous pouvez imbriquer que "cou" de l'objet dans un autre Object3D pour agir en tant que "corps" et d'appliquer les traductions de l'objet à déplacer sur la scène. De cette façon, vous avez une base de l'appareil photo contrôleur de plate-forme. J'ai modifié votre violon comme suit:

    Edit: la mise en œuvre du changement afin de mieux répondre à @ostapische cas d'utilisation. Voici le violon lien

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

    J'allais oublier le PointLockControl ou FirstPersonControl, mais je vois WestLangley a eu la gentillesse de le suggérer. De toute façon bonne chance,

    Vous avez une erreurs dans votre code, mais @WestLangley me donner une bonne idée de voir le code source de PointerLockControls. Pouvez-vous ajouter des ceci lien de votre réponse ou de modifier votre code d'état, et puis-je approuver la réponse.
    Nous y voilà, le code modifié a été mis à jour. Merci pour la considération, et grâce à @WestLangley pour le conseil.

    OriginalL'auteur Darryl_Lehmann