How to add a MTL texture to an OBJ in three.js

Question

Hello so I am trying to figure out how to add an MTL file to my OBJ in three.js. I had my OBJ loaded and was coming back to fix this issue. Now when I added the code for the MTL file to be loaded using MTLLoader it is not getting passed mtlLoader.load(url, ....) (as in after adding this bit of code now only the scene is being rendered with nothing inside of it). I am using alerts to track the progress of the code and am getting alerts from before this statement but not after. All of the solutions I have found include using OBJMTLLoader which is no longer part of the current version of three.js (r74).

Answer 1

This code is taken from the official example of loading an obj + mtl:

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl( 'obj/male02/' );
mtlLoader.setPath( 'obj/male02/' );
var url = "male02_dds.mtl";
mtlLoader.load( url, function( materials ) {

    materials.preload();

    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials( materials );
    objLoader.setPath( 'obj/male02/' );
    objLoader.load( 'male02.obj', function ( object ) {

        object.position.y = - 95;
        scene.add( object );

    }, onProgress, onError );

});

http://threejs.org/examples/#webgl_loader_obj_mtl

You assign the materials to the OBJ now via:

objLoader.setMaterials( materials );

If you want to manipulate the materials, what the mtlLoader is giving you in the callback is an instance of THREE.MTLLoader.MaterialCreator. So you can get the materials with materials.getAsArray() for example. See the source for all possible functions: https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/MTLLoader.js#L138-L417