Commandes Orbit Three.js avec deux caméras (Toggled)

Question

J'ai deux caméras dans une scène et une fenêtre et un moteur de rendu. Je bascule (en utilisant les boutons html) entre les caméras.

LES PROBLÈMES

Problème 1

Pour camera1 il n'y a pas de réponse du déplacement de la souris. Lorsque je bascule sur camera2, le contrôle de l'orbite fonctionne correctement. En revenant à la caméra1, il n'y a toujours pas de réponse en déplaçant la souris.

jsFiddle v1 original (pas de réponse de camera1) jsfiddle.net/steveow/xu0k1z75/

MISE À JOUR: Problème 1, fixe par étalon - évitez de régler la position de la caméra (0,0,0).

Problème 2

Pour camera1 il reste un problème que Pan et Dolly sont très lents, au moins au début. Ils peuvent accélérer plus tard (après avoir pané & avec camera2) mais sont alors très rapides. Jsfiddle: v2 camera1 Pan & Dolly est très lent, au moins au début, peut-être excessif plus tard. http://jsfiddle.net/steveow/uk94hxrp/

MISE À JOUR: Pan & Dolly "lenteur" est parce que l'appareil photo est très proche de la position OrbitControls.target (qui par défaut (0,0,0)). Donc, si je choisis une autre position .target, la "lenteur" peut être évitée.

NOTES

Je crée actuellement un nouvel objet THREE.OrbitControls chaque fois que je passe des caméras. Mais auparavant, j'ai essayé de créer deux objets THREE.OrbitControls persistants pendant l'initialisation, puis d'assigner une variable générale appelée "controls" à celle qui est censée être active. J'ai essayé de placer le orbitControls à un "conteneur" div html plutôt que le renderer.domElement. J'ai essayé d'inclure controls.update() dans la boucle d'animation.

Je l'ai fait fonctionner avec l'un ou l'autre appareil photo il y a quelque temps mais je ne peux pas y revenir. J'ai regardé le code d'OrbitControls mais je n'en ai pas la moindre idée. CODE (comme pour le problème original, problème 1 mais depuis légèrement modifié.).

Voici le code d'initiation de la caméra: -

//... camera1 

    camera1Fov = 75; 
    camera1Far = 1200; 
    camera1 = new THREE.PerspectiveCamera(camera1Fov, window.innerWidth/window.innerHeight, 1, camera1Far); 
    //camera1.position.z = camera1Far; 
    camera1.position.set(0,0,0); 


    scene.add(camera1); 
    camera1.name = "Camera_1"; 

    var sGeo  = new THREE.SphereGeometry(40,8,8); 
    var sMaterial = new THREE.MeshPhongMaterial({ color: 0xff00ff }); 
    Cam1Target  = new THREE.Mesh(sGeo, sMaterial); 
    Cam1Target.position.set(0,0,-200); 
    scene.add(Cam1Target); 

    controls1 = new THREE.OrbitControls(camera1, renderer.domElement); 
    controls = controls1;//... initially. 
    camera1.lookAt(Cam1Target); 
    RenderCamera = camera1; 

    camera1_Helper = new THREE.CameraHelper(camera1); 
    camera1_Helper.update(); 
    scene.add (camera1_Helper); 

// camera2 
    camera2 = new THREE.PerspectiveCamera(cameraFOV, window.innerWidth/window.innerHeight, 1, 20000); 
    c2PosX = 5500; 
    c2PosY = 3500; 
    c2PosZ = -10000; 

    camera2.position.set(c2PosX, c2PosY, c2PosZ); 
    scene.add(camera2); 
    camera2.name = "Camera_2";  
    //controls2 = new THREE.OrbitControls(camera2, renderer.domElement); 
    //camera2.lookAt(camera1); 

Voici l'animation et la commutation de la caméra et la caméra de code réinitialisation: -

//---------------------------------------------------------------- 
function F_frame() 
{ 
    //... Render 
    af = requestAnimationFrame(F_frame); 

    controls.update(); 

    renderer.render(scene, RenderCamera); 


    tick+=0.001; 

}//... EOF Frame(). 

//------------------------------------------------------------- 
function F_Switch_Camera() 
{ 
    var SelectedCameraString = document.getElementById('myTextField').value; 
    //...toggle 
    if (SelectedCameraString == "camera1") 
    { 
     SelectedCameraString = "camera2"; 
     RenderCamera = camera2; 
     controls = new THREE.OrbitControls(camera2, container);//renderer.domElement); 
     //controls.object = camera2; 
     //controls.update(); 
     //controls = controls2; 
    } else { 
     SelectedCameraString = "camera1"; 
     RenderCamera = camera1; 
     controls = new THREE.OrbitControls(camera1, container);//renderer.domElement); 
     //controls.object = camera1; 
     //controls.update(); 
     //controls = controls1;  
    } 
    document.getElementById('myTextField').value = SelectedCameraString; 
}  
//---------------------------------------------------------------------- 
function F_Reset_Camera1() 
{ 
    camera1.position.set(0,0,0); 
    camera1.lookAt (Cam1Target); 
} 
//---------------------------------------------------------------------- 
function F_Reset_Camera2() 
{ 
    camera2.position.set(c2PosX, c2PosY, c2PosZ); 
    camera2.lookAt (camera1); 
} 

MISE À JOUR

Un grand merci à l'étalon utilisateur pour le correctif simple - ne définissez pas la position du monde de la caméra sur (0,0,0) utilisez (0,0,1) à la place.

Answer 1

Il y a solution rapide:

set position camera1 à

camera1.position.set(0,0,1);

vérifier le violon http://jsfiddle.net/Stallion33/sgcfu4tt/