Throughout the chapter, we've worked at creating a pretty-looking 3D rendering by using the most modern browser features. Three.js also has a couple of interesting features that you can use to change the way the output is rendered. Before ending this chapter, I want to introduce you to one of these effects: the ASCII Effect. With the ASCII effect you can change our beautiful animation scene to a retro ASCII art-based animation, with a couple of lines of code. For this you have to change the last couple of lines of our main JavaScript loop from:
$("#WebGL-output").append(renderer.domElement);
To the following:
var effect = new THREE.AsciiEffect( renderer ); effect.setSize( window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
You also have to make a small change to the render
loop. Instead of calling the renderer.render(scene, camera)
method, you have to call the effect.render(scene,camera)
method. The result of this effect is shown in the following screenshot:
I have to admit that it isn't very useful, but it does nicely show you how easy it is to extend various parts of Three.js just because of its modularity.