THREE.JS MTLLoader纹理加载路径错误问题求助

我来帮你搞定这个纹理加载404的问题！从错误信息能看出来，MTLLoader在尝试加载一个带本地绝对路径的纹理（/Users/yuqingyang/...），但你的项目是跑在本地服务器localhost:63342/untitled2/下的，自然找不到这个路径的文件。

问题根源 #

大概率是你的istuff.mtl文件里，纹理路径写的是本地绝对路径（比如导出模型时自动生成的），而不是相对于MTL文件的相对路径。即使你设置了mtlLoader.setTexturePath(".")，MTL里的绝对路径也会覆盖这个配置，导致加载错误。

具体解决方案 #

1. 修改MTL文件中的纹理路径

打开你的istuff.mtl文件，找到类似下面的行：

map_Kd /Users/yuqingyang/Downloads/imac (1)/mac_keyb.jpg

把它改成相对路径，比如如果纹理和MTL文件在同一个目录下，就改成：

map_Kd mac_keyb.jpg

如果纹理在子目录里（比如textures/），就写map_Kd textures/mac_keyb.jpg。

2. 确保纹理文件位置正确

把mac_keyb.jpg放到你的项目根目录（也就是http://localhost:63342/untitled2/对应的本地文件夹），和istuff.mtl、istuff.obj放在一起，或者对应你设置的子目录里。

3. 调整代码（补充回调方便排查）

你的代码本身逻辑没问题，可以补充加载回调来更好地追踪状态，修改后的代码如下：

var objLoader = new THREE.OBJLoader();
var mtlLoader = new THREE.MTLLoader();

// 设置纹理的相对路径，和MTL文件同目录用"./"即可
mtlLoader.setTexturePath("./"); 

mtlLoader.load("istuff.mtl", function (materials) {
    materials.preload();
    objLoader.setMaterials(materials);
    
    // 加载OBJ模型，补充进度和错误回调
    objLoader.load("istuff.obj", function (object) {
        // 模型加载成功后添加到场景
        scene.add(object);
        console.log("模型加载成功！");
    }, function(xhr) {
        console.log(`模型加载进度：${(xhr.loaded / xhr.total * 100).toFixed(2)}%`);
    }, function(error) {
        console.error("加载OBJ模型出错：", error);
    });
}, function(xhr) {
    console.log(`材质加载进度：${(xhr.loaded / xhr.total * 100).toFixed(2)}%`);
}, function(error) {
    console.error("加载MTL材质出错：", error);
});

额外提示 #

如果你的模型是从3D软件（比如Blender）导出的，下次导出时记得选择相对路径导出纹理，避免生成本地绝对路径，这样导入到Three.js里就不会出现这类问题啦。

内容的提问来源于stack exchange，提问作者Kevin Yang