GLTF Wireframe toggle

Questions
1

Hi,
What is way to toggle wire frame using gltf model?
Here is my code…

Function to add model

function addmodel() {loader.load( './model/model.glb', function (Geometry){
	model = Geometry.scene;
	model.traverse ( ( o ) => {
		if ( o.isMesh ) {
		o.material.metalness = true;
		o.material.wireframe = false;;
		}
	} );
	test.add(model);
});
scene.add(test); }

Function for dat.gui

function addControl() {
gui = new dat.GUI({ width: 300});

disp_param = 
{
	WireFrame: false,
};
var dispFolder = gui.addFolder( 'Display');

dispFolder.add( disp_param, 'WireFrame' ).onChange( function ( val ) {
	if (val == true){
		o.material.wireframe=true; // What should i do here, to turn wireframe on??
	} 
	else {
		o.material.wireframe=false; // What should i do here to turn wireframe off??
	}
} );
2

That looks right. If it’s not working, try adding material.needsUpdate = true.

3

It is still not working…

4

It looks like you are traverse()ing the model in one place, and then trying to access o.material in another place. You will need to traverse the entire model to change all of its materials to wireframe, or back.

Sharing complete code to reproduce the problem, or a demo, may help to get an answer more quickly.

1 Like
5

Hi…
yes you are correct.

have shared my complete project.siddharth.zip (1.0 MB)
please check line 139, in siddharth.js where i want to set o.material.wireframe=true.
what could be the best possible way to do so?

6

You already have code that traverses over the model and sets wireframe=true — you need to do the same thing each time the GUI onChange function is called. For example:

dispFolder.add( disp_param, 'WireFrame' ).onChange( function ( val ) {
  threeGlasses.traverse(function(object) {
      if (!object.isMesh) return;
      object.material.wireframe = val;
      object.material.needsUpdate = true; // not sure if this is needed?
  });
} );
1 Like
7

Thank you…
object.material.needsUpdate = true; is not needed…

I had a query, could you please explain this line…
“if (!object.isMesh) return;” ??

8

If the object is not a mesh, it won’t have a material. We return early to exit the function in that case, or object.material.wireframe = true would throw an error.

1 Like