O'Reilly logo

Learning Three.js: The JavaScript 3D Library for WebGL by Jos Dirksen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using the ASCII effect

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); ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required