Three.js引入FXAAShader报错：Uncaught ReferenceError: THREE is not defined

问题根源 #

你导入的FXAAShader来自three/examples/js/shaders/FXAAShader，这个路径下的文件是非ES模块版本，内部直接依赖全局的THREE对象，但你的项目用的是ES模块导入（import * as THREE from 'three'），全局环境中并没有挂载THREE，所以触发了引用错误。

直接解决方案 #

将FXAAShader的导入路径替换为jsm目录下的ES模块版本：

修改前导入代码：

import { FXAAShader} from 'three/examples/js/shaders/FXAAShader'

修改后：

import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';

补充说明 #

• three.js的examples/js/目录下的脚本是为传统全局引入场景设计的，会直接使用window.THREE；而examples/jsm/目录下的脚本是专门适配ES模块的，内部会通过import语句从three核心包引入所需对象（比如THREE.Vector2），不会依赖全局变量。
• 修正导入后，你原来创建FXAAShaderPass的代码可以正常运行，建议在窗口resize时同步更新分辨率参数，避免窗口大小变化后抗锯齿失效：

window.addEventListener('resize', () => {
  const pixelRatio = Math.min(window.devicePixelRatio, 2);
  fxaaPass.material.uniforms.resolution.value.x = 1 / (window.innerWidth * pixelRatio);
  fxaaPass.material.uniforms.resolution.value.y = 1 / (window.innerHeight * pixelRatio);
});

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