Dat.gui配置项联动

配置项联动，即更改某一配置项后，config中其他参数也随之变化，同时反映到gui面板中

比如更改下拉列表的选项，最大值和最小值会随之改变

config中的数值改变很好实现，使用onFinishChange函数定义即可

而要将config中的数值同步到面板中，官方给出了两种方法，一种是自动的(官方例子)：

var fizzyText = new FizzyText();
var gui = new dat.GUI();

gui.add(fizzyText, 'noiseStrength', 0, 100).listen();

var update = function() {
  requestAnimationFrame(update);
  fizzyText.noiseStrength = Math.random();
};

update();

也就是在初始化面板的时候给max和min两项加上.listen()的方法

但是这会使得在之后手动调整数值的时候，无法通过直接输入改变值（会锁定为config中的值），除非是按住左键滑动鼠标（想象一个隐藏的slider），这样操作很麻烦而且很难精确

所以应该使用第二种方法，手动update(官方示例)：

var fizzyText = new FizzyText();
var gui = new dat.GUI();

gui.add(fizzyText, 'noiseStrength', 0, 100);

var update = function() {

  requestAnimationFrame(update);
  fizzyText.noiseStrength = Math.cos(Date.getTime());

  // Iterate over all controllers
  for (var i in gui.__controllers) {
    gui.__controllers[i].updateDisplay();
  }

};

update();

核心为gui.__controllers[i].updateDisplay()这个loop的部分

在本例中，可以把此段代码放到触发联动的项目的onFinishChange函数中

onFinishChange: function(value) {
    config.setSizeValue(); //config中联动项数值改编
    // 同步到面板中
    for (var i in this.__gui.__controllers) {
        this.__gui.__controllers[i].updateDisplay();
    }
}    

可以在达到目的的同时，避免listen带来的过大的开销