我想用新值刷新 dat.gui 菜单。我已经加载了一个模型并在文件夹中显示了 gui 文件夹中对象的名称。
重新加载其他模型时如何显示新对象名称？
或者可以重置/清除 gui。
问问题
20634 次
9 回答
25
基本上，您必须在添加控制器时将控制器设置为“监听”输入，例如，
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 中的示例，请参阅：
于 2013-04-23T16:32:11.460 回答
14
Echt Einfach's solution didn't work for me, and Stemkoski's one is a bit wide. I finally made it with the updateDisplay function:
for (var i in gui.__controllers) {
gui.__controllers[i].updateDisplay();
}
http://workshop.chromeexperiments.com/examples/gui/#10--Updating-the-Display-Manually
Note that if you have the values in some folder folder1 the call is like this:
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:
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();
}
}
于 2014-07-07T04:18:08.653 回答
4
编写了一个函数来使用一组新值更新 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});
于 2017-08-15T18:51:43.147 回答
3
Lee Stemkoski 和 Echt Einfach 的解决方案在 GUI 中的选定控制器上使用 .listen() 方法。
jmmut 的解决方案，使用 .updateDisplay()，循环通过 GUI 中的所有控制器
如果您只想在特定时间手动更新单个控制器的值，那么这两种解决方案类型都非常昂贵。
您可以通过对 SINGLE 控制器使用方法 .updateDisplay() 来避免这种情况。
一种方法是，如果您事先知道单个控制器的 index[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()
注意：我没有包含在文件夹中使用控制器所需的额外代码。你可以从其他答案中得到这个。
于 2014-07-29T19:37:50.657 回答
3
当我阅读了 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;
于 2017-02-22T13:34:53.280 回答
1
如果您使用下拉菜单，请听有一个与之相关的错误。见这里：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]);
}
}
于 2015-03-16T03:21:56.453 回答
1
我的回答不能反映您的问题，但对其他以编程方式更改 3d 场景中的值并需要更新 GUI 控件的人会有所帮助。
当您声明：
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
}
}
于 2014-01-22T17:58:41.923 回答
0
您必须使用 updateDisplay() 方法更新您的控制器
gui = new dat.GUI()
//edit values
gui.updateDisplay()
请参阅 dat.GUI API 文档： updateDisplay
于 2021-07-13T13:49:56.757 回答
0
以上答案都不适合我。我只是重新创建了 DAT GUI，它就可以工作了。
我不会推荐它，但如果没有任何效果并且您不想在此花费更多时间，那么只需删除当前的 DAT GUI：
this.gui.destroy()
然后使用参数重新创建 DAT GUI。
于 2020-05-18T05:27:20.473 回答