Three.js加载.mtl和.obj - 对象保持白色

Question

我想在不同的位置加载具有不同纹理的对象 - 所以我查看了由three.js提供的示例，在https://threejs.org/examples/webgl_loader_obj_mtl.html。该对象正在加载，但它没有不同的纹理。

这是我输入的代码：

// LOAD TREE Example 
    var mtlLoader = new THREE.MTLLoader(); 
    mtlLoader.setPath("Assets/Objects/Tree_V9_OBJ/"); 
    mtlLoader.load("Tree_V9_Final.mtl", function(materials){ 
     materials.preload(); 
     console.log(materials); 
     var objLoader = new THREE.OBJLoader(); 
     objLoader.setMaterials(materials); 
     objLoader.setPath('Assets/Objects/Tree_V9_OBJ/'); 
     objLoader.load('Tree_V9_Final.obj', function(object){ 
      console.log(object); 
      object.scale.x = 10; 
      object.scale.y = 10; 
      object.scale.z = 10; 
      scene.add(object); 
     }); 
    }); 

我的文件夹结构：

结果：

控制台输出

对象的来源：

http://tf3dm.com/3d-model/tree-for-modification-v9-16618.html

我是新来three.js所，所以我不知道我要寻找的bug。

控制台中没有错误。

我该如何解决这个问题，让对象正确地使用纹理加载？

Answer 1

您的代码是正确的。该模型被打破（纹理不在.mtl =材料文件引用。）

只需添加纹理路径到Tree_V9_Final.mtl：

# Blender MTL File: 'Tree_V9_Final.blend' 
# Material Count: 4 

newmtl bark_tree 
Ns 96.078431 
Ka 0.000000 0.000000 0.000000 
Kd 0.640000 0.640000 0.640000 
Ks 0.500000 0.500000 0.500000 
Ni 1.000000 
d 1.000000 
illum 2 
map_Kd bark_tree.jpg 

newmtl leaves_01 
Ns 96.078431 
Ka 0.000000 0.000000 0.000000 
Kd 0.640000 0.640000 0.640000 
Ks 0.500000 0.500000 0.500000 
Ni 1.000000 
d 1.000000 
illum 2 
map_Kd leaves_01.jpg 

newmtl leaves_02 
Ns 96.078431 
Ka 0.000000 0.000000 0.000000 
Kd 0.640000 0.640000 0.640000 
Ks 0.500000 0.500000 0.500000 
Ni 1.000000 
d 1.000000 
illum 2 
map_Kd leaves_02.jpg 

newmtl leaves_03 
Ns 96.078431 
Ka 0.000000 0.000000 0.000000 
Kd 0.640000 0.640000 0.640000 
Ks 0.500000 0.500000 0.500000 
Ni 1.000000 
d 1.000000 
illum 2 
map_Kd leaves_03.jpg 

注意

你的模型还提供正常的地图和树叶的alpha地图。我建议你阅读.mtl specification，这样你可以在.mtl文件中添加这些文件。