OBJLoader + MTLLoader not loading texture image

I’m trying to load this OBJ model:
https://cdn.hexa3d.io/hotlink-ok/test/top.zip

to my scene with OBJLoader + MTLLoader like so:

loadMaterial = (path, options) => {
        let mtlLoader = new THREE.MTLLoader();
        let file = this.app.utils.getFileFromPath(path);
        let justPath = path.substring(0, path.lastIndexOf(file));
        mtlLoader.setPath(justPath);
        mtlLoader.setTexturePath(justPath);
        mtlLoader.load(file.substring(0, file.lastIndexOf('.')) + '.mtl', materials => {
            materials.preload();
            this.loadOBJ(materials, justPath, file);
        });
    };


loadOBJ = (materials, justPath, file) => {
        let objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.setPath(justPath);
        this.onLoadStart();
        objLoader.load(file, (object) => {
            this.app.modelScene.add(object);
        }, (xhr) => {
            var percentage = Math.ceil(xhr.loaded / xhr.total * 100);
            this.onLoading(percentage);
        }, this.onLoadError.bind(this));
    };

This is how it looks like on other framework (Blend4Web):

This is how it looks like on my three-js viewer:
http://vqa.hexa3d.io/index.html?load=/models/1023273377790346236.obj

Looks like the texture isn’t being mapped to the material or something like that although you can see the image request on the network tab with DevTools.

What am I missing?

Thank you.

Can you please provide a unminified version of three.js and index.js in your viewer? This makes it easier to debug the issue.

Sure, try now.

For some reasons, the color value of the material is black. If I set it to white in the debugger, I see this:

image

So the texture is loaded and set correctly. When I look into your MTL file, the kd value of your material is actually (0,0,0). That means the color value of your material will also be (0,0,0).

"newmtl Tshirt04:lambert1SG
illum 4
Kd 0.00 0.00 0.00
Ka 0.00 0.00 0.00
Tf 1.00 1.00 1.00
map_Kd 27.jpg
Ni 1.00
newmtl polySurface20SG
illum 4
Kd 0.00 0.00 0.00
Ka 0.00 0.00 0.00
Tf 1.00 1.00 1.00
Ni 1.00
newmtl polySurface20SG1
illum 4
Kd 0.00 0.00 0.00
Ka 0.00 0.00 0.00
Tf 1.00 1.00 1.00
Ni 1.00
"

How is you model displayed in Blender or Sketchfab?

1 Like

Thank you!

I use Blender and Blend4Web to display it.

I wonder however, if there’s a color and a texture, witch one is stronger?

And why you setting the color to white instead of black made the difference?

Shouldn’t it be white?

Feels a bit inconsistent.

The final color value is a result of the base color multiplied with the color from the diffuse texture. There is no either-or.

MTLLoader just applies the values that are present in your MTL file to the material. It would be interesting to see how Sketchfab handles your model. If it shows it correctly without manual adjustments, I suggest you open an issue at github.

Indeed it looks like also Sketchfab is interpreting this asset as the Creator expected:

link to the issue on github