three.js: MTLLoader doesn't load tga textures

2019-07-29 10:44发布

问题:

I have an export of some .obj files and corresponding .mtl files. Textures are in .tga format in the same folder.

Here is the code I use to load all my .obj:

function addCar(modelPath, modelName) {
  var mtlLoader = new THREE.MTLLoader();
  mtlLoader.setPath(modelPath);

  for (var i = 0; i <= 2; i++) {
    loadObject(mtlLoader, modelPath, modelName, i);
  }
}

function loadObject(loader, path, name, i) {
  var objectName = name + i + '.obj';

  loader.load(name + i + '.mtl', function (materials) {
    materials.preload();

    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.setPath(path);
    objLoader.load(objectName, function (object) {
      scene.add(object);
    }, function (xhr) {
      onProgress(xhr, objectName)
    }, onError);
  });
}

The car is loaded, but not the textures. It appears all white, and there is no error in the console. I tried to add

  mtlLoader.setTexturePath(modelPath);

but it didn't change anything.

I also tried to add

THREE.Loader.Handlers.add( /\.tga$/i, new THREE.TGALoader() );

before to call addCar function. When I do that, some warning appears in the console, but texture still doesn't appear.

In all examples I saw, textures are loaded automatically when using OBJLoader and MTLLoader, but I didn't any example using OBJLoader and MTLLoader with TGA textures. So I'm wondering if there is something to do to get it worked.

Any help would be appreciated.

PS: the files (.obj, .mtl and .tga) are exported from 3D max).

回答1:

You'll have to use the TGALoader to load .tga files. You can find it here.

See the webgl_materials_texture_tga source for an example.

Is there a reason why you are using a .tga texture instead of .png? For most purposes they will give identical results, and .png will generally be smaller and can be natively decoded by the browser so you'll get better performance.



回答2:

If the number of files is not very big: change the mtl file's content, make 'tga' to 'jpg', then I use photoshop to make every tga file to jpg file.



标签: three.js tga