javascript - 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 的新手，所以我不知道我必须在哪里搜索错误。

控制台中没有抛出错误。

我该如何解决这个问题，以便对象正确加载纹理？

Answer 1

您的代码是正确的。模型已损坏(.mtl = Material 文件中未引用纹理。)

只需将纹理路径添加到 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 文件中。