Three.js Orbit Controls mit zwei (getoggten) Kameras

Question

Ich habe zwei Kameras in einer Szene und ein Bildfenster und einen Renderer. Ich wechsle (mit HTML-Tasten) zwischen den Kameras.

DIE PROBLEME

Problem 1

Für camera1 gibt es keine Antwort von der Maus zu bewegen. Wenn ich zu Kamera2 umschalte, funktioniert die Orbit-Kontrolle gut. Beim Zurückschalten zu Kamera1 gibt es immer noch keine Antwort vom Bewegen der Maus.

jsfiddle v1 Original (keine Antwort von camera1) jsfiddle.net/steveow/xu0k1z75/

UPDATE: Problem 1, Feste von Hengst - vermeiden (0,0,0) Einstellung der Kameraposition.

Problem 2

Für camera1 bleibt ein Problem, das Pan und Dolly sehr langsam ist, zumindest am Anfang. Sie können später beschleunigen (nach dem Schwenken & mit Kamera2) aber sind dann sehr schnell.

jsfiddle: v2 kamera1 Pan & Dolly ist sehr langsam, zumindest anfänglich, vielleicht zu viel später. http://jsfiddle.net/steveow/uk94hxrp/

UPDATE: Pan & Dolly "Langsamkeit" ist, weil die Kamera sehr nahe an der OrbitControls.target Position (die standardmäßig (0,0,0)). Wenn ich also eine andere Zielposition wähle, kann die "Langsamkeit" vermieden werden.

NOTES

Ich bin derzeit ein neues THREE.OrbitControls Schaffung Objekt, wenn ich Kameras wechseln. Aber zuvor habe ich versucht, während der Initialisierung zwei persistente THREE.OrbitControls-Objekte zu erzeugen und dann eine allgemeine Variable namens "controls" zuzuweisen, welche auch immer aktiv sein soll. Ich habe versucht, die orbitControls zu einem HTML-div "Container" anstatt der Renderer.DomElement. Ich habe versucht, controls.update() in der Animationsschleife einzuschließen.

Ich hatte es mit einer Kamera vor einiger Zeit arbeiten, aber ich kann nicht darauf zurückkommen.

Ich habe mir den OrbitControls-Code angeschaut, bin aber kein Klüger.

CODE (wie für das ursprüngliche Problem, Problem 1 aber seit leicht modifiziert.). Hier

ist die Kamera Auslösekode: -

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

Hier ist die Animation und Kameraumschaltung und Kamera Zurücksetzen Code: -

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

UPDATE

Vielen Dank an Benutzer Hengst für Die einfache Lösung - stellen Sie die Kamera-Weltposition nicht auf (0,0,0) ein (0,0,1).

Answer 1

Es gibt schnelle Lösung:

Satz camera1 Position

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

Kontrolle der Geige http://jsfiddle.net/Stallion33/sgcfu4tt/