设置后期处理
设置Three.js库为后期处理做准备，我们需要通过以下步骤对当前的配置进行修改：
- 创建一个
EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。 - 配置该对象，使它可以渲染我们的场景，并应用额外的后期处理步骤。
- 在
render循环中，使用EffectComposer渲染场景、应用通道、并输出结果。
# 创建EffectComposer对象
我们先来看看需要包含的JavaScript文件。这些文件可以在Three.js的发布包里找到，路径是examples/js/postprocessing和examples/js/shaders。
至少包含下面的文件：
<script type="text/javascript" src="../libs/postprogcessing/EffectComposer.js"></script>
<script type="text/javascript" src="../libs/postprogcessing/MaskPass.js"></script>
<script type="text/javascript" src="../libs/postprogcessing/RenderPass.js"></script>
<script type="text/javascript" src="../libs/shaders/CopyShader.js"></script>
<script type="text/javascript" src="../libs/postprogcessing/ShaderPass.js"></script>
2
3
4
5
EffectComposer.js文件提供EffectComposer对象，以便添加后期处理步骤。MaskPass.js、ShaderPass.js和CopyShader.js文件是EffectComposer内部使用的文件。RenderPass.js文件则可以用来在EffectComposer对象上添加渲染通道。如果没有这些通道，我们的场景就不会被渲染。
在这个示例里，我们添加了两个JavaScript文件，用来在场景中添加一种胶片效果：
<script type="text/javascript" src="../libs/postprocessing/FilmPass.js"></script>
<script type="text/javascript" src="../libs/shaders/FilmShader.js"></script>
2
首先我们要创建一个EffectComposer对象，你可以在这个对象的构造函数里传入WebGLRenderer:
var composer = new THREE.EffectComposer(webGLRenderer)
接下来我们要在这个组合器中添加各种通道。
# 为后期处理配置EffectComposer对象
每个通道会按照其加入EffectComposer的顺序执行。第一个要加入的通道是RenderPass。下面这个通道会渲染场景，但不会将渲染结果输出到屏幕上:
var renderPass = new THREE.RenderPass(scene,camera)
composer.addPass(renderPass)
2
创建RenderPass时要传入需要渲染的场景和所用的相机。调用addPass()函数，我们即可将这个RenderPass添加到EffectComposer对象中。接下来我们要添加一个可以将结果输出到屏幕的通道。不是所有的通道都可以做到这一点（稍后解释），但是本例中所用的FilmPass可以将其结果输出到屏幕。要添加FilmPass，我们先要创建该对象，然后添加效果到组合器中。最终的代码大致如下：
var renderPass = new THREE.RenderPass(scene,camera)
var effectFilm = new THREE.FilmPass(0.8,0.325,256,false)
effectFilm.renderToScreen = true
var composer = new THREE.EffectComposer(webGLRenderer)
composer.addPass(renderPass)
composer.addPass(effectFilm)
2
3
4
5
6
7
正如你所看到的，我们创建了一个FilmPass对象，并将他的renderToScreen属性设为true。这个通道是在RenderPass后面添加的，所以如果使用了这个效果组合器，我们就可以看到输入结果。
# 修改渲染循环
现在我们需要稍稍修改一下这个渲染循环，用效果组合器来取代WebGLRender:
var clock = new THREE.Clock()
function render(){
stats.update()
var delta = clock.getDelta()
orbitControls.update(delta)
sphere.rotation.y += 0.002
requestAnimationFrame(render)
composer.render(delta)
}
2
3
4
5
6
7
8
9
10
11
12
这段代码里我们移除了webGLRenderer.render(scene,camera),用composer.render(delta)替代。这将调用EffectComposer的render()函数。由于我们已经将FilmPass的renderToScreen属性设置成true，所以FilmPass的结果将会输出到屏幕上。