如何正确为Three.js项目导入模块解决RenderPass构造函数报错

问题原因 #

你当前混用了 Three.js 的两种加载模式，才触发了该报错：
你拷贝的three/examples/js/目录下的文件为UMD格式，会自动将RenderPass、UnrealBloomPass等后期处理类挂载到全局的THREE对象上；但你在index.js中通过ES模块语法导入的three.module.js本身不包含这些后期处理类，也不会读取全局挂载的内容，因此THREE.RenderPass不存在。

解决方案二选一即可，不要混用两种模式 #

方案1：全用全局非模块化模式

• 删掉index.html中index.js引入标签的type="module"属性，改为普通脚本引入
• 删掉index.js开头的import * as THREE from "../module/three.module.js"代码，直接使用全局的THREE对象即可，你提前引入的Pass文件已经将相关类挂载到了全局THREE上，可以直接调用new THREE.RenderPass。

方案2：全用ES模块化模式（更推荐，符合现代前端开发规范）

• 不要使用three/examples/js/下的文件，改为拷贝three/examples/jsm/目录下的模块化版本后期处理文件
• 删掉index.html中除<script type="module" src="index.js"></script>之外的所有EffectComposer.js、RenderPass.js等后期处理脚本引入、以及全局版three.js的引入
• 在index.js中单独导入需要的依赖：

import * as THREE from "../module/three.module.js";
import { EffectComposer } from "../module/EffectComposer.js";
import { RenderPass } from "../module/RenderPass.js";
import { UnrealBloomPass } from "../module/UnrealBloomPass.js";
// 其他用到的Pass类按同样格式导入即可

• 实例化时不需要加THREE.前缀，直接调用即可：

const renderScene = new RenderPass(scene, camera);

注意事项 #

两种加载模式不能混用，选其中一种全程使用即可避免该类报错。如果选用模块化方案，所有Three.js的扩展组件都需要单独从对应的jsm文件导入，不会自动挂载到THREE对象上。

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