Learn Three.js - Third Edition

Updating the render loop

Now, we just need to make a small modification to our render loop, to use the composer instead of a THREE.WebGLRenderer:

  function render() {    stats.update();    var delta = clock.getDelta();    trackballControls.update(delta);    earth.rotation.y += 0.001;    pivot.rotation.y += -0.0003;    // request next and render using composer    requestAnimationFrame(render);    composer.render(delta);  }

The only modification that we made is that we removed renderer.render(scene, camera) and replaced it with composer.render(delta).  This will call the render function on EffectComposer, which, in turn, uses the passed-in THREE. WebGLRenderer; and, since we set the renderToScreen of FilmPass to true, the result from FilmPass is shown on the screen. ...