.mtl file is not properly loaded for certain materials

(This is intended.)

(This is when loaded in three js.)

Hi, I am a newbie and I’m trying to load .mtl file with mtl loader with following code.

                const materialLoader = new MTLLoader();


                materialLoader.load('roller.mtl', function(mtl){


                    const loader = new OBJLoader().setMaterials(mtl);


                    loader.load( './roller/roller.obj', function ( obj ) {

                        object = obj;


                        var position = new THREE.Vector3();

                        object.traverse( function ( child ) {

                        if ( child.name == "Cylinder" ) {


                            var boundingBox =child.geometry.boundingBox;


                            position.subVectors( boundingBox.max, boundingBox.min );

                            position.multiplyScalar( 0.5 );

                            position.add( boundingBox.min );

                            position.applyMatrix4( object.matrixWorld );


                                new THREE.Matrix4()







                            child.verticesNeedUpdate = true;

                            child.position.set( position.x, position.y, position.z);

                            child.rotation.z = 2*Math.PI * Math.random();



                    scene.add( object );

                    }, function () {}, function () {} );


As you may notice in the above two pictures, some of materials are loaded properly, but some are not. The materials with .jpg files are loaded well, but without .jpg file not loaded. For example, the metal frame of the center box becomes just white mesh.

This is the .mtl file. roller.mtl (14.1 KB)

Can anyone give me a hint or help?

Probably related: MTLLoader load textures not complete - #5 by Mugen87

I can see similar Kd 0.000 0.000 0.000 in your MTL file, too. I suggest you completely move away from OBJ and use glTF instead (where such material inconsistencies are way more unlikely).

1 Like