Three.js中FBXLoader无法定位纹理文件夹的问题求助

嘿，我来帮你捋捋这个Three.js纹理加载的问题～看了你的描述和代码，问题主要出在几个细节上，咱们一步步来解决：

核心问题分析 #

1. TextureLoader加载路径错误
   你代码里写的texture = textureLoader.load(assetPath);明显有问题——assetPath是文件夹路径，不是具体的纹理文件路径啊！你有4张纹理，得给每张纹理指定完整的文件路径（比如assetPath + '你的纹理文件名.jpg'），不然加载器根本不知道要加载哪个文件，必然返回404。

2. 路径末尾的斜杠遗漏
   如果你的assetPath没有以斜杠结尾（比如写成'assets'而不是'assets/'），那拼接后的路径会变成'assetstexture.jpg'这种无效路径，这也是常见的404原因。

3. LoadingManager未正确绑定
   你说尝试了LoadingManager但没效果，大概率是没把它和所有加载器（FBXLoader、TextureLoader）绑定起来，统一管理资源路径才是它的正确用法。

修正后的代码示例 #

下面是调整后的代码，解决了上述问题：

// 确保assetPath末尾带斜杠，避免路径拼接错误
const assetPath = './assets/';

// 创建统一的加载管理器，所有加载器共用它
const loadingManager = new THREE.LoadingManager();
// 设置资源（纹理等）的基础路径
loadingManager.setResourcePath(assetPath);

// 用同一个manager初始化FBXLoader，自动关联资源路径
const fbxLoader = new THREE.FBXLoader(loadingManager);
// 设置FBX文件的加载路径
fbxLoader.setPath(assetPath);

// 同样用这个manager初始化TextureLoader，保证路径一致
const textureLoader = new THREE.TextureLoader(loadingManager);

// 加载FBX模型
fbxLoader.load(
  'model.fbx',
  (model) => {
    // 情况1：模型本身已经关联了纹理，此时LoadingManager会自动用resourcePath找纹理
    // 情况2：如果需要手动加载纹理，要指定具体文件名
    // 比如加载其中一张纹理并替换材质
    textureLoader.load('texture1.png', (tex) => {
      // 遍历模型所有网格，设置纹理
      model.traverse((child) => {
        if (child.isMesh) {
          child.material = new THREE.MeshBasicMaterial({ map: tex });
          child.material.needsUpdate = true;
        }
      });
    });

    // 记得把模型添加到场景
    scene.add(model);
  },
  (progress) => {
    console.log(`加载进度：${((progress.loaded / progress.total) * 100).toFixed(2)}%`);
  },
  (error) => {
    console.error('加载失败：', error);
  }
);

额外注意事项 #

• 文件名大小写一致：FBX模型内部记录的纹理文件名要和assets文件夹里的完全一致（比如Texture.jpg和texture.jpg在Mac/服务器环境下是两个不同的文件）。
• 本地服务器运行：如果是直接用file://协议打开HTML文件，可能会触发跨域限制导致纹理加载失败，建议用本地服务器（比如VS Code的Live Server插件、Vite等）运行项目。
• 打包工具配置：如果用了Vite/Webpack等打包工具，要确保assets文件夹被配置为静态资源目录，打包后纹理文件能被正确访问到。

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