aggiorna dat.gui con nuovi valori

Question

Desidero aggiornare il menu dat.gui con nuovi valori. Ho caricato un modello e visualizzato nella cartella il nome degli oggetti all'interno di una cartella gui.
Come posso visualizzare il nuovo nome dell'oggetto quando ricarico un altro modello?
Oppure è possibile ripristinare/cancellare la GUI.

Answer 1

In sostanza, è necessario impostare i controllori di "ascoltare" per l'ingresso quando si aggiunge, per esempio,

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

Per la documentazione, vedere:

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

Per un esempio di questo in Three.js, vedi:

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

Answer 2

La mia risposta non non riflettono tua domanda, ma sarà utile per gli altri che cambiano a livello di codice i valori all'interno della scena 3D e la necessità di aggiornare i controlli GUI.

Quando si dichiara:

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

aver dichiarato i parametri in anticipo, per esempio

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

Ora è possibile ascoltare gli eventi chiave o l'evento appropriato e modificare i valori nella GUI del genere:

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 3

soluzione di Echt Einfach non ha funzionato per me, e uno di Stemkoski è un po 'largo Ho finalmente fatto con la funzione updateDisplay:

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

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

Si noti che se si hanno i valori in qualche cartella folder1 la chiamata è come questo:

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

Se non si desidera per codificare il codice folder1 o semplicemente per aggiornare tutte le cartelle, è possibile procedere come segue:

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 4

Le soluzioni di Lee Stemkoski e Echt Einfach utilizzano il metodo .listen() su un controller selezionato nella GUI. soluzione

di jmmut, utilizzando .updateDisplay(), loop attraverso tutti i controller nella GUI

Mi sembra che entrambi questi tipi di soluzioni sono costose se desideri solo aggiornare manualmente il valore di un singolo controller a un momento particolare

È possibile evitare questo utilizzando il metodo .updateDisplay() per un controller SINGLE.

Un modo per farlo è se si conosce in anticipo l'indice [i] del controller singolo.Ma questo è piuttosto difficile da implementare.

Un modo migliore è quello di fare riferimento al controllo particolare per nome

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

Nota: Non ho inserito il codice aggiuntivo richiesto per fare questo lavoro con i controller all'interno di cartelle. Puoi ottenerlo dalle altre risposte.

Answer 5

listen ha un bug associato, se si utilizzano i menu a discesa. Vedi qui: https://code.google.com/p/dat-gui/issues/detail?id=59

Ecco una breve funzione per aggiornare tutti i controller iterando attraverso tutte le cartelle.

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

Answer 6

E 'facile quando ho letto il codice sorgente di dat.gui:

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

Come si vede, this.object = object, this è un controller si aggiunge, e object è ciò che è necessario modificare. Ecco codice esempio:

var gui = new dat.GUI(); 

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

// update a controller 
controller.object = newObject; 

Answer 7

scritto una funzione per aggiornare dat.gui dropdowns con una nuova serie di valori:

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

utilizzati:

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