如何通过Webpack将THREE设置为全局变量（React/JavaScript环境）

数据老陈

2026-5-20

嘿，很高兴能帮到你！结合你已经尝试过的Webpack方案，我给你整理几个更适配React + Three.js场景的全局配置方法，确保靠谱好用：

方法1：优化Webpack ProvidePlugin配置（对应你试的第4种方法）

你之前用了Webpack的ProvidePlugin，但可能没针对React场景做适配调整。在webpack.config.js里可以这么配置：

const webpack = require('webpack');

module.exports = {
  // 保留你原有的其他配置...
  plugins: [
    new webpack.ProvidePlugin({
      THREE: 'three',
      // 要是你常用Three的子模块（比如OrbitControls），也可以一起全局注册：
      OrbitControls: ['three/examples/jsm/controls/OrbitControls', 'default']
    })
  ]
};

配置完后，在任何React组件里都能直接写const scene = new THREE.Scene()，不用每次手动import。要是你用的是Create React App（CRA），因为它默认隐藏了Webpack配置，得用craco或者react-app-rewired这类工具来修改配置，核心代码和上面一致。

方法2：直接挂载到window对象（简单粗暴但有效）

要是觉得Webpack配置太繁琐，直接在项目入口文件index.js里把Three挂到全局window对象上就行：

import * as THREE from 'three';
window.THREE = THREE;

// 常用子模块也可以一起挂载：
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
window.OrbitControls = OrbitControls;

之后在任何React组件里，直接用THREE或者window.THREE都能调用，比如const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);。不过要是你用TypeScript的话，得额外声明全局类型，不然会有类型报错。

方法3：优化全局导入模块（对应你试的第1种方法）

你之前创建了globals.js但可能没用到点子上，可以调整下这个文件的写法：

import * as THREE from 'three';
// 直接挂载到全局window
window.THREE = THREE;

// 也可以导出，方便某些场景按需引用
export default THREE;

然后在入口文件index.js里只需要导入一次这个文件：

import './globals.js';

这样整个项目里就都能直接使用THREE了，不用在每个组件里重复import。

小提醒

全局变量虽然用着省心，但在大型React项目里，还是更推荐按需import Three的模块，能有效控制打包体积。如果一定要用全局配置，优先选Webpack ProvidePlugin的方案，它会自动做tree-shaking，剔除没用到的Three代码，比直接挂window更高效。另外，要是你用React 18+，Three的渲染循环记得配合useEffect和requestAnimationFrame来写，避免出现内存泄漏的问题。

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