THREE.js loading obj + mtl with png textures

Question

I'm trying to load mtl file with reference to png textures to my obj model, but I'm getting following error:

TypeError: manager.getHandler is not a function

here is my three.js code:

var loadOBJ = function(){
    var mtlLoader = new THREE.MTLLoader();
    mtlLoader.load( "static/pictures/3D/untitled2.mtl", function( materials ) {
            materials.preload();
            console.log(materials);

            var loader = new THREE.OBJLoader(  );
            loader.load( "static/pictures/3D/jaw.obj", addModelInScene);});
};

var addModelInScene = function(object){
    model = object;
    model.rotation.y = 1.55;
    scene.add(model);
    render();
};

and here is the .mtl file

newmtl Teeth_UDIM
Ns 255.999998
Ka 1.000000 1.000000 1.000000
Kd 0.480000 0.424000 0.480000
Ks 0.040000 0.040000 0.040000
Ni 1.000000
d 1.000000
illum 2
map_Kd mrm.png

mrm.png file is in the same directory as .mtl and .obj file. When I delete the last line from .mtl (map_Kd mrm.png) then error is not displaying, but also textures are not showing. Is there something I'm doing wrong?

Mugen87 Mugen87 · Accepted Answer · 2020-03-25T09:28:13

TypeError: manager.getHandler is not a function

This runtime error indicates that the version of MTLLoader is newer than your three.js version. You always have to ensure that the core file as well as all example files (like OBJLoader or MTLLoader) are from the same release. Using the current release or at least R109 should solve the issue.

BTW: Errors like that can easily be avoided by using the npm package of three.js and node-based workflow with a build tool like rollup.

THREE.js loading obj + mtl with png textures

1 Answers