Proper way of adding and removing a wireframe

Questions
1

Hi guys,

currently adding a wireframe works perfectly. Removing too, except that my textures are gone and I am left with a “black-ish” model.

What is the proper way of removing a wireframe and bring the model back in its old state?

function toggleWireframe()
{
	if(wireframe == false) {

		model.traverse(function(child) {
			if (child.isMesh) {

				// Add a mesh which will be used for our wireframe
				let geometry = child.geometry;
				let material = child.material.color = new THREE.Color(0x000000);
				let mesh = new THREE.Mesh(geometry, material);

				mesh.name = 'mesh';
				scene.add(mesh);

				// Setup our wireframe
				const wireframeGeometry = new THREE.WireframeGeometry(geometry);
				const wireframeMaterial = new THREE.LineBasicMaterial({color: 0xFFFFFF});
				const wireframe = new THREE.LineSegments(wireframeGeometry, wireframeMaterial);

				wireframe.name = 'wireframe';
				mesh.add(wireframe);

			}
		});

		wireframe = true;

	} else {

		scene.remove(scene.getObjectByName('mesh'));
		scene.remove(scene.getObjectByName('wireframe'));

		wireframe = false;

	}
}
2

You could looks a bit strange since you are adding a new mesh which is actually not necessary. Do it like so:

function toggleWireframe()
{
	if(wireframe == false) {

		model.traverse(function(child) {
			if (child.isMesh) {

				// Setup our wireframe
				const wireframeGeometry = new THREE.WireframeGeometry(child.geometry);
				const wireframeMaterial = new THREE.LineBasicMaterial({color: 0xFFFFFF});
				const wireframe = new THREE.LineSegments(wireframeGeometry, wireframeMaterial);

				wireframe.name = 'wireframe';
				child.add(wireframe);

			}
		});

		wireframe = true;

	} else {

		scene.remove(scene.getObjectByName('wireframe'));
		wireframe = false;

	}
}
3

Thanks for your reply!

If I use that code, I cannot remove the wireframe anymore.
The reason that I added a mesh is because I dont want any textures to show when I apply the wireframe. I want the model to be “grey” :slight_smile:

4

Okay. Then please provide a live example that demonstrates the issue.

5

This is my current setup with the above code :slight_smile:

So basically what i want:

Turn on wireframe

  • No textures, just grey color
  • Wireframe is visible

Turn off wireframe

  • Textures are back
  • Wireframe is invisible
6

Ahhhh! I guess this is the evil line:

let material = child.material.color = new THREE.Color(0x000000);

What happens here is that you overwrite the original color of the model’s material. Even if you remove the wireframe and the respective mesh, the color of the model is still changed. I think it’s better if you create an own material for the wireframe display.

7

ahw… thanks! I have no clue how to create an own material for the wireframe, but ill try to figure it out. Many thanks!