Question

我想用新值刷新dat.gui菜单。我已经加载了一个模型并在文件夹中显示gui文件夹中对象的名称如何在重新加载其他模型时显示新对象名称？或者可以重置/清除gui。 enter image description here

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

Lee Stemkoski和Echt Einfach的解决方案在GUI中的选定控制器上使用.listen（）方法。

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

如果您只想在特定时间手动更新单个控制器的值，那么这两种解决方案类型都是昂贵的。

您可以通过将方法.updateDisplay（）用于SINGLE控制器来避免这种情况。

这样做的一种方法是事先知道单个控制器的索引[i]。但实施起来相当繁琐。

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

// 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

如果你使用下拉菜单，

listen有一个与之相关的错误。见这里：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;

Answer 8

以上答案均不适合我。我只是重新创建了DAT GUI即可。

我不推荐这样做，但是如果没有任何效果，并且您不想花更多的时间在此，则只需删除当前的DAT GUI：

this.gui.destroy()

然后使用参数重新创建DAT GUI。

Answer 9

您必须使用 updateDisplay() 方法更新您的控制器

gui = new dat.GUI()
//edit values
gui.updateDisplay()

查看 dat.GUI API 文档： updateDisplay

使用新值刷新dat.gui

9 个答案:

以上答案均不适合我。我只是重新创建了DAT GUI即可。