How to load multiple jpg texture files THREE.js with obj + mtl

Question

THREE.js has an easy way to load tga or dds files as textures when loading obj + files.

for ex in their obj + mtl example (https://threejs.org/examples/#webgl_loader_obj_mtl):

// this line adds all the tga texture files
THREE.Loader.Handlers.add( /\.tga$/i, new THREE.TGALoader() );

BUT, my texture files are jpg. HOW do I load them? I've been told I can use TextureLoader, but it doesn't work the same way, I think? What is the proper format? Cuz the textures still aren't popping up.

this is my code:

THREE.Loader.Handlers.add( /\.jpg$/i, new THREE.TextureLoader() );

var mtlLoader = new THREE.MTLLoader();
  mtlLoader.setPath('assets/sac_grain/bag_of_grain/');
  mtlLoader.load( 'sg1.mtl', function( materials ) {
    console.log('mats', materials);
    materials.preload();

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

      object.position.y = 10;
      object.position.x = -10;
      scene.add(object);

    }, onProgress, onError );

  });

When I look at materials in the console, the materialArray is empty, but materialsInfo shows that materials has got the information out of the mtl file.

lsArray:Array(0)
materialsInfo:Object
 default10:Object
  d:"1.0"
  illum:"2"
  ka:Array(3)
  kd:Array(3)
  ke:"0.0 0.0 0.0"
  ks:Array(3)
  map_kd:"textures/burlap.jpg"
  name:"default10"
  ns:"100.0"
... etc ...

Any help would be most appreciated, I've been stuck on this for a couple of days now.

Here is my mtl file:

# Exported from Wings 3D 1.4.1
newmtl default10
Ns 100.0
d 1.0
illum 2
Kd 1.0 1.0 1.0
Ka 1.0 1.0 1.0
Ks 1.0 1.0 1.0
Ke 0.0 0.0 0.0
map_Kd burlap.jpg

newmtl default11
Ns 100.0
d 1.0
illum 2
Kd 1.0 1.0 1.0
Ka 1.0 1.0 1.0
Ks 1.0 1.0 1.0
Ke 0.0 0.0 0.0
map_Kd grains.jpg

it looks like your materials specify the path as textures/burlap.jpg. If in fact the path is assets/sac_grain/bag_of_grain/textures/burlap.jpg you will need to modify the mtl file to suit. This is not a limitation of three.js but in using OBJ files on the web. — Radio
@Radio - thanks for the help. I need to have the full path to the jpg file in the mtl file? Is there a way to just use a relative path? — aeiou
The mtlLoader is not part of the base build of Three.js, it is an example on how to load assets into three.js. Therefore the best place to start is to look at the code. For example the MTL loader is here: github.com/mrdoob/three.js/blob/dev/examples/js/loaders/… A quick study of the class shows the author has provisioned for the very situation by providing functionality and a short explanation at line 61 as of r85. — Radio

mjanisz1 mjanisz1 · Accepted Answer · 2017-05-08T11:30:12

You need to change the texture paths inside the mtl. Use the paths in relation to the js file.

How to load multiple jpg texture files THREE.js with obj + mtl

1 Answers