Three.js报错求助：THREE.ShaderPass不是构造函数

问题根源 #

• 版本不兼容：你同时使用了r124版本的Three.js核心库、0.126.0版本的GLTFLoader，以及官网未指定版本的后处理脚本，版本差异导致ShaderPass等类无法正常挂载到THREE全局对象上。
• 模块与全局脚本冲突：你的main.js是以ES模块（type="module"）加载的，而引入的后处理脚本是全局脚本，模块环境下无法直接访问全局挂载的类；且高版本Three.js的示例模块不再默认挂载到THREE全局对象。

两种修复方案 #

方案一：统一版本+全局脚本模式（适合新手） #

1. 统一所有Three.js相关资源版本：将所有Three.js扩展脚本替换为和核心库一致的r124版本：
   • 替换GLTFLoader链接：

     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/GLTFLoader.min.js"></script>
     

   • 替换后处理与着色器脚本链接：

     <!-- 后处理相关 -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/EffectComposer.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/ShaderPass.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/RenderPass.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/MaskPass.min.js"></script>
     <!-- 着色器相关 -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/CopyShader.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/HorizontalTiltShiftShader.min.js"></script>
     

2. 修改main.js加载方式：将模块加载改为普通脚本，避免作用域隔离：

   <script src="src/main.js"></script>
   

方案二：ES模块导入（现代规范写法） #

1. 移除全局Three.js脚本：保留cannon.js、dat-gui等非Three.js脚本，删除所有全局引入的Three.js相关脚本。
2. 在main.js中用模块导入所需类：

   // 导入Three.js核心库
   import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.module.js';
   // 导入后处理模块
   import { EffectComposer, ShaderPass, RenderPass } from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/postprocessing.module.js';
   // 导入所需着色器
   import { CopyShader, HorizontalTiltShiftShader } from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/shaders.module.js';
   // 导入GLTFLoader
   import { GLTFLoader } from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/GLTFLoader.module.js';
   
   // 原有业务代码，注意无需添加THREE前缀，直接使用导入的类
   const SCALE = 2;
   
   const hTilt = new ShaderPass(HorizontalTiltShiftShader);
   hTilt.enabled = false;
   hTilt.uniforms.h.value = 4 / (SCALE * window.innerHeight);
   
   const renderPass = new RenderPass(scene, camera);
   const effectCopy = new ShaderPass(CopyShader);
   effectCopy.renderToScreen = true;
   
   const composer = new EffectComposer(renderer);
   composer.addPass(renderPass);
   composer.addPass(hTilt);
   composer.addPass(effectCopy);
   

3. 保持模块加载方式：HTML中继续使用<script type="module" src="src/main.js"></script>。

额外提醒 #

• 不要混合使用全局脚本与ES模块导入Three.js资源，易引发版本冲突和作用域问题。
• 所有Three.js扩展（加载器、后处理、着色器）必须与核心库版本完全一致，否则大概率出现类找不到、方法不兼容等错误。

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