React-Planner集成React应用后Three.js纹理加载失败求助

以下是针对react-planner纹理加载失败的具体排查点：

• 验证资源编译后的实际路径
  在墙体组件代码里添加console.log(textures.bricks.uri)，查看require返回的路径值是base64编码还是相对URL。同时打开浏览器开发者工具的Network面板，过滤图片请求，查看纹理资源的请求状态（是否404），对比请求路径和打包后资源的实际输出位置是否匹配。

• 检查项目的静态资源打包配置
  对比官方Demo的Webpack配置：

  • 确认是否配置了file-loader或Webpack 5的asset模块来处理JPG/PNG文件，输出目录、publicPath是否和官方一致；
  • 如果用Create React App，确认资源目录结构是否符合CRA的静态资源规则，非src目录下的资源是否正确配置了加载方式。

• 排查Three.js TextureLoader的加载逻辑

  • 在applyTexture函数中为loader.load添加错误回调，捕获加载失败的具体原因：

    loader.load(
      texture.uri,
      (tex) => {
        material.map = tex;
        material.needsUpdate = true;
        material.map.wrapS = RepeatWrapping;
        material.map.wrapT = RepeatWrapping;
        material.map.repeat.set(length * texture.lengthRepeatScale, height * texture.heightRepeatScale);
      },
      undefined,
      (error) => console.error('纹理加载出错:', error)
    );
    

  • 确认是否给TextureLoader设置了正确的baseUrl，官方Demo可能通过该属性统一指定资源根路径，而你的项目未配置导致相对路径错误。

• 核对资源路径的准确性

  • 检查代码中资源路径（如./textures/bricks.jpg）和实际文件系统的路径完全一致，包括大小写（Linux/macOS区分大小写，Windows不区分）；
  • 确认资源目录结构和官方Demo一致：官方是放在src目录旁，你是否误将资源放在src内部？

• 检查public目录的使用方式
  如果资源放在项目的public目录下，需使用绝对路径（如/textures/bricks.jpg）而非require引入，因为public目录下的资源会直接复制到输出根目录，不会被Webpack编译处理。

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