dat.gui 单选按钮

Question

我正在使用三个复选框 js.I 创建了一个用户控制面板，我在其中添加了复选框 boxes.What 我想要做的是当我点击任何复选框时其他复选框已经被选中，前一个应该是 unchecked.So 谁能告诉我怎么做。

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

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 我只是没明白，当你想在两个不同的文件夹中使用相同的参数对象时，但这取决于你。

dat.gui 单选按钮

Radio buttons with dat.gui

javascript

dat.gui