refresh dat.gui with new values

Question

I would like to refresh the dat.gui menu with new values. I have loaded a model and display in folder the name of the objects inside a gui folder.
How can I display the new

Answer 1

Basically, you have to set the controllers to "listen" for input when you add them, for example,

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

For documentation, see:

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

For an example of this in Three.js, see:

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

Answer 2

Wrote a function to update dat.gui dropdowns with a new set of values:

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

Usage:

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