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 文件中。

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

Three.js Loading .mtl and .obj - object stays white

javascript

.obj

three.js