Three.js：在相机和控件之间切换

Question

我有一个 Three.js v72dev 场景，由通过 THREE.ObjectLoader 导入的对象组成。这很好用。

我现在正在从我的 CAD 包中导入转换为 Three.js 相机的相机。当我使用 OrbitControls 移动相机时，我开始遇到问题。使用一台摄像机时，人们不会注意到差异，但使用多台摄像机时，您会开始看到移动摄像机会影响其他摄像机。你可以在这里看到这个效果： http://datable.net/WebGL/Iris0.3.0_Demo/

场景加载后，您可以打开视图在不同的相机之间切换。四处移动一台摄像机，切换到另一台摄像机，四处移动，切换回来，等等。你会看到摄像机相互影响。

我想问题是我在更换相机时设置主相机变量的方式:

camera = someOtherCameraStoredInArrayOrObject;

我确实有一个工作示例，但我想知道是否有更简洁的方法来处理它。这是一个有效的示例：http://datable.net/WebGL/Cameras/

我在这里采用了不同的方法，当我切换相机时，我会这样做：

camera = new THREE.PerspectiveCamera(camera1.fov, window.innerWidth/window.innerHeight, camera1.near, camera1.far  );
camera.position.copy(camera1.position);
camera.rotation.copy(camera1.rotation);
controls = new THREE.OrbitControls(camera);

问题是每次我通过 OrbitControls 更改视图时，我都需要像这样更新存储的摄像机：

function camUpdate(otherCam){
        otherCam.position.copy(camera.position);
        otherCam.rotation.copy(camera.rotation);
}

我觉得有点麻烦。还有其他优雅的解决方案来处理各种相机之间的切换控制和视图吗？

Answer 1

在尝试了几种不同的方法之后，我发现某些方法似乎适用于所有情况。在这种方法中，我保留了一个主摄像头和一组控件（此应用程序只有一个 'viewport'）。我要切换的摄像机是用 THREE.ObjectLoader 导入的。每个都有一个唯一的 ID，我将其保存在 currentCamera 变量中。我有一个 returns 所需相机的事件。此事件触发以下函数：

function onViewChange(event) {

//save current camera params
    var cam = scene.getObjectByName( currentCamera );
    cam.position.copy(camera.position);
    cam.rotation.copy(camera.rotation);
    cam.userData[0].tX = controls.target.x;
    cam.userData[0].tY = controls.target.y;
    cam.userData[0].tZ = controls.target.z;

//set next camera positions
    var cam = scene.getObjectByName( event.detail.view );

    currentCamera = event.detail.view;

    camera = new THREE.PerspectiveCamera(cam.fov, window.innerWidth / window.innerHeight, cam.near, cam.far);
    camera.position.copy(cam.position);
    camera.rotation.copy(cam.rotation);

    controls = new THREE.OrbitControls(camera);
    controls.target = new THREE.Vector3( cam.userData[0].tX, cam.userData[0].tY, cam.userData[0].tZ );

}

我想我可以清理存储控制目标数据的方式，但就目前而言，这似乎回答了我想做的事情，即在导入的相机之间切换，而不是让控件失控。

这是一个更新的演示，它正在按照我的期望运行：http://datable.net/WebGL/camTest5/

Three.js：在相机和控件之间切换

Three.js: Switching between Cameras and Controls

javascript

three.js