.obj Texture and Color Not Showing in Three.js

Question

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.pig model image

We suspect that there is something wrong with the mtl file of the things that became white. The full code and the mtl files are included in this hyperlink.

ippi ippi · Accepted Answer · 2020-08-24T06:20:08

in Pig1.obj you have usemtl Pig1 (use material Pig1) which assumes there is a decleration newmtl Pig1 (new material Pig1) somewhere in Pig1.mtl, but when you check that file, there is no such material, only newmtl pigskin

Solution:

Open Pig1.mtl
Change newmtl pigskin to newmtl Pig1

Or change the usemtl to pigskin in your obj-file, whichever makes you happier.

.obj Texture and Color Not Showing in Three.js

1 Answers