Webpack+React生产环境中Three.js OrbitControls实例化报错：TypeError: (void 0) is not a constructor

遇到这种生产环境下Three.js控件被webpack误压缩剔除的问题确实挺闹心的，结合你给出的技术栈（React@16、Webpack@4.44、Three@0.112.1），我帮你梳理下问题根源和可行的解决办法：

问题根源 #

本质是webpack的Tree-Shaking或者压缩插件（比如Terser）把OrbitControls当成了未被使用的代码给剔除/混淆了。早期版本的Three.js中，OrbitControls并不是核心包的标准导出成员，而是放在examples目录下的附加控件，这种非标准的导出方式很容易让旧版本的webpack压缩工具误判，最终导致生产环境中THREE.OrbitControls被替换成void 0（即undefined），自然就会抛出“不是构造函数”的错误。

可行解决办法 #

1. 显式保留OrbitControls引用，避免被Tree-Shaking移除

首先确保你正确引入了OrbitControls，并且通过显式声明告诉webpack这个模块是被使用的：

// 引入核心Three.js
import * as THREE from 'three';
// 显式引入OrbitControls（对应你使用的版本路径）
import 'three/examples/js/controls/OrbitControls';

// 提前将OrbitControls赋值给变量，避免压缩工具混淆
const OrbitControls = THREE.OrbitControls;
// 注意：0.112.1版本的OrbitControls构造函数只需要相机和DOM容器两个参数
this.orbiter = new OrbitControls(this.camera, this.canvasContainer);

你之前实例化时传了4个参数，检查下Three.js 0.112.1的官方文档，这个版本的OrbitControls只需要camera和domElement两个参数，多余的参数可以去掉，避免潜在问题。

2. 配置Webpack的TerserPlugin，保留OrbitControls标识符

Webpack 4默认使用TerserPlugin做代码压缩，你可以在生产环境配置文件中添加规则，告诉它不要混淆OrbitControls这个标识符：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // ...其他生产环境配置
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          mangle: {
            // 保留OrbitControls不被混淆
            reserved: ['OrbitControls']
          }
        }
      })
    ]
  }
};

3. 调整Three.js的引入方式（如果用了单独的npm包）

如果你尝试过单独安装three-orbit-controls这类第三方包，确保引入方式正确，并且不要让Tree-Shaking误判：

import * as THREE from 'three';
// 直接引入构造函数，而非挂载到THREE上
import OrbitControls from 'three-orbit-controls';

// 实例化时直接使用导入的构造函数
this.orbiter = new OrbitControls(this.camera, this.canvasContainer);

4. 升级依赖版本（可选，适合允许版本迭代的项目）

你当前使用的Three.js 0.112.1版本比较陈旧，后续版本（比如0.140+）已经将OrbitControls移到了three/addons/controls/OrbitControls.js，并且采用了ES模块的标准导出方式，和Webpack的兼容性更好。如果项目允许，可以尝试升级Three.js，同时调整引入方式：

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

this.orbiter = new OrbitControls(this.camera, this.canvasContainer);

注意：升级Three.js可能需要调整其他相关代码，建议先在测试环境验证。

额外检查点 #

• 确认Webpack的resolve配置正确识别Three.js的模块路径，避免模块解析错误：

  module.exports = {
    resolve: {
      alias: {
        'three': path.resolve(__dirname, 'node_modules/three')
      },
      extensions: ['.js', '.jsx', '.json']
    }
  };
  

备注：内容来源于stack exchange，提问作者Neeru Rani