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

Question

我正在尝试使用从 blender 导出的 .obj 和 .mtl 文件创建场景。该对象实际上只是一个矩形(它需要是一个 .obj 文件。将添加更多对象来创建场景)我能够看到 Material 加载，但看不到在 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 请求，文件路径是正确的)。

Answer 1

这可能是由于 .preload() 方法未在 Material 加载回调中返回的 materials 对象上调用。 preload() 方法主要创建由 MTLLoader 加载的 Material 对象。

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

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() 内部工作原理的三个源代码 - 希望这对您有所帮助!