Home Ask Login Register

Developers Planet

Your answer is one click away!

RPBruiser February 2016

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

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).


Falk Thiele February 2016

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 ) {


    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 );



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

Post Status

Asked in February 2016
Viewed 3,691 times
Voted 10
Answered 1 times


Leave an answer

Quote of the day: live life