1、导入后期处理相关文件

// 效果合成器，负责管理渲染通道
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
// 后期处理中的一个 Pass，用于将场景进行基本的渲染
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
// SMAA
import { SMAAPass } from 'three/examples/jsm/postprocessing/SMAAPass.js';

2、初始化

// 此处的 this.canvasDom 是Three挂载的DOM元素   
// 初始化后期处理
// 更新renderer的像素比
this.renderer.setSize(this.canvasDom.clientWidth, this.canvasDom.clientHeight);
// 初始化EffectComposer
this.composer = new EffectComposer(this.renderer);
this.composer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
// 添加RenderPass
const renderPass = new RenderPass(this.scene, this.camera);
renderPass.clearAlpha = 0;//指定场景在渲染之前是否应清除颜色缓冲区
this.composer.addPass(renderPass);//添加Pass
// 添加SMAA抗锯齿
const pixelRatio = this.renderer.getPixelRatio();// 获取当前渲染器的像素比例
const smaaPass = new SMAAPass(this.canvasDom.clientWidth * pixelRatio,this.canvasDom.clientHeight * pixelRatio);
this.composer.addPass(smaaPass);//添加Pass
按道理就已经完成了，但是，这么添加之后场景的光度会变暗，有BUG，得再添加一个Pass
 
// 导入
import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js';
// 添加OutputPass
const outputPass = new OutputPass();
this.composer.addPass(outputPass);
 
3、把之前requestAnimationFrame里面renderer的渲染关掉，换成后期处理的render
 
  function render() {
    // this.renderer?.render(this.scene, this.camera);
    this.composer?.render();
    requestAnimationFrame(() => render());
ok  解决  真的是撞了个大坑
				Uncaught SyntaxError: The requested module ‘/src/api/**‘ does not provide an export named ‘**‘
					13952