MTLLoader Not Working

Questions
1

Hi,

I created a model with blender. I was successfully able to export the corresponding obj into my Three JS canvas.

Now I’m working on loading the MTL file from my Blender Export.

The weird thing is that for like a split second, it successfully displays the model with the textures applied appropriately on my Three js canvas, and then it suddenly crashes and errors.

This is the error:

TypeError: Cannot set property 'value' of undefined

initMaterial

node_modules/three/build/three.module.js:16198
16195 |   
16196 | if (material.lights) {  
16197 |   // wire up the material to this renderer's lighting state> 
16198 |   uniforms.ambientLightColor.value = lights.state.ambient;        
| ^  16199 |   uniforms.directionalLights.value = lights.state.directional;  
16200 |   uniforms.spotLights.value = lights.state.spot;  
16201 |   uniforms.rectAreaLights.value = lights.state.rectArea;

I am working in React JS so my code might look a little wonky, but here it is:

var mtlLoader = new MTLLoader();
        mtlLoader.load( mtl, material => {
                material.preload();
                var loader = new this.THREE.OBJLoader();
                loader.setMaterials( material );
                loader.load( obj,
                    object => {
                        console.log("entered into the stage");
                        this.treeHead = object;
                        this.treeHead.position.y += 30;
                        this.scene.add(this.treeHead);
                        this.start()

                    },
                    xhr => {console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );},
                    error => {console.log("Error! ", error);}
                );
            },
            xhr => {},
            error => {}
        );

I don’t really understand why its working for only half a second and then crashing.
Your help would be much appreciated!

2

Have you tried to export to model to glTF instead? It’s the recommended 3D format of the project and a better choice than OBJ. More information about glTF and the respective Blender importer/exporter right here:

https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models

3

Ok I got the gLTF loader to work. My issue now is that for some reason its not exporting any of the materials. The model has no color and appears to be black. How would I go about fixing this?

4

Have you added any lights to your scene?

Besides, you can always verify whether or not your glTF asset works by using one of the following viewers.

https://gltf-viewer.donmccurdy.com/
https://sandbox.babylonjs.com/

5

Yes I added an ambient light and three point lights. I see that there is lighting because the model has reflections but it’s still black.

6

Does the model work in the linked viewers?

7

Yes they work. They just don’t have any shading / color. They’re all black.

8

Your issue might be a duplicate of this one:

9

After hours of trying to use MTLLoader and OBJLoader with the code below and it not working I finally solved the issue.

If you are running IIS, ensure you have MIME type entries for both .mtl and .obj files. Set these to application/octet-stream.

I hope this will prevent a lot of pain for others.

The code I finally got to work was

function LoadOBJ()
	{
	  var mtlLoader = new THREE.MTLLoader();
	  mtlLoader.setResourcePath("") ;
	  mtlLoader.setPath("");
	  mtlLoader.load("cube.mtl", function(materials){
	  materials.preload();

      var objLoader = new THREE.OBJLoader();
      objLoader.setMaterials(materials);
      objLoader.setPath("");
	  objLoader.load("cube.obj",
	  
	        function(object)
			 {
			    console.log("Adding Object");
			    //track.add(object);
				track  = object;
				track.position.set(0,0,0);
				scene.add(track);
			 }
		);	
	  });
	  
	 
	}
2 Likes