Question

我有两个不同的threejs场景，每个场景都有自己的相机。我可以使用相应的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，每个分配之前也被用作第二台相机的矩阵。

然而，这感觉有点hacky并且可能导致各种奇怪的问题。我个人可能更喜欢你已经实施的更明确的方法。

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

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

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

2 个答案: