2つの（トグルされた）カメラを持つThree.js軌道制御

Question

1つのシーンに1つのビューポートと1つのレンダラーが2つあります。私はカメラ間で（HTMLボタンを使って）トグルします。

THE課題

通報1

カメラ1について、マウスを動かしから応答がありません。私がカメラ2に切り替えると、軌道制御がうまく動作します。カメラ1に戻ると、まだマウスを動かすことによる応答はありません。

jsfiddle v1のオリジナル（カメラ1からの応答がない） jsfiddle.net/steveow/xu0k1z75/

UPDATE：スタリオンによる不具合の対策1、 - （0,0,0）にカメラの位置を設定しないでください。

問題2

は、カメラ1の場合は、少なくとも最初は、パンとドリーが非常に遅いという問題が残っています。後でスピードアップすることがありますが（カメラ2でパンニング&パンニングを行った後）、非常に高速です。

jsfiddle：v2 camera1 Pan & Dollyは、少なくとも最初は非常に遅いかもしれません。 http://jsfiddle.net/steveow/uk94hxrp/

UPDATE：パン&ドリー "遅" カメラ（（0,0,0）にそのデフォルト）OrbitControls.target位置に非常に近いためです。だから私が別の目標位置を選ぶと、「遅さ」を避けることができます。私はカメラを切り替えるたび私は現在、新しいTHREE.OrbitControlsを作成してい

NOTES

オブジェクト。しかし以前は、初期化中に2つの永続的なTHREE.OrbitControlsオブジェクトを作成してから、「制御」と呼ばれる一般的な変数をアクティブにすることを想定したものに割り当てることを試みました。私は、renderer.domElementではなく、html div "container"にorbitControlsを設定しようとしました。アニメーションループにcontrols.update（）を含めてみました。

もう少し前にどちらのカメラでも作業していましたが、私はそのことに戻ることはできません。

私はOrbitControlsコードを見ましたが、賢明ではありません。

コード（元の問題は問題1と同じですが、わずかに変更されています）。ここで

は、カメラの開始コードである： -

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

ここでコードをリセットするアニメーションとカメラスイッチングとカメラです： -

//---------------------------------------------------------------- 
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用のユーザースタリオンへ

多くのおかげで単純な修正 - カメラのワールド位置を（0,0,0）に（0,0,1）を代わりに使用しないでください。

Answer 1

クイックフィックスがあります： - それでも私はPANに問題があり、これはORBITすることができます:-)

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

へ

セットカメラ1の位置は、フィドルにhttp://jsfiddle.net/Stallion33/sgcfu4tt/