обновить 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

Для пример этого в разделе «Три». см.:

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

Answer 2

Мой ответ делает не отражают ваш вопрос, но будут полезного для других, которые программно изменить значение в 3d сцены и нужно обновить элементы управления с графическим интерфейсом.

При объявлении:

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 3

решение 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 4

Решения Lee Stemkoski и Echt Einfach используют метод .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

У прослушивания есть связанная с этим ошибка, если вы используете раскрывающиеся меню. См. Здесь: 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 6

Это легко, когда я прочитал исходный код 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 7

Написал функцию для обновления 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});