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

Question

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

这是我输入的代码：

   // 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文件中添加这些内容。