Threejs进阶之六：使用EffectComposer后处理实现点击模型发光效果

这一节我们继续对前面的摩托车模型进行研究，前面我们实现了点击摩托车模型的各个部分时弹出HTML标签显示该部分的信息，这一节我们加入后期处理效果，EffectComposer来实现点击模型使其发光的效果，先看下最终的效果图，整体看起来还不错，下面我们来实现它，老规矩，在实现上面的效果之前，我们先来认识下EffectComposer

EffectComposer 效果合成器

EffectComposer是Three.js提供的一个扩展库EffectComposer.js，位于threejsd中examples/jsm/postprocessing/目录下；它用于在three.js中实现后期处理效果。该类管理了产生最终视觉效果的后期处理过程链。 后期处理过程根据它们添加/插入的顺序来执行，最后一个过程会被自动渲染到屏幕上。

构造函数

EffectComposer( renderer : WebGLRenderer, renderTarget : WebGLRenderTarget )
renderer – 用于渲染场景的渲染器。
renderTarget – （可选）一个预先配置的渲染目标，内部由 EffectComposer 使用。

重要属性

.passes : Array类型，一个用于表示后期处理过程链（包含顺序）的数组。

.readBuffer : WebGLRenderTarget类型，内部读缓冲区的引用。过程一般从该缓冲区读取先前的渲染结果。

.renderer : WebGLRenderer类型，内部渲染器的引用。

.renderToScreen : Boolean类型，最终过程是否被渲染到屏幕（默认帧缓冲区）。

.writeBuffer : WebGLRenderTarget类型，内部写缓冲区的引用。过程常将它们的渲染结果写入该缓冲区。

常用方法

.addPass ( pass : Pass ) : 将传入的过程添加到过程链
pass – 将被添加到过程链的过程

.insertPass ( pass : Pass, index : Integer ) : 将传入的过程插入到过程链中所给定的索引处。
pass – 将被插入到过程链的过程。
index – 定义过程链中过程应插入的位置。

.render ( deltaTime : Float ) : 执行所有启用的后期处理过程，来产生最终的帧，
deltaTime – 增量时间

.setPixelRatio ( pixelRatio : Float ) : 设置设备的像素比。
pixelRatio – 设备像素比
该值通常被用于HiDPI设备，以阻止模糊的输出。 因此，该方法语义类似于WebGLRenderer.setPixelRatio()。

.setSize ( width : Integer, height : Integer ) : 设置大小
width – EffectComposer的宽度。
height – EffectComposer的高度。
考虑设备像素比，重新设置内部渲染缓冲和过程的大小为(width, height)。 因此，该方法语义类似于WebGLRenderer.setSize()

引入EffectComposer.js

import {
    EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'

创建后处理对象EffectComposer

//定义全局变量
let composer
// 创建后处理对象EffectComposer，WebGL渲染器renderer作为参数
composer = new EffectComposer(this.renderer)

RenderPass 渲染通道

后处理对象创建好后，我们还需要将其放到渲染器通道中，渲染器通道RenderPass的作用是指定后处理对应的相机camera和场景scene，获得场景的渲染结果，不对渲染结果做特定处理。
简单说就是RenderPass用来生成第一张原始图，用来传给后面通道使用

RenderPass 也是threejs提供的扩展库，位于examples/jsm/postprocessing/目录下，

引入渲染器通道RenderPass

import {
   RenderPass} from 'three/examples/j