如何解决Laravel 8+React Mix项目引入Three.js时HDR资源无loader报错

根因说明 #

该报错是由于Webpack未配置.hdr格式文件的解析规则，无法识别对应静态资源导致，只需新增对应加载规则即可解决。

操作步骤 #

1. 安装依赖（Webpack 4环境需要） #

如果使用Webpack 4，先安装file-loader：
npm install file-loader --save-dev
yarn安装命令：
yarn add file-loader -D
Webpack 5环境可使用内置asset模块，无需额外安装依赖。

2. 添加Webpack解析规则 #

在项目的webpack配置文件中新增hdr文件的解析规则：

Webpack 4配置示例

module.exports = {
  // 保留原有其他配置
  module: {
    rules: [
      // 保留原有其他规则
      {
        test: /\.hdr$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash].[ext]',
              outputPath: 'assets/hdr',
              publicPath: '/public/assets/hdr'
            }
          }
        ]
      }
    ]
  }
}

Webpack 5配置示例

module.exports = {
  // 保留原有其他配置
  module: {
    rules: [
      // 保留原有其他规则
      {
        test: /\.hdr$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/hdr/[name].[hash][ext]'
        }
      }
    ]
  }
}

3. 重启编译服务 #

配置修改完成后，停止当前运行的编译服务，重新执行npm run dev或npm run watch命令，新配置生效后即可正常加载hdr资源。

代码调用示例 #

通过Three.js RGBELoader加载hdr资源的参考写法：

import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'
// 替换为实际的hdr文件相对路径
import customEnvMap from '../assets/environment.hdr'

new RGBELoader()
  .load(customEnvMap, (texture) => {
    // 自行补充纹理使用逻辑
  })

相关参考截图：

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