javascript - 带有 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

您可以为每个 Controller 设置 .listen() 并使用将所有参数设置为 false 的函数设置 .onChange() 并且然后你需要的参数为 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 我只是不明白，当你想在两个不同的文件夹中使用相同的参数对象时，但这取决于你。