使用新值刷新dat.gui

Question

我想用新的值刷新dat.gui菜单。我已经加载了一个模型，并在文件夹中显示了gui文件夹中对象的名称。

当我重新加载其他模型时，如何显示新的对象名称？

或者可以重置/清除gui。

​

Answer 1

基本上，您必须在添加控制器时将其设置为“侦听”输入，例如，

gui = new dat.GUI();
var guiX = gui.add( parameters, 'x' ).min(0).max(200).listen();

有关文档，请参阅：

http://workshop.chromeexperiments.com/examples/gui/#9--Updating-the-Display-Automatically

有关Three.js中的示例，请参阅：

http://stemkoski.github.io/Three.js/GUI-Controller.html

Answer 2

Einfach的解决方案对我不起作用，Stemkoski的解决方案有点宽泛。我终于用updateDisplay函数做到了：

for (var i in gui.__controllers) {
    gui.__controllers[i].updateDisplay();
}

http://workshop.chromeexperiments.com/examples/gui/#10--Updating-the-Display-Manually

请注意，如果您在某个文件夹folder1中有这些值，则调用过程如下所示：

for (var i = 0; i < this.gui.__folders.folder1.__controllers.length; i++) {
    this.gui.__folders.folder1.controllers[i].updateDisplay();
}

如果您不想对folder1进行硬编码，或者只是想更新所有文件夹，您可以按照以下步骤进行操作：

for (var i = 0; i < Object.keys(gui.__folders).length; i++) {
    var key = Object.keys(gui.__folders)[i];
    for (var j = 0; j < gui.__folders[key].__controllers.length; j++ )
    {
        gui.__folders[key].__controllers[j].updateDisplay();
    }
}

Answer 3

编写了一个函数来使用一组新的值更新dat.gui dropdowns：

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

    if(list.constructor.name == 'Object'){
        for(var key in list){
            var str = "<option value='" + list[key] + "'>" + key + "</option>";
            innerHTMLStr += str;
        }
    }
    if (innerHTMLStr != "") target.domElement.children[0].innerHTML = innerHTMLStr;
}

用法：

myDropdown = gui.add(MyObject, 'myVariable', ['one','two','three']);
updateDatDropdown(myDropdown , ['A','B','C']);

// Also accepts named values

updateDatDropdown(myDropdown , {'A':1,'B':2,'C':3});