RenderPass && EffectComposer 渲染通道和特效组合

类似Photoshop等媒体后期软件，
three中特效的叠加也和图层控制的机制相类似。

• RenderPass 原始图像图层
  • 原始图层要放在最底层（第一个加入通道）
• EffectComposer 效果组合器
  • 能够将不同效果图层叠加在一起渲染
  • 效果层加入的顺序会影响最终的渲染结果

要添加效果，首先就需要将原始图层作为图层加入通道。

1
2
3
4
5

import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
const renderScene = new RenderPass(scene, camera)
const effectComposer = new EffectComposer(renderer)
effectComposer.addPass(renderScene)

还需要修改常规每帧renderer.render渲染函数，
这里Wael Yasmina提醒说低版本的threejs不支持在loop函数里用effectComposer重渲染，
我试了下0.133.0版本的threejs，
应该是可以的。
也就是说这里需要修改执行render的对象，
从render改成effectComposer

1

effectComposer.render()