使用相同的控件控制多个摄像机答案

【问题标题】：Control multiple cameras with the same controls使用相同的控件控制多个摄像机
【发布时间】：2017-02-11 00:25:26
【问题描述】：

我有两个不同的threejs场景，每个场景都有自己的相机。我可以使用相应的TrackballControls 实例单独控制每个摄像头。

是否有可靠的方法将这些控件“锁定”或“绑定”在一起，以便操纵一个控件会导致相同的摄像机在另一个控件中重新定位？我目前的方法是向控件添加change 侦听器，并将两个摄像头更新为任何一个的更改，但这不是很整洁，因为其中一个，两个控件可以同时更改（由于阻尼）。

【问题讨论】：

听起来这里还有更多事情要做？您是否需要单独控制摄像机，或者您只想让一台摄像机跟随另一台摄像机，但在任何时候都只有一台是“主控”？

标签： three.js

【解决方案1】：

我相信如果您将第二个摄像头的矩阵设置为第一个摄像头的值并禁用两个摄像头的自动矩阵更新，它应该可以工作：

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

但现在您需要在渲染循环中手动更新矩阵：

camera1.updateMatrix();

该调用将获取position、rotation 和scale（已由控件更新）的值并将它们组合成camera1.matrix，之前的每个分配也用作矩阵第二个摄像头。

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

问题是您为什么还要使用两个相机和控件实例？只要不将相机添加到场景中，您就可以使用同一个相机渲染两个场景。

【讨论】：

【解决方案2】：

是否可以使用 Observer 或 Publisher 设计模式来控制这些对象？

您似乎正在使用控件操作摄像机。您可能会创建一个具有相同控制界面的对象，但是当您将命令传递给该对象时，它会向每个订阅或注册的摄像机重复相同的命令。

/* 伪代码：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 或更早版本编写它，但您必须将类定义更改为创建主对象及其功能的一系列功能对象定义。

【讨论】：