Question

我在一个场景中有两个摄像头，一个视口和一个渲染器。我在相机之间切换（使用html按钮）。

问题

问题1

对于camera1，移动鼠标没有任何响应。当我切换到camera2时，轨道控制工作正常。切换回camera1时，移动鼠标仍无响应。

jsfiddle v1 Original（没有来自camera1的回复） jsfiddle.net/steveow/xu0k1z75/

更新：问题1，由Stallion修复 - 避免将相机位置设置为（0,0,0）。

问题2

对于camera1，仍有一个问题，Pan和Dolly非常慢，至少在最初阶段。它们可能会在以后加速（在使用camera2进行摇摄和播放之后），但速度非常快。

jsfiddle：v2 camera1 Pan＆amp;多莉很慢，至少在最初阶段，可能过晚。 http://jsfiddle.net/steveow/uk94hxrp/

更新：Pan＆amp;多莉＆＃34;慢慢＆＃34;是因为相机非常接近OrbitControls.target位置（默认为（0,0,0））。因此，如果我选择一个不同的.target位置，那么＆＃34;慢度＆＃34;可以避免。

注意

每当我切换相机时，我正在创建一个新的THREE.OrbitControls对象。但是之前我曾尝试在初始化期间创建两个持久的THREE.OrbitControls对象，然后分配一个名为＆＃34;控制＆＃34;的通用变量。到任何一个应该活跃的人。我已经尝试将orbitControls设置为html div＆＃34; container＆＃34;而不是renderer.domElement。我试过在动画循环中包含controls.update（）。

前段时间我确实让它与任何一款相机配合使用，但我无法回复它。

我查看了OrbitControls代码但不是更明智的。

CODE（原问题，问题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 );
}

更新

非常感谢用户Stallion的简单修复 - 不要将摄像机世界位置设置为（0,0,0）而是使用（0,0,1）。

Answer 1

快速修复：

将camera1位置设为

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

检查小提琴http://jsfiddle.net/Stallion33/sgcfu4tt/

具有两个（切换）相机的Three.js轨道控制器

1 个答案: