刷新dat.gui用新值(refresh dat.gui with new values)

我想刷新与新值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:

ECHT 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下拉菜单：

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});

Answer 4:

李Stemkoski的和的Echt EINFACH的解决方案使用在GUI选择的控制器上的。听（）方法。

jmmut的解决方案，使用.updateDisplay（），遍历所有GUI中的控制器的

这让我觉得，这两种类型的解决方案是昂贵的，如果你只是想在一个特定的时间来手动更新单个控制器的值。

您可以通过使用该方法.updateDisplay（）用于单个控制器避免这种情况。

要做到这一点的方法之一是，如果你预先知道单个控制器的指数[1]。 但是，这是相当繁琐的实现。

更好的方法是按名称引用特定的控制器

// AT INITIALISATION TIME
gui1 = new dat.GUI();
Gparameters = { x: 0, y: 0, z: 0}
var gui1_X = gui1.add( Gparameters, 'x' ).min(0).max(200); // note no need to use the method .listen()

// AT RUN TIME
Gparameters.x++;
gui1_X.updateDisplay()  

注：我还没有列入，使这项工作里面的文件夹控制器所需的额外代码。 您可以从其他的答案得到这个。

Answer 5:

我的回答并不能反映你的问题，但会成为别人的3D场景中以编程方式更改值并需要更新的GUI控件有帮助 。

当你声明：

    var cubeX = folder1.add( parameters, 'x' ).min(-100).max(100).step(1).listen();

您已声明参数事前，如

parameters = {
    x: 0, y: 0, z: 0
}

现在，你可以听的关键事件或相应的事件和改变这样的GUI中的值：

window.addEventListener('keydown', function(event) {
    if(event.keyCode == 88) { // x pressed
        parameters.x++; // GUI value changed
        cube.scale.x = parameters.x; // 3d object changed
    }
}

Answer 6:

听有与之关联的错误，如果使用下拉菜单。 在这里看到： https://code.google.com/p/dat-gui/issues/detail?id=59

这里是一个简短的功能，通过所有文件夹迭代更新所有控制器。

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

Answer 7:

这很容易，当我看了dat.gui的源代码：

https://github.com/dataarts/dat.gui/blob/master/src/dat/controllers/Controller.js#L36

正如你看到的， this.object = object ， this是你添加的控制器，以及object是你需要改变什么。 下面是示例代码：

var gui = new dat.GUI();

// init a controller
var controller = gui.add(object, 'property');

// update a controller
controller.object = newObject;

文章来源: refresh dat.gui with new values