使用相同的控件控制多个摄像头

Question

我有两个不同的三维场景，每个都有自己的摄像头。我可以用相应的TrackballControls实例分别控制每台摄像机。

是否有“锁定”或“结合”这些控件一起，一个可靠的方法，使得操纵一个导致在其他相同的相机重新定位？我目前的做法是将change监听器添加到控件中，并将两个摄像机更新为任何一个更改，但这不是很整洁，因为对于其中一个，两个控件都可以一次更改（由于衰减）。

Answer 1

我相信，如果你设置第二个摄像机的矩阵到第一的价值观和禁用两个相机的自动矩阵更新它应该工作：

camera2.matrix = camera1.matrix; 
camera2.projectionMatrix = camera1.projectionMatrix; 
camera1.matrixAutoUpdate = false; 
camera2.matrixAutoUpdate = false; 

但现在你需要手动更新矩阵在renderloop：

camera1.updateMatrix(); 

这个调用将会采取position，rotation和scale（已被控制更新）的值，并将其组成为camera1.matrix，其中每项任务以前都是也用作第二台相机的矩阵。

但是，这感觉有点哈克，并可能导致各种奇怪的问题。我个人可能会更喜欢你已经实施的更明确的方法。

问题是，为什么你甚至使用两个照相机 - 和控件，实例？只要相机没有添加到场景中，您就可以使用相同的相机渲染两个场景。

Answer 2

是否有可能使用观察或发布的设计模式来控制这些对象呢？

看来你是有控制操纵的摄像机。您可以创建一个具有相同控制界面的对象，但是当您将一个命令传递给对象时，它会对每个订阅或注册的相机重复执行相同的命令。

/*伪代码：ES6 */

class MasterControl { 
    constructor(){ 
     this.camera_bindings = []; 
    } 
    control_action1(){ 
     for(var camera of this.camera_bindings){ 
      camera.control_action1(); 
     } 
    } 
    control_action2(arg1, arg2){ 
     for(var camera of this.camera_bindings){ 
      camera.control_action2(arg1, arg2); 
     } 
    } 

    bindCamera(camera){ 
     if(this.camera_bindings.indexOf(camera) === -1){ 
      this.camera_bindings.push(camera); 
     } 
    } 
} 

var master = new MasterControl(); 
master.bindCamera(camera1); 
master.bindCamera(camera2); 
master.bindCamera(camera3); 

let STEP_X = -5; 
let STEP_Y = 10; 
//the following command will send the command to all three cameras 
master.control_action2(STEP_X, STEP_Y); 

这种结合自创建而不是使用本地three.js所的功能，但它很容易实现，可以让你快速的功能。

注：我写我的伪代码在ES6，因为它更简单，容易沟通。您可以使用es5或更早的版本来编写它，但是您必须将类定义更改为一系列可以创建主对象及其功能的功能对象定义。