.obj models not showing any color intended through texture mapping

Questions
, ,
1

Hi I am new to three.js. For some reason when I add a new model in .obj and .mtl into my three.js code, the color will become white, despite whatever the original color or texture is. The following is a snippet of the code responsible for the pig model:

// pigmodel
var objLoader = new OBJLoader();
var mtlLoader = new MTLLoader();
function loadpigmodel( x, y, z, ang, scale ) {

            mtlLoader.setPath( './images/' );
            mtlLoader.load( 'Pig1.mtl', function ( loadedMesh ) {

                objLoader.setMaterials( loadedMesh );
                objLoader.load( './images/Pig1.obj', function ( object ) {

                    switch ( scale ) {

                        case 'big':
                            object.scale.set( 100, 100, 100 );
                            break;
                        case 'small':
                            object.scale.set( 90, 90, 90 );
                            break;
                        default:

                    }

The code above simulates a pigsty with some compost boxes. As you can see, the pig displayed in the code is white, even though it should be pink. The fence should also have wooden texture, but instead, it is also white.

Screen Shot 2020-08-24 at 1.28.38 AM
Screen Shot 2020-08-24 at 1.28.38 AM1167×462 222 KB

The two .mtl file looks like this:

newmtl Pig1
Ka 0.000000 0.000000 0.000000
Kd 0.505882 0.396078 0.356863
Ks 0.330000 0.330000 0.330000
map_Kd pigskin.jpg

and this:

newmtl Material
Ns 96.078431
Ka 1.000000 1.000000 1.000000
Kd 0.161519 0.069714 0.038927
Ks 0.500000 0.500000 0.500000
Ke 0.000000 0.000000 0.000000
Ni 1.000000
d 1.000000
illum 2

newmtl Material.003
Ns 96.078431
Ka 1.000000 1.000000 1.000000
Kd 0.549348 0.285120 0.296990
Ks 0.500000 0.500000 0.500000
Ke 0.000000 0.000000 0.000000
Ni 1.000000
d 1.000000
illum 2

Both of them doesn’t seem to work. We suspect that there is something wrong with the mtl files overlapping and leads to the malfunction. This is the full code The full code and the mtl files are included in this hyperlink.

2

/cc

3

Hi, sorry for the confusion and overlap, but I am the author of that post on stack overflow. The method proposed doesn’t seem to work, as the pigs continued to be white.

4

Any chances to use glTF instead? Many asset loading related issue with OBJ are solved by using the more modern glTF format.

5

The software (sketch up) that I am sketching these models from doesn’t seem to export glTF files. Is there another way that I can solve this?

6

It looks like the OBJ file isn’t being exported correctly… the .obj file mentions a material named “Pig1” but the material in the .mtl is actually named “pigskin”. It looks OK in macOS Quick Look, but it’s broken when I open it in Blender as well. I guess that’s a bug in Sketchup, or some ambiguity in the OBJ spec?

You can re-attach the texture to the model in Blender, though, and that works when exported to glTF. Or edit the OBJ manually to fix the name of the material.

Screen Shot 2020-08-24 at 9.09.05 PM
Screen Shot 2020-08-24 at 9.09.05 PM829×298 164 KB
pig.glb (419.3 KB)

8

Thank you so much! The pig now loads normally.