如何在Webpack中正确使用THREE.js的JSONLoader？

嘿，我正好踩过类似的坑，来给你捋清楚怎么搞定！

首先明确核心问题：别直接把require("./foobar.json")的结果传给JSONLoader。因为Webpack的require()会自动把JSON文件解析成JavaScript对象，而JSONLoader需要的是一个能通过HTTP请求获取的原始JSON文件路径，直接传解析后的对象肯定会触发Three.js的奇怪错误。

那404的问题怎么解决呢？关键是让Webpack正确处理你的JSON模型文件——把它复制到打包输出目录，同时返回正确的访问路径。具体步骤如下：

1. 安装file-loader #

先安装file-loader来处理静态资源文件：

npm install file-loader --save-dev

2. 配置Webpack规则 #

在你的Webpack配置文件中，添加处理JSON文件的规则，禁用Webpack默认的JSON解析行为，让file-loader负责复制文件并返回路径：

module.exports = {
  // ...其他配置项
  module: {
    rules: [
      // ...其他loader规则
      {
        test: /\.json$/,
        type: 'javascript/auto', // 阻止Webpack自动把JSON解析为JS对象
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]', // 保持原文件名输出
              outputPath: 'models/', // 指定输出到打包目录的models文件夹（可自定义）
              publicPath: 'models/' // 若静态资源有公共路径，这里对应设置
            }
          }
        ]
      }
    ]
  }
};

3. 正确加载模型文件 #

在代码里，通过require()获取Webpack处理后的文件URL，再传给JSONLoader：

var jsonLoader = new THREE.JSONLoader();
// require会返回处理后的模型文件访问路径
var modelUrl = require("./foobar.json");

jsonLoader.load(modelUrl, function(geometry, materials) {
  // 这里正常处理加载后的几何体和材质
  var mesh = new THREE.Mesh(geometry, materials);
  scene.add(mesh);
});

额外提醒 #

如果你用的是Three.js r125及以上版本，JSONLoader已经被官方废弃了，推荐使用ObjectLoader或者更主流的GLTFLoader来加载模型，这些loader在Webpack环境下的适配性会更好哦！

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