Обновить dat.gui новыми значениями

Ответ 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

Ответ 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();
    }
}

Ответ 3

Решения Lee Stemkoski и Echt Einfach используют метод .listen() для выбранного контроллера в графическом интерфейсе.

jmmut, используя .updateDisplay(), проходит через ВСЕ контроллеры в графическом интерфейсе

Мне кажется, что оба эти типа решений являются ДОРОЖНЫМИ, если вы только хотите вручную обновить значение одного контроллера в определенное время.

Вы можете избежать этого, используя метод .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()  

Примечание. Я не включил дополнительный код, необходимый для работы с контроллерами внутри папок. Вы можете получить это от других ответов.

Ответ 4

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

Когда вы заявляете:

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

вы заранее объявили параметры, например.

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

Теперь вы можете прослушивать ключевые события или соответствующее событие и изменять значения в графическом интерфейсе следующим образом:

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

Ответ 5

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

Ответ 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]);
    }
}

Ответ 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});