问题描述：

Question

问题描述：

有两个变量：

controller1 = {i: 100};
controller2 = {i: 300};

和control变量

control = controller1;

我将dat.GUI附加到control.i。

gui = new dat.GUI();
controller = gui.add(control, "i");
controller.listen();

因此它显示controller1.i的值，当我更改dat.GUI中的值时，它会更改controller1.i的值。

之后，我跑：

control = controller2;

当我更改dat.GUI中的值时，我希望它更改controller2.i，但现在它会更改controller1.i。

以下是笔：http://codepen.io/kranzy/pen/QKzYAW

或Stack Snippets：

＆＃13;

controller1 = {i: 100};
controller2 = {i: 300};
control = controller1;
click.addEventListener("click", function() {
  control = control == controller1 ? controller2:controller1;
});
gui = new dat.GUI();
controller = gui.add(control, "i");
controller.listen();
setInterval(function (){
  current.textContent = JSON.stringify(control);
  x.textContent = JSON.stringify(controller1);
  y.textContent = JSON.stringify(controller2);
},1000/24)

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.1/dat.gui.min.js"></script>
<h1>Controller 1: <code id="x"></code></h1>
<h1>Controller 2: <code id="y"></code></h1>
<button id="click"><h1>Change controller</h1></button>
<h1>Value of current controller: <code id="current"></code></h1>

＆＃13;

我能看到的唯一方法是删除控制器并在每次更改control变量时再次启动它，但我想知道另一种方式。
这里建议采用这种方式：Refreshing dat.gui variable（与我的问题不太相同，但相关）如果您对dat.GUI一无所知，可以参加导览here并查看是否可以帮助我。

Answer 1

我是傻瓜......这就像地狱一样容易：

click.addEventListener("click", function() {
  control = control == controller1 ? controller2:controller1;
  controller.object = control;
  // change the internal reference in dat.GUI
});

我在检查dat.GUI对象后发现了这种方式。

测试用例：http://codepen.io/anon/pen/aBvvmV

Answer 2

问题在于，通过调用controller = gui.add(control, "i")，您传递了control对象的引用（当前controller1），并且dat.gui创建了此引用的内部副本。因此，如果您覆盖ClickEventListener中的control，则dat.gui仍保留对controller1的引用，并且dat.gui上的所有更改都会controller1。我没有发现重置dat.gui中传递的引用的可能性，除了删除以前添加的控制器并传递一个新的控制器。

更改对象时dat.GUI不会更新

问题描述：

2 个答案: