Book Image

Three.js Cookbook

By : Jos Dirksen
Book Image

Three.js Cookbook

By: Jos Dirksen

Overview of this book

Table of Contents (15 chapters)
Three.js Cookbook
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
Index

Setting up the basic postprocessing pipeline


Besides rendering a scene in 3D, Three.js also allows you to add postprocessing effects to the final output. With postprocessing, you can take the final rendered 2D image and apply all different kinds of filters to it. You could, for instance, add specific blurring effects, sharpen specific colors, and much more. In this recipe, we'll show you how to set up a postprocessing pipeline in Three.js, which you can use to add effects to the final rendered scene.

Getting ready

To work with postprocessing in Three.js, you need to include a number of additional JavaScript files from the Three.js distribution. For this recipe, the following JavaScript files should be added to your HTML page:

  <script src="../libs/postprocessing/CopyShader.js"></script>
  <script src="../libs/postprocessing/EffectComposer.js"></script>
  <script src="../libs/postprocessing/RenderPass.js"></script>
  <script src="../libs/postprocessing...