OBJLoader and MTLLoader aren't rendering png/texture in ThreeJS

Question

I imported the 3D model that contains .obj .mtl and bunch of jpeg and pngs

trying to load the model with /images like this

But, I'm getting is only a black model like his
my canvas rendering

I wonder what I have missed as I followed the guidelines for using the two loaders.

here is my code.

//loader 
var MTTLoader = new THREE.MTLLoader();
MTTLoader.setPath( '/assets/HotAirBalloonIridesium/' );
MTTLoader.load('Air_Balloon.mtl',(materials) => {
    console.log(materials);
    materials.preload()
    var objLoader = new THREE.OBJLoader();
    objLoader.load('/assets/HotAirBalloonIridesium/Air_Balloon.obj', (object) => {
        console.log(materials)
        objLoader.setMaterials(materials)
        scene.add(object);
    })
})

I wonder what i'm missing as my asset folder contains all the model files

score 0 · Answer 1 · answered Aug 24 '17 at 07:22

try loading obj using

    var loader = new THREE.OBJLoader( manager );
            loader.load( 's_v1.obj', function ( object ) {

                object.traverse( function ( child ) {

                    if ( child instanceof THREE.Mesh ) 
                    {

                        // child.material.map = texture2;
                        // child.material.specularMap=texture;
                        // child.material.map=texture;

                    }
                } );

                // object.position.x = - 60;
 //                object.rotation.x = 0; //20* Math.PI / 180;
 //                object.rotation.z = 0;//20* Math.PI / 180;
                object.scale.x = 80;
                object.scale.y = 80;
                object.scale.z = 80;
                obj = object
                scene.add( obj );
                animate(obj);

            } );

Can't seems to fix the problem. i've uploaded the same obj and mtl file to an online viewer to double check that the problem is with the way i'm loading it. the object was loaded with material just fine. Thanks for your help though. — Nawar Tamawi, Aug 24 '17 at 16:42

score 0 · Answer 2 · answered Sep 01 '17 at 17:55

okay quick update, there was nothing wrong with the loader but I was using the wrong lighting as Phong Material needed

var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.50);

var dirLight = new THREE.DirectionalLight(0xffffff, 0.50);

to be apparent.

score 0 · Answer 3 · answered Dec 21 '19 at 06:56

You must call "setMaterials" before load obj.

//loader 
var MTTLoader = new THREE.MTLLoader();
MTTLoader.setPath( '/assets/HotAirBalloonIridesium/' );
MTTLoader.load('Air_Balloon.mtl',(materials) => {
    console.log(materials);
    materials.preload()
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials); // "setMaterials" must before "load"
    objLoader.load('/assets/HotAirBalloonIridesium/Air_Balloon.obj', (object) => {
        console.log(materials)
        scene.add(object);
    })
})

OBJLoader and MTLLoader aren't rendering png/texture in ThreeJS

3 Answers3