three.js 添加合成效果 EffectComposer

### Three.js 中实现模型描边效果的方法 为了在 Three.js 场景中给特定对象添加描边效果，可以利用 `OutlinePass` 来创建轮廓渲染通道并将其集成到后期处理流程之中。这允许开发者轻松定义哪些对象应该被突出显示以及自定义这些高亮部分的颜色和其他属性。 #### 导入必要的库文件 首先需要导入用于构建后期处理管线的相关类： ```javascript import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'; import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js'; ``` 接着初始化场景、相机等基础组件之后设置 `EffectComposer` 和 `OutlinePass`[^1]。 #### 创建和配置 OutlinePass 实例 通过实例化 `OutlinePass` 并传入视口尺寸参数来启动该功能模块。同时还可以设定默认的边缘颜色以及其他视觉特性： ```javascript const outlinePass = new OutlinePass( new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera ); outlinePass.visibleEdgeColor.set("#ffffff"); // 设置可见边缘颜色为白色 outlinePass.hiddenEdgeColor.set("#00ff00"); // 隐藏区域边缘颜色设为绿色 (可根据需求调整) ``` #### 将 OutlinePass 添加至合成器 一旦完成了上述准备工作，则需把新建立好的 `OutlinePass` 加入到由 `EffectComposer` 构建起来的效果堆栈里去以便于后续执行： ```javascript composer.addPass(outlinePass); ``` 最后，在动画循环内调用 `composer.render()` 而不是直接操作 renderer 进行绘制工作即可完成整个过程。 对于想要针对单个或多个具体目标应用这种特殊样式的情况来说，只需简单地向 `selectedObjects` 属性数组里面追加相应的 Mesh 即可达成目的；如果希望移除某个已有的选中项则反之亦然。 ```javascript // 增加要描边的对象 outlinePass.selectedObjects.push(mesh); // 移除不再需要描边的对象 let index = outlinePass.selectedObjects.indexOf(mesh); if(index !== -1){ outlinePass.selectedObjects.splice(index, 1); } ``` 这样就能够在 Three.js 应用程序当中成功实现了对选定几何体进行描边的功能。