Object wireframe with fill color in my current code

Hi guys, currently I can load my model and its textures perfectly fine.
I made a toggle button that will change a variable from false to true, and when true I would like to display the object wireframe.

Only problem I am having is that when I display the wireframe, it is transparent. It does not have a fill color of any kind. I would like to show the wireframe but with a fill color.

is that possible and if so, how can I make this with my current code?

let materialLoader = new THREE.MTLLoader();
materialLoader.load('scene.mtl', function(materials){

	materials.preload();

	let objectLoader = new THREE.OBJLoader();
	objectLoader.setMaterials(materials);

	objectLoader.load('scene.obj', function(mesh){

		mesh.children[0].material.wireframe = true;

		scene.add(mesh);
	});

});

Best regards

You can do it like shown in the the following fiddle: https://jsfiddle.net/f2Lommf5/15326/

The idea is to use THREE.WireframeGeometry and THREE.LineSegments. It’s not possible to achieve the same effect with just Material.wireframe.

Oké, ill try and adapt my code to this. Just began learning TreeJS so this stuff looks like abracadabra still but ill give it a go haha.

Thanks so much for the reply!

Tried this, I am sure its totally wrong, aint working obviously :stuck_out_tongue:

	loader.load(
		'scene.obj',
		function ( object ) {

			geometry = object;
			material = new THREE.MeshNormalMaterial();
			mesh = new THREE.Mesh( geometry, material );

			scene.add( geometry );

			const wireframeGeometry = new THREE.WireframeGeometry( geometry );
			const wireframeMaterial = new THREE.LineBasicMaterial( { color: 0xff0000 } );
			const wireframe = new THREE.LineSegments( wireframeGeometry, wireframeMaterial );
			mesh.add( wireframe );

		},
		function ( xhr ) {
			console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
		},
		function ( error ) {
			console.log( 'An error happened' );
		}
	);

You do not pass in an instance of Object3D but a geometry.

Got it working, didnt work in the begin (Caching) but after pressing F5 for 10 times it suddenly worked lol.
I am hosting on a real server so not local. Not sure why it didnt work and I had to press F5 a couple of times but oh well… it works now haha. Thanks for your answers and patients!

loader.load(
'scene.obj',
function ( object ) {

    object.traverse( function ( child ) {

        if ( child instanceof THREE.Mesh ) {

            let geometry = child.geometry;
            let material = child.material;
            let mesh = new THREE.Mesh(geometry, material);

            scene.add(mesh);

            const wireframeGeometry = new THREE.WireframeGeometry( geometry );
            const wireframeMaterial = new THREE.LineBasicMaterial( { color: 0xff0000 } );
            const wireframe = new THREE.LineSegments( wireframeGeometry, wireframeMaterial );
            mesh.add( wireframe );

        }

    });

    scene.add( object );

},
function ( xhr ) {
    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
function ( error ) {
    console.log( 'An error happened' );
}

);

Might be useful to you ^^

It’d be neat if the materials supported wireframes while still rendering the fills. This would prevent from needing separate JS-to-GPU calls just for the wireframes.