) {
requestAnimationFrame(this._animate.bind(this))
this.EffectComposer.render()
初始化一个效果组合器
把需要用的若干通道（也就是要进行的操作）依次添加到组合器中
组合器会按顺序执行各通道内的操作，上一通道的操作结果会传递给下一通道，直至最后都操作完，然后渲染到屏幕上
核心函数介绍
EffectComposer 效果组合器
作用：管理了后期处理的过程，根据通道的插入顺序，来执行通道内的代码（主要为着色器代码）
需要传入平时初始化three场景时的渲染器WebGLRenderer, 用来后续渲染场景
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
this.EffectComposer = new EffectComposer(渲染器)
重要方法：
addPass
this.EffectComposer.addPass(通道)
给EffectComposer添加后期处理通道，可以添加多个，依次执行
render
this.EffectComposer.render()
渲染，循环调用通道的render()方法
RenderPass 渲染通道
需要传入初始化场景时生成的场景对象跟相机对象
this.RenderPass = new RenderPass(this.scene, this.camera)
RenderPass通道的作用是把场景和相机作为参数传入，获得场景的渲染结果，不对渲染结果做特定处理。
简单说就是RenderPass用来生成第一张原始图，用来传给后面通道使用，所以一般RenderPass会作为第一个通道
重要属性：
renderToScreen
默认值是false，true将处理的结果保存到帧缓冲区，false直接显示在canvas画布上面。
ShaderPass 着色器通道
需要传入自定义的着色器代码，控制渲染
const effectCopyPass = new ShaderPass(着色器代码)
着色器代码格式可以参照CopyShader.js
three/examples/jsm/shaders/CopyShader.js
threejs.org/examples/?q…
官方有很多封装好的通道，可以拿来直接使用
通道相关代码位置
three/examples/jsm/postprocessing/
电脉冲故障风效果
import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js'
const Pass = new GlitchPass()
Pass.renderToScreen = true
this.EffectComposer.addPass(Pass)
const Pass = new OutlinePass(new THREE.Vector2(this.width, this.height), this.scene, this.camera)
Pass.renderToScreen = true
Pass.visibleEdgeColor = new THREE.Color(76, 148, 156)
Pass.hiddenEdgeColor = new THREE.Color(0, 1, 0)
Pass.edgeGlow = 1.0
Pass.usePatternTexture = false
Pass.edgeThickness = 2.0
Pass.edgeStrength = 2.0
Pass.pulsePeriod = 0
Pass.selectedObjects = [需要添加外边框的网格模型]
this.EffectComposer.addPass(Pass)
BloomPass的参数
strength 泛光效果的强度，值越高明亮区域越明显，较暗区域的亮度也会变高
kernelSize 泛光效果的偏移量
sigma 锐利程度，值越高，泛光越模糊
resolution 泛光效果的解析图，值太低方块化就会加重
import { BloomPass } from 'three/examples/jsm/postprocessing/BloomPass.js'
import { CopyShader } from 'three/examples/jsm/shaders/CopyShader.js'
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'
const Pass = new BloomPass(2.5, 25, 0.1, this.width)
this.EffectComposer.addPass(Pass)
const effectCopyPass = new ShaderPass(CopyShader)
effectCopyPass.renderToScreen = true
this.EffectComposer.addPass(effectCopyPass)
此文只介绍了几个案例的基本使用，只要掌握使用的流程，其他的案例也可以很好的上手
- 3.1w
-
alphardex
three.js
WebGL
- 1.3w
-
Defineee
three.js
JavaScript
- 6913
-
alphardex
three.js
WebGL
- 8142
-
alphardex
WebGL
three.js
- 1.2w
-
alphardex
three.js
WebGL
- 8581
-
Vue.js
JavaScript
WebGL
- 4.9w
-
网易云音乐技术团队
WebGL
three.js
- 1.9w
-
KDDA_
three.js
Vue.js
- 1.1w
-
dragonir
three.js
JavaScript
