three.js：MTLLoader 不加载 tga 纹理答案

【问题标题】：three.js: MTLLoader doesn't load tga texturesthree.js：MTLLoader 不加载 tga 纹理
【发布时间】：2016-12-14 11:56:14
【问题描述】：

我导出了一些.obj 文件和相应的.mtl 文件。纹理在同一文件夹中为.tga 格式。

这是我用来加载所有.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);
  });
}

汽车已加载，但纹理未加载。它看起来全白，并且控制台中没有错误。我尝试添加

  mtlLoader.setTexturePath(modelPath);

但它并没有改变任何东西。

我也尝试添加

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

在调用addCar 函数之前。当我这样做时，控制台中会出现一些警告，但纹理仍然没有出现。

在我看到的所有示例中，使用 OBJLoader 和 MTLLoader 时会自动加载纹理，但我没有使用带有 TGA 纹理的 OBJLoader 和 MTLLoader 的任何示例。所以我想知道是否有什么办法让它发挥作用。

任何帮助将不胜感激。

PS：文件（.obj、.mtl 和 .tga）是从 3D max 导出的。

【问题讨论】：

WebGL importing models using the OBJMTLoader in three.js fails的可能重复
MTLLoader 使用 TextureLoader 类来加载图片，afaik 不支持 TGA 图片（这也解释了为什么有一个特定的类来加载 TGA 图片）

标签： three.js tga

【解决方案1】：

如果文件数量不是很大：改变mtl文件的内容，把'tga'变成'jpg'，然后我用photoshop把每个tga文件都变成jpg文件。

【讨论】：

【解决方案2】：

您必须使用 TGALoader 加载 .tga 文件。你可以找到它here。

有关示例，请参阅webgl_materials_texture_tga 来源。

您使用 .tga 纹理而不是 .png 是否有原因？在大多数情况下，它们会给出相同的结果，并且 .png 通常会更小，并且可以由浏览器本地解码，因此您将获得更好的性能。

【讨论】：