与dat.gui的单选按钮

Question

我正在使用三个js中的复选框。我创建了一个用户控制面板，我在其中添加了复选框。我想要做的是当我选中另一个复选框时点击任何复选框前一个应该是未选中的。所以任何人都可以告诉我如何做到这一点。

这是我为复选框编写的代码。

function addDatGui(){
            var gui = new dat.GUI();

            parameters = {
                a:false,
                b:false,
                c:false
            }
            var first = gui.addFolder("Plastic");
                var pos1 = first.add(parameters,'a').name('Possitive Charge');
                var neg1 = first.add(parameters,'b').name('Negative Charge');
                var neu1 = first.add(parameters,'c').name('Neutral');
            var second = gui.addFolder("Glass");
                var pos2 = second.add(parameters,'a').name('Possitive Charge');
                var neg2 = second.add(parameters,'b').name('Negative Charge');
                var neu2 = second.add(parameters,'c').name('Neutral');
              pos1.onChange(PCharge);
              neg1.onChange(Ncharge);
              neu1.onChange(NeCharge);
              var show = gui.add(parameters,'a').name('Show Charge'); 
}

Answer 1

您可以设置.listen()到每个控制器，.onChange()设置一个功能，将所有参数设置为false，然后设置true所需的参数：

var gui = new dat.GUI();

parameters = {
  a: false,
  b: false,
  c: false
}

var first = gui.addFolder("Plastic");
var pos1 = first.add(parameters, 'a').name('Possitive Charge').listen().onChange(function(){setChecked("a")});
var neg1 = first.add(parameters, 'b').name('Negative Charge').listen().onChange(function(){setChecked("b")});
var neu1 = first.add(parameters, 'c').name('Neutral').listen().onChange(function(){setChecked("c")});

function setChecked( prop ){
  for (let param in parameters){
    parameters[param] = false;
  }
  parameters[prop] = true;
}

jsfiddle示例

PS当我想在两个不同的文件夹中使用相同的参数对象时，我还没有得到这个时刻，但无论如何它都取决于你。