Question

我试图弄清楚是否可以只更新dat.gui控制器的下拉列表值。

var gui = new dat.GUI();
gui.add(this, 'toggle').onChange( updateToggle );
gui.add(item, 'template', [ 'A', 'B', 'C', 'D' ]).onChange( updateTemplate );

更改切换后，我想修改模板选项：

if (startRibbon) {
     gui.__controllers[1].options(['A', 'B']);
} else {
     gui.__controllers[1].options(['A', 'B', 'C', 'D']);
};

这会更改值，但它会创建一个带有新索引的新模板控制器（删除前一个索引）并使其下次不起作用。它还将新的推送到控制器列表的底部。

在我添加更多代码以尝试追逐新的修改后的/新控制器之前，我想我应该看看是否有人有更好的方法。

Answer 1

我试图做同样的事情。我的解决方案是使用onChange删除并添加控制器。因为它将它推到底部并弄乱了订单，所以我不能直接做你做的事情。我还必须删除并在seq中添加所有下面的内容。

或者如果控制器太多，那么只需要一个函数来删除所有控制器并为这些情况添加所有控制器会更方便。

为您的示例编辑我的解决方案，它将是这样的......

var arr_template = [ 'A', 'B', 'C', 'D' ];

var gui = new dat.GUI();
gui.add(this, 'toggle').onChange( updateToggle );  // controller 0
gui.add(item, 'template', arr_template).onChange( updateTemplate ); // controller 1
gui.add(extra,'hello'); // controller 2

function updateTemplate()
{
  if (startRibbon) {
     arr_template = [ 'A', 'B'];
  } else {
     arr_template = [ 'A', 'B', 'C', 'D' ];
  }

  // remove controllers >= 1 in reverse order
  gui.__controllers[2].remove();
  gui.__controllers[1].remove();

  // add back in order
  gui.add(item, 'template', arr_template).onChange( updateTemplate ); // controller 1
  gui.add(extra,'hello'); // controller 2
}

Answer 2

只需更新下拉列表的html内容。

function updateDropdown(target, list){   
    innerHTMLStr = "";
    for(var i=0; i<list.length; i++){
        var str = "<option value='" + list[i] + "'>" + list[i] + "</option>";
        innerHTMLStr += str;        
    }

    if (innerHTMLStr != "") target.domElement.children[0].innerHTML = innerHTMLStr;
}

dropdown = gui.add(MyObject, 'Values', ['A', 'B']);

updateDropdown(dropdown , ['A', 'B', 'C', 'D']);

Answer 3

您可以使用功能options。我出于示例目的对此进行了编码。我希望你能适应它。

var controller;

var config = {
  'value': '1',
  'changeValues': function () {
    controller.options( [ 'A', 'B', 'C' ] );
  }
};

var gui = new dat.GUI();
gui.add( config, 'changeValues' );
controller = gui.add( config, 'value', [ '1', '2', '3' ] );

Here，您可以找到实时代码。

dat.gui：更新控制器的下拉列表值？

3 个答案: