three.js - How to set custom color to *.obj model when it is delivered without *.mtl file?

Question

I have a set of models in *.obj format that come without material files (*.mtl files). Some online services display these models correctly: https://3dviewer.net/, https://sketchfab.com/. But - according to the three.js documentation - in my project I only get an incorrect display of the model:

instead of:

The developer https://3dviewer.net/ said that the idea on this service is that if the *.mtl file is not found, then the script sets the default color / material - paints the entire product in one color.

How to color an object from a *.obj file to a selected color using three.js tools?

For testing, I attach a model file that comes without a material file: test sample *.obj file.

Answer 1

It seems the OBJ is not exported correctly. When using macOS preview, BabylonJS or the OBJLoader of three.js, the faces seem to have the wrong winding order. You should get the desired result by doing the following in your onLoad() callback:

const material = new THREE.MeshPhongMaterial( { color: 0xff0000, side: THREE.BackSide } );

obj.traverse( function( child ) {

    if ( child.isMesh ) child.material = material;

} );