Three.js 纹理未加载 - 是什么原因导致的？答案

【问题标题】：Three.js texture is not loading - what would cause this?Three.js 纹理未加载 - 是什么原因导致的？
【发布时间】：2019-02-15 05:10:57
【问题描述】：

我正在尝试使用从搅拌机导出的 .obj 和 .mtl 文件创建场景。该对象实际上只是一个矩形（它需要是一个 .obj 文件。将添加更多对象来创建场景）我能够看到材质负载，但看不到在 chrome 或 firefox 中应用的纹理。

the mtl file text

the obj file text

这里是javascript代码：

const obj_loader = new THREE.OBJLoader(),
      mtl_loader = new THREE.MTLLoader();
   
// uses example of OBJ + MTL from three.js/examples
mtl_loader
.setTexturePath('bar/')
.setPath('bar/')
.load('floor.mtl', (materials) => {

  materials.preload()

  obj_loader
  .setMaterials(materials)
  setPath('bar/')
  .load('floor.obj', (object) => {
  
    // everything returns status 200!
    // material is being applied but no texture
    scene.add(object);
  
  })
});

project file structure

检查控制台，对 mtl、obj 和图像文件的请求返回 200 个状态码

but the model renders without texture

控制台中根本没有错误。什么会在 Three.js 中导致这个问题？我怀疑 .obj 或 .mtl 有问题，但我找不到问题所在。（根据记录的 ajax 请求，文件路径是正确的）。

【问题讨论】：

标签： javascript 3d

【解决方案1】：

这可能是由于在材质加载回调中返回的materials 对象上没有调用.preload() 方法。 preload() 方法基本上是创建MTLLoader 加载的材质对象。

考虑以下更新，添加此方法调用：

const mtl_loader = new THREE.MTLLoader();    
mtl_loader.setTexturePath('bar/');
mtl_loader.setPath('bar/');
mtl_loader.load('floor.mtl', function(materials) {

  // Add this (see link below for more detail)
  materials.preload()

  const obj_loader = new THREE.OBJLoader();
  obj_loader.setMaterials(materials);
  obj_loader.setPath('bar/');
  obj_loader.load('floor.obj', function(object) {

    scene.add(object);  
  })
});

Here is a link 到三个源代码，它显示了.preload() 的内部工作原理 - 希望这会有所帮助！

【讨论】：

我手动复制了代码，因为复制/粘贴在我的终端上不能很好地播放（并且错过了 OP 中的那一行，但它是原始源代码的一部分）。事实证明这是 Blender 导出的模型的问题。我将更新我的问题以显示出了什么问题

【解决方案2】：

原来是纹理的 UV 映射存在问题。在 Blender 中，您可以创建纹理，Blender 将在“渲染”模式下显示纹理，即使未设置 UV 贴图（它会自动包裹）。

Blender showing render, even without UV Map

这尤其令人沮丧，因为我在导出文件时有这些设置：

export settings for OBJ

MTL 和 OBJ 文件中似乎包含所有内容，但通过手动对纹理进行 UV 映射（而不是在“纹理”菜单中使用简单的重复），当我再次导出时问题得到了解决。

UV/Image editor needed to be used

对于可能造成的任何混淆，我们深表歉意。我希望它对从 Blender 导出时遇到相同问题的任何人有所帮助。

【讨论】：