Question

1）我正在开发一个dat.GUI应用程序，我有2个滑块。我希望在另一个更改时重置一个。例如：

 var FizzyText = function() {
   this.slider1 = 0;
   this.slider2 = 0;
};
var gui = new dat.GUI();
var text = new FizzyText();
var slider1 = gui.add(text, 'slider1', 0, 5);
var slider2 = gui.add(text, 'slider2', 0, 5);

slider1.onChange(function(value){
  console.log(value); 
  text.slider2 = 0; // this doesn't work
});

slider2.onChange(function(value){
  console.log(value);
  text.slider1 = 0; // this doesn't work
});

这只是一个例子，但滑块重置或设置为默认值非常重要（在FizzyText中）。

上面的示例来自https://workshop.chromeexperiments.com/examples/gui/#9--Updating-the-Display-Automatically，我无法自动更新滑块

2）我想添加一个重置按钮，其中所有滑块都将被重置。但是通过前面的回答，我可以重置所有值

Answer 1

我找到了答案： gui.__controllers是和控制器数组。所以我只是添加了类似的东西：

＆＃13;

 var FizzyText = function() {
   this.slider1 = 0;
   this.slider2 = 0;
};
var gui = new dat.GUI();
var text = new FizzyText();
var slider1 = gui.add(text, 'slider1', 0, 5);
var slider2 = gui.add(text, 'slider2', 0, 5);

/* Here is the update */
var resetSliders = function(name){
  for(var i = 0; i<gui.__controllers.length;i++{
      if( !gui.__controllers.property == name )
    gui.__controllers[i].setValue(0);
   }
};

slider1.onChange(function(value){
  console.log(value); 
  resetSliders('slider1');
});

slider2.onChange(function(value){
  console.log(value);
  resetSliders('slider2');
});

＆＃13;

Answer 2

最好通过使用控制器的.initialValue来重置dat.GUI的值，而不是对其进行硬编码，因此以下操作将更可取：gui.__controllers[i].setValue(gui.__controllers[i]);

您可以使用gui.__controllers.forEach(controller => controller.setValue(controller.initialValue));

重设所有GUI的控制器。

如何更改dat.GUI上的滑块值以及如何重置dat.GUI

2 个答案: