Setting up Three.js for postprocessing
To set up Three.js for postprocessing, we need to make a couple of changes in our current setup. We need to take the following steps:
Create
THREE.EffectComposer, which we can use to add postprocessing passes.Configure
THREE.EffectComposerso that it renders our scene and applies any additional postprocessing steps.In the render loop, use
THREE.EffectComposerto render the scene, apply the passes, and show the output.
As always, we have an example that you can use to experiment with and adopt for your own uses. The first example for this chapter can be accessed from 01-basic-effect-composer.html. You can use the menu in the top-right corner to modify the properties of the postprocessing step used in this example. In this example, we render a simple globe and add an old-television-like effect to it. This television effect is added after the scene is rendered using THREE.EffectComposer. The following screenshot shows this example:
