Learning Three.js – the JavaScript 3D Library for WebGL Second Edition Create stunning 3D graphics in your browser using the Three.js JavaScript library Jos Dirksen BIRMINGHAM - MUMBAI Learning Three.js – the JavaScript 3D Library for WebGL Second Edition Copyright © 2015 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: October 2013 Second edition: March 2015 Production reference: 1250315 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-78439-221-5 www.packtpub.com Credits Author Project Coordinator Jos Dirksen Danuta Jones Reviewers Proofreaders Adrian Parr Simran Bhogal Pramod S Maria Gould Sarath Saleem Paul Hindle Cesar Torres Indexer Commissioning Editor Hemangini Bari Kunal Parikh Production Coordinator Acquisition Editor Melwyn D'sa Kevin Colaco Cover Work Content Development Editor Melwyn D'sa Arwa Manasawala Technical Editor Humera Shaikh Copy Editors Sarang Chari Relin Hedly About the Author Jos Dirksen has worked as a software developer and architect for more than a decade. He has a lot of experience in a wide range of technologies, ranging from backend technologies, such as Java and Scala, to frontend development using HTML5, CSS, and JavaScript. Besides working with these technologies, Jos also regularly speaks at conferences and likes to write about new and interesting technologies on his blog. He also likes to experiment with new technologies and see how they can be best used to create beautiful data visualizations, the results of which you can see on his blog at http://www.smartjava.org/. Jos is currently working as a consultant for a large Dutch financial institution and has just finished a function as an enterprise architect for Malmberg, a large Dutch publisher of educational material. There, he helped to create a new digital platform for the creation and publishing of educational content for primary, secondary, and vocational education. Previously, Jos worked in many different roles in the private and public sectors, ranging from private companies, such as Philips and ASML, to organizations in the public sector, such as the Department of Defense. Jos has also written two other books on Three.js—Three.js Essentials, which uses an example-based approach to explore the most important feature of Three.js, and Three.js Cookbook, which provides a recipe-based approach to cover important use cases of Three.js. Besides his interest in frontend JavaScript and HTML5 technologies, he is also interested in backend service development using REST and traditional web services. Acknowledgments Writing a book isn't something you do yourself. A lot of people helped and supported me when I was writing this book. Special thanks to the following people: • All the guys from Packt who helped me during the writing, reviewing, and layout parts of the process. Great work guys! • I, of course, have to thank Ricardo Cabello, also known as "Mr. dò_ób", for creating the great Three.js library. • Many thanks go to the reviewers. They gave great feedback and comments that really helped improve the book. Your positive remarks really helped shape the book! • And, of course, I'd like to thank my family. I'd like to thank my wife, Brigitte, for supporting me, and my two girls, Sophie and Amber, who always can find reasons to pull me away from the keyboard and computer. About the Reviewers Adrian Parr is a BAFTA-winning freelance frontend developer from London, UK. He has been creating interactive content since 1997, starting with CD-ROMs in Macromedia Director, websites using tables, mobile sites using WAP, and coding games in Flash 4. With his experience in developing content and managing technical teams, he has been hired by many London agencies, large and small. After a long period of specializing in the Adobe Flash Platform as an ActionScript developer, he is now focused on open web standards (HTML5, CSS3, and JavaScript). He is currently playing with AngularJS, D3, Phaser, SVG animation, Processing, Arduino, Python on Raspberry Pi, and, of course, WebGL using Three.js. Outside of work, he enjoys cycling, windsurfing, and snowboarding. You can connect with him using the following platforms: • Blog: www.adrianparr.com • Twitter: www.twitter.com/adrianparr • CodePen: www.codepen.io/adrianparr • LinkedIn: www.linkedin.com/in/adrianparr Pramod S has more than 8 years of experience in the field of graphics programming using OpenGL and WebGL. He has worked on a few game titles for PC, console, and mobile platforms. He is currently working as a technical leader in one of the Fortune 100 companies in the area of 3D visualization. I appreciate our predecessors who have worked intensively to make graphics and the 3D library what they are today. Sarath Saleem is a JavaScript developer with a strong background in web application development. With years of experience from various organizations in the IT industry, he has gained immense expertise in creating large-scale web tools, performance optimization, and JavaScript architecture. At present, he is working for a web hosting company in Dubai besides pursuing his master's in software engineering from BITS, Dubai. During his free time, he polishes his passion for blending technology and the arts to enable creative growth. He is passionate about interactive data visualization, web 2D/3D graphics, and theoretical physics. He maintains http://graphoverflow.com, a collection of visualizations; you can connect with him on Twitter at @sarathsaleem. Cesar Torres is a computer science PhD student at the University of California Berkeley. His research projects explore digital fabrication technologies as exciting, critical new media. Using frameworks such as Three.js, he builds computational design tools that aim to expand aesthetics and design practices as a vehicle for more engaging STEM education. www.PacktPub.com Support files, eBooks, discount offers, and more For support files and downloads related to your book, please visit www.PacktPub.com. Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. TM https://www2.packtpub.com/books/subscription/packtlib Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books. Why subscribe? • Fully searchable across every book published by Packt • Copy and paste, print, and bookmark content • On demand and accessible via a web browser Free access for Packt account holders If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view 9 entirely free books. Simply use your login credentials for immediate access. Table of Contents Preface vii Chapter 1: Creating Your First 3D Scene with Three.js 1 Requirements to use Three.js 5 Getting the source code 6 Using Git to clone the repository 7 Downloading and extracting the archive 8 Testing the examples 8 Python-based web servers should work on most Unix/Mac systems 9 Npm-based web server if you've worked with Node.js 9 Portable version Mongoose for Mac and/or Windows 9 Disabling security exceptions in Firefox and Chrome 10 Creating the HTML skeleton 12 Rendering and viewing a 3D object 14 Adding materials, lights, and shadows 19 Expanding your first scene with animations 22 Introducing requestAnimationFrame 22 Animating the cube 24 Bouncing the ball 25 Using dat.GUI to make experimenting easier 26 Automatically resize the output when browser size changes 28 Summary 29 Chapter 2: Basic Components That Make Up a Three.js Scene 31 Creating a scene 31 Basic functionality of a scene 32 Adding fog to the scene 38 Using the overrideMaterial property 40 [ i ] Table of Contents Geometries and meshes 41 The properties and functions of a geometry 42 Functions and attributes for meshes 48 Different cameras for different uses 54 Orthographic camera versus perspective camera 55 Looking at specific points 61 Summary 63 Chapter 3: Working with the Different Light Sources Available in Three.js 65 Different kinds of lighting provided by Three.js 66 Basic lights 66 THREE.AmbientLight 67 Using the THREE.Color object 69 THREE.PointLight 72 THREE.SpotLight 76 THREE.DirectionalLight 81 Special lights 84 THREE.HemisphereLight 84 THREE.AreaLight