在dat.gui中为属性名创建别名

时间:2014-12-16 16:55:14

标签: dat.gui

我正在尝试在three.js项目中使用dat.gui,以允许打开和关闭场景中各种元素的visible属性。从功能上来说,这很好。但是,我遇到的问题是因为我正在为场景中每个孩子的可见属性创建一个复选框,我最终得到了一长串复选框,所有复选框都标记为“可见”。

基本上,这个:

var visFolder = gui.addFolder('Components');                
for (var comp in scene.children[i].children){
   visFolder.add(scene.children[i].children[comp],'visible');
}

结果如下:

{'visible' : true,
 'visible' : true,
 'visible' : true,
 'visible' : true,
 ...
}

所有gui元素都正确引用每个子元素的可见属性,但对用户没有太大帮助。

是否有提供将显示给用户的别名而不是属性名称(我想使用元素的名称或ID)?

2 个答案:

答案 0 :(得分:13)

也许你的意思是这样的:

gui.add(properties, "x").min(10).max(20).name("X coord");
gui.add(properties, "visible").name("Show image A");

答案 1 :(得分:-1)

@Mikhail

谢谢!不幸的是,API documentation并不清楚此方法/分配将设置控制器的显示名称以及文件夹。它声明:

  

gui。名称:字符串

     

GUI的名称。用于文件夹。即文件夹名称

     

种类:GUI的实例属性

更正(在原始发布后编辑):' .name'是文件夹的属性。 '。名称()'是新GUI构造函数的一部分,详见此处:https://github.com/dataarts/dat.gui/blob/master/API.md#new_GUI_new

我构建了一个快速codepen来说明' name()'的用法。从具有多个文件夹中找到的相同属性的数据对象动态创建文件夹时的分配。它还动态分配文件夹名称,只是为了演示文件夹与控制器的名称分配之间的区别:

代码:

var datGui = new dat.GUI();
var data = {Folder_1: {setting:true},
            Folder_2: {setting:false}
           } //data
 var datController ={};          
 for (var folder in data){
        var newFolder = datGui.addFolder(folder.replace("_"," "))
    for (var setting in data[folder]){
        var datUniqueProperty = folder + "_" + setting;
        datController[datUniqueProperty] = data[folder][setting];
        var test = newFolder.add(datController,datUniqueProperty).name(setting);
    } //for setting 
 } //for folder 

用于文件夹