Toggle visibility of meshes via dat.gui

Questions
,
1

Hi,
I’m trying to toggle visibility of each mesh of a complex scene via check boxes in dat.gui. I’ve created a pen to give you an idea of what I’m trying to do. I’ve commented out the gui part.
In the actual scene, there’s more than 100 meshes loaded. Could you please help me, dynamically generate gui controls to control visibility of each mesh?
Thank you very much

2

Why would you want to toggle each 100?

3

yes, 100 check boxes in a dat.gui folder. Is that possible?

4

Well yes, but actually i would suggest making it like this unless you need to specifically hide a specific index for some reason
https://codepen.io/Fyrestar/pen/ymeGme

1 Like
5

Thanks for reply. Yes I need to hide specific meshes. There are more than 100 meshes loaded, so I need to dynamically generate the gui controls according to the number of meshes.

6

Well 100+ is a lot, why do you need to do this actually?

https://codepen.io/Fyrestar/pen/BXjMWB

1 Like
7

I’m trying to render a mesh of a house with three.js, This way I can turn on and off certain elements like layers. :sweat_smile::sweat_smile: : Thanks so much for this. :v::heart_eyes::beers:

1 Like
8

Hi,
Do you know why this example is not working now on codepen? It worked without any issue, before
Thank you

9

Changing https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.min.js to https://cdnjs.cloudflare.com/ajax/libs/three.js/107/three.min.js (current version) seems solves the issue.

1 Like
10

Hi,
Could you please tell me how to load meshes hidden (visible = false )and then toggle visibility via dat.gui. Currently they’re all visible. I’ve tried to find a answer for this, but it seems my understanding of dat.gui and JavaScript is low. :roll_eyes::sleepy: I really appreciate if you could point me to somewhere I can improve my knowledge on these two.
Thank you

CodePen

11

Ehm. Why simply not add
mesh.visible = false;
in the callback function when the model is loaded:

function loadMesh (i){
      loader.load(urls[i], function(geometry) {
      //geometry.computeVertexNormals();
      var mesh = 'mesh' + i.toString
      mesh = new THREE.Mesh(geometry, meshMaterial);
      //mesh.scale.multiplyScalar( 0.04 );
      mesh.position.x = 0 + i*600 ;
      mesh.visible = false; // add this line
      scene.add(mesh);
        
      gui.add(mesh, 'visible').name( mesh.name || ( 'Mesh' + objects.length ) );
      objects.push(mesh);
    });
}
2 Likes
12

Thanks for reply I added this line, but the tick boxes are still ticked. How to untick them at start?
I can’t understand how this line of code works. :roll_eyes:
gui.add(mesh, 'visible').name( mesh.name || ( 'Mesh' + objects.length ) );

13

It adds a controller to gui, setting its name in dependency if a loaded model has name or if it doesn’t sets the name with concatenation of Mesh and value of the counter.

Surprising, that you have all checkboxes checked, after adding this line. I have all of them unchecked :slight_smile: and no visible meshes in the scene, till I turn their visibility on via controllers.

2 Likes
14

Thanks so much. I’ve added that line after the gui line. :upside_down_face: I’ve added it at the exact place you said and it works now. Thank you :blush::slightly_smiling_face::v::beers:

How did you learn so much about dat.gui. There’s not much tutorials in the internet. Did you go through the source ur self to learn all this?

15

http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage

2 Likes
16

Yeah, I went through these. But they don’t dive into deep subjects like creating controllers dynamically. Like you did here.
For example could you please tell me what does visible mean on this line?
gui.add(mesh, 'visible').name( mesh.name || ( 'Mesh' + objects.length
Is it a some kind of method? Are there more methods like that, which we can use? Like opacity, etc…?
Thank you

17

It just binds a controller to the mesh object property „visible“, this is the main thing with dat gui, you first pass the object you want a controller for a property of it.

Calling the name method allows you to give it another name than „visible“ like @prisoner849 explained, it’s optional not required.

3 Likes
18

Thanks so much for explanation. :slightly_smiling_face::v::beers:

1 Like
19

Can I bind the controller to object opacity property? I’ve tried it but it doesn’t work. :thinking:

Codepen

20

mesh.opacity is incorrect. .opacity is a property of a material.
Do it this way, for example:

function loadMesh (i){
      loader.load(urls[i], function(geometry) {
      //let mesh = new THREE.Mesh(geometry, meshMaterial);
      let mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color: Math.random() * 0x888888 + 0x888888})); 
      // if you apply single material to all meshes, you'll get strange effect
      mesh.position.x = 0 + i*600 ;
      scene.add(mesh);
      mesh.material.transparent = true; // set it to true to be able to manage material's opacity
      objects.push(mesh);
      gui.add(mesh.material, 'opacity', 0, 1).name( mesh.name || ( 'Mesh' + objects.length ) );
    });
}
1 Like