Learning Three.js: The JavaScript 3D Library for WebGL - Second Edition

422 Pages·2015·16.07 MB·English

by  Jos Dirksen

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
Hemangini Bari
Commissioning Editor
Kunal Parikh
Production Coordinator
Melwyn D'sa
Acquisition Editor
Kevin Colaco
Cover Work
Melwyn D'sa
Content Development Editor
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 ]