1

我试图弄清楚是否可以只更新 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']);
};

这确实会更改值，但它会创建一个具有新索引的新模板控制器（删除前一个）并使其下次无法工作。它还将新的推到控制器列表的底部。

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

4

3 回答 3

6

只需更新下拉列表的 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']);
于 2018-05-03T06:31:45.260 回答
2

我试图做同样的事情。我的解决方案是使用 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
}
于 2014-05-09T07:55:01.767 回答
0

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

var controller;

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

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

在这里您可以找到实时代码。

于 2020-07-31T02:53:47.277 回答