Object wireframe with fill color in my current code

Questions
1

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

1 Like
2

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.

1 Like
3

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' );
		}
	);
4

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

5

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' );
}

);

6

Might be useful to you ^^

7

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.