Creating An Alias For Property Name In dat.gui

Question

I'm trying to use dat.gui in a three.js project to allow the visible property of various elements in the scene to be toggled on and off. Functionally, this works fine. However, the issue that I am having is because I am creating a checkbox for the visible property of each child in the scene, I end up with a long list of check boxes all labeled 'visible'.

Basically, this:

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

Results in something like this:

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

With all the gui elements correctly referenced to each child's visible property, but not very helpful to the user.

Is there anyway to provide an alias that will be displayed to the user instead of the property name (I want to use the name or id of the element)?

Answer 1

Maybe you mean something like this:

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