How to load textures from OBJ+MTL files in three.js?

11
votes

I have a Maya file exported to OBJ and MTL. I can see the OBJ texture successfully, but how do I actually get the texture in? I looked at the "three.js" format in blender, which appears to be shape only, no texture.

This three.js example appears to load in the obj fine for the shape, but the texture appears to come from a jpg image and not an mtl:

loader.load('textures/ash_uvgrid01.jpg', function(image) {
    texture.image = image;
    texture.needsUpdate = true;
});

My question is, how do I get this "uvgrid01.jpg" image for my model? Is there some way to convert MTL to this .jpg format for the texture only? Or is there some other way I should be exporting the texture to be able to load it in?

1
three.js

1 Answers

14
votes

You can use OBJLoader and MTLLoader, as seen in this example (at least three.js r77):

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('obj/male02/');
mtlLoader.load('male02_dds.mtl', 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);
});