javascript 用新值刷新 dat.gui
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16166440/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
refresh dat.gui with new values
提问by user2244365
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 object name when I reload a other model ?
Or it's possible to reset/clear the gui.
我想用新值刷新 dat.gui 菜单。我已经加载了一个模型并在文件夹中显示了 gui 文件夹中对象的名称。
重新加载其他模型时如何显示新对象名称？
或者可以重置/清除 gui。
回答by Lee Stemkoski
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
http://workshop.chromeexperiments.com/examples/gui/#9--Updating-the-Display-Automatically
For an example of this in Three.js, see:
有关 Three.js 中的一个示例，请参阅：
回答by jmmut
Echt Einfach's solution didn't work for me, and Stemkoski's one is a bit wide. I finally made it with the updateDisplayfunction:
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
http://workshop.chromeexperiments.com/examples/gui/#10--Updating-the-Display-Manually
Note that if you have the values in some folder folder1the call is like this:
请注意，如果您在某个文件夹中有值，folder1则调用如下所示：
for (var i = 0; i < this.gui.__folders.folder1.__controllers.length; i++) {
this.gui.__folders.folder1.controllers[i].updateDisplay();
}
If you do not want to hard-code folder1, or simply want to update all folders, you can proceed as follows:
如果您不想硬编码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();
}
}
回答by Andru Phoenix
Wrote a function to update dat.gui dropdowns with a new set of values:
编写了一个函数来使用一组新值更新 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;
}
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});
回答by u6216122
It's easy when I have read the source code of dat.gui:
当我阅读了 dat.gui 的源代码时很容易：
https://github.com/dataarts/dat.gui/blob/master/src/dat/controllers/Controller.js#L36
https://github.com/dataarts/dat.gui/blob/master/src/dat/controllers/Controller.js#L36
As you see, this.object = object, thisis a controller you add, and objectis what you need to change. Here is example code:
如您所见，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;
回答by steveOw
Lee Stemkoski's and Echt Einfach's solutions use the .listen() method on a selected controller in the GUI.
Lee Stemkoski 和 Echt Einfach 的解决方案在 GUI 中的选定控制器上使用 .listen() 方法。
jmmut's solution ,using .updateDisplay(), loops through ALL of the controllers in the GUI
jmmut 的解决方案，使用 .updateDisplay()，循环遍历 GUI 中的所有控制器
It strikes me that both these solution types are EXPENSIVE if you only want to manually update the value of a single controller at a particular time.
如果您只想在特定时间手动更新单个控制器的值，我觉得这两种解决方案类型都很昂贵。
You can avoid this by using the method .updateDisplay() for a SINGLE controller.
您可以通过对单个控制器使用 .updateDisplay() 方法来避免这种情况。
One way to do this is if you know beforehand the index[i] of the single controller. But this is rather fiddly to implement.
一种方法是，如果您事先知道单个控制器的 index[i]。但这实现起来相当繁琐。
A better way is to reference the particular controller by name
更好的方法是通过名称引用特定的控制器
// 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()
Note: I have not included the extra code required to make this work with controllers inside folders. You can get this from the other answers.
注意：我没有包含在文件夹中使用控制器所需的额外代码。你可以从其他答案中得到这个。
回答by thc
listen has a bug associated with it, if you use dropdown menus. See here: https://code.google.com/p/dat-gui/issues/detail?id=59
如果您使用下拉菜单，listen 有一个与之相关的错误。请参阅此处：https: //code.google.com/p/dat-gui/issues/detail?id=59
Here's a short function to update all controllers by iterating through all folders.
这是一个通过遍历所有文件夹来更新所有控制器的简短函数。
function updateDisplay(gui) {
for (var i in gui.__controllers) {
gui.__controllers[i].updateDisplay();
}
for (var f in gui.__folders) {
updateDisplay(gui.__folders[f]);
}
}
回答by Kai Noack
My answer does notreflect your question but will be helpfulfor others that programmatically change values within the 3d scene and need to update the GUI controls.
我的回答并未反映您的问题，但对于以编程方式更改 3d 场景中的值并需要更新 GUI 控件的其他人会有所帮助。
When you declare:
当您声明：
var cubeX = folder1.add( parameters, 'x' ).min(-100).max(100).step(1).listen();
you have declared parameters beforehand, e.g.
您事先声明了参数，例如
parameters = {
x: 0, y: 0, z: 0
}
Now you can listen to the key events or the appropriate event and change the values in the GUI like that:
现在您可以监听按键事件或适当的事件，并像这样更改 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
}
}
回答by Hitesh Sahu
None of above answers worked for me. I simply recreated DAT GUI and it worked.
以上答案都不适合我。我只是重新创建了 DAT GUI 并且它起作用了。
I will not recommend it but if nothing works and you don't wanna spend more time in this then simply delete current DAT GUI:
我不会推荐它，但如果没有任何效果并且您不想在这方面花费更多时间，那么只需删除当前的 DAT GUI：
this.gui.destroy()
And then recreate DAT GUI with parameters.
然后使用参数重新创建 DAT GUI。
