Как изменить значение ползунка на dat.GUI и как сбросить dat.GUI

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 есть и массив контроллеров. Так что я просто добавил что-то вроде этого:

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'); 
 
});