Add a Wireframe onto an externally loaded object

Questions
1

How do you add/map a wireframe (or any other material) onto an externally loaded object

2

Try it with WireframeGeometry: https://jsfiddle.net/f2Lommf5/8887/

3

This is my code:
Could you tell me where I’m going wrong

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl('assets/');
mtlLoader.setPath('assets/');
mtlLoader.load('female-croupier-2013-03-26.mtl', function (materials) {

    materials.preload();

    materials.materials.default.map.magFilter = THREE.NearestFilter;
    materials.materials.default.map.minFilter = THREE.LinearFilter;

    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.setPath('assets/');
    objLoader.load('female-croupier-2013-03-26.obj', function (object) {

        scene.add(object);

    });

    //var obj = new THREE.Mesh(objLoader.load('female-croupier-2013-03-26.obj'), new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true  }));
		//scene.add(obj);

});

var wireframeGeomtry = new THREE.WireframeGeometry( geometry );
var wireframeMaterial = new THREE.LineBasicMaterial( { color: 0xffffff } );
var wireframe = new THREE.LineSegments( wireframeGeomtry, wireframeMaterial );
object.add(wireframe);
4

Put this in the onLoad callback of OBJLoader.load().

object.traverse( function ( child ) {

	if ( child.isMesh ) {

		var wireframeGeomtry = new THREE.WireframeGeometry( child.geometry );
		var wireframeMaterial = new THREE.LineBasicMaterial( { color: 0xffffff } );
		var wireframe = new THREE.LineSegments( wireframeGeomtry, wireframeMaterial );
		child.add(wireframe);

	}
	
} );

You might want to define the wireframeMaterial only once outside of the callback.

5

Thanks a tonne. I got it :smiley:
One thing though, what did you mean by, ‘You might want to define the wireframeMaterial only once outside of the callback.’
Aren’t I defining the wireframe material in this line,
var wireframeMaterial = new THREE.LineBasicMaterial( { color: 0xffffff } );
And isn’t it inside the callback

6

I tried a similar method to add a material to cover the object

                object.traverse( function ( child ) {
  	               if ( child.isMesh ) {
                     var geo = child.geometry;
                     var objmaterial = new THREE.MeshLambertMaterial({map: textureLoader.load('https://cywarr.github.io/small-shop/03db80b70ecfc07e84e6dd2589d0b14c57414fb8[1].jpeg')});
  		               var objTexture = new THREE.Mesh( objmaterial);
  		               child.add(objTexture);
                 }
                });

And I get this error:
Uncaught RangeError: Maximum call stack size exceeded
at Matrix4.multiplyMatrices (three.js:1345)
at Mesh.updateMatrixWorld (three.js:8445)

7

You are now endlessly add objects to the scene graph. So for each new objTexture object, you add a new one.

The idea is to reuse the material instance since it is the same for all wireframe objects.

9

Okay, Hence the call stack size exceeded
Understood. Thanks :slight_smile: