Table Of ContentLearning Three.js: The
JavaScript 3D Library for
WebGL
Create and animate stunning 3D graphics using the
open source Three.js JavaScript library
Jos Dirksen
BIRMINGHAM - MUMBAI
Learning Three.js: The JavaScript 3D Library
for WebGL
Copyright © 2013 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
Production Reference: 1101013
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78216-628-3
www.packtpub.com
Cover Image by Asher Wishkerman ([email protected])
Credits
Author Project Coordinator
Jos Dirksen Leena Purkait
Reviewers Proofreaders
Andrea Barisone Mario Cecere
Will Crichton Lawrence A. Herman
Yi-Fan Liao
Sebastian Poreba Indexer
Mariammal Chettiyar
I. Abiyasa Suhardi
Graphics
Acquisition Editor
Abhinash Sahu
Kevin Colaco
Production Coordinator
Lead Technical Editor
Arvindkumar Gupta
Arun Nadar
Cover Work
Technical Editors
Arvindkumar Gupta
Anita Nayak
Ritika Singh
About the Author
Jos Dirksen has worked as a Software Developer and Architect for more than
a decade. He has much experience in a large 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 best be 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 an Enterprise Architect for Malmberg, a large Dutch
publisher of educational material. He is helping to create a new digital platform
for the creation and publishing of educational content for primary, secondary,
and vocational education.
Previously, Jos has 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.
Besides his interest in frontend JavaScript and HTML5 technologies, he is also
interested in backend service development using REST and traditional web service
technologies. Jos has already written two books on this subject. He is the coauthor
of the Open Source ESBs in action book that was published in 2008, and in 2012 he
published a book on how to apply SOA Governance in a practical manner. This
book is titled SOA Governance in Action.
Acknowledgement
Writing books is a long and hard effort. I couldn't have done this without the
support and hard work of many others. There are many people I'd like to thank.
First off, my project coordinator Leena Purkait, without whom I would never have
finished all the chapters on time, for coordinating all the details and allowing me to
focus on creating the content. I'd also like to thank Ritika Singh and Anita Nayak for
all the time and effort they spent in finalizing the chapters.
All the other people from Packt Publishing who have helped me during the writing,
reviewing, and laying out 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.
Much thanks go to the reviewers. You provided great feedback and comments that
really helped improve the book. Your positive remarks really helped shape the book!
I haven't mentioned the most important persons yet. I'd like to thank my wife Brigitte,
who once again had to endure me spending my weekends and evenings behind my
laptop, my daughter Sophie for pulling me away from my keyboard and always
making me laugh, and my daughter Amber, who, even though she is just a couple of
weeks old, makes me appreciate the really important things and moments in life.
About the Reviewers
Andrea Barisone works for a leading Italian IT company and has over 13 years
of experience in Information Technology, working on corporate projects as a
Developer using different technologies. He has also strong experience in the
ECM Systems, and several J2EE certifications. He has great ability to acquire new
technologies and to exploit the knowledge acquired while working with different
environments and technologies.
Andrea is a Technical Reviewer for Agile Web Development with Rails 4 by
Pragmatic Bookshelf, and also for BPEL and Java Cookbook by Packt Publishing
(work in progress.)
I would like to thank my parents, Renzo and Maria Carla, for the
gift of life they gave me, my beloved wife Barbara, and my two
wonderful little children, Gabriele and Aurora, for making my life
wonderful every day.
Will Crichton has been a Web Developer for many years. He is currently studying
Computer Science at the Carnegie Mellon University. Previously, he has worked
with a web design company, Webspec Design, and a biotechnology company,
Pioneer Hi-Bred. Beyond just work, Will loves creating web applications—many
merely adopted JavaScript, but he was born to it. He has created several frameworks
and applications by using HTML5 technologies and continues to do more every day.
I'd like to thank my brother, Alex, for his excellent guidance as
a brother and programming mentor, as well as my parents for
supporting me throughout my coding endeavors!
Yi-Fan Liao is a Frontend Developer who is enthusiastic about exploring the
possibilities of the web. He started programming with .NET for building an
online medicine tutoring application in 2004 and is proficient in web application
design, architecture design, and performance tuning. He has expertise in HTML5
multiplayer game development and extensive experience in JavaScript canvas
animation. Yi-Fan loves widget-making and knowledge-sharing. He was a speaker
for Begin Three.js at JSDC 2013 and is located in Taipei, Taiwan.
Sebastian Poreba is a JavaScript Developer with a game development background.
At work, he uses the Google Closure tool chain for data analysis application. After
hours, he plays with WebGL and physics, and blogs at www.smashinglabs.pl
I. Abiyasa Suhardi is an Indonesian guy living a double life in Berlin, Germany.
His day job is as a Frontend Developer doing Flash/Flex, HTML5, and JavaScript
programming. His passion is working on indie game projects in the evenings,
weekends, or whenever he has free time. He is sort of like Batman, but instead of
saving the city himself, he made his game characters the heroes.
He has a Bachelor's Degree in Informatics Engineering, a Master's Degree in Digital
Media, and 9 years of experience working in the IT world, ranging from C/C++ for
an intranet portal, teaching Macromedia Director, founding a J2ME game company,
RIA Development using Flash/Flex, and mobile development with Android and
Adobe AIR, to JavaScript development for backend and frontend.
Currently, he is working in a startup company, while backing up his partner-in-crime,
his wife, in building their own startup.
You can follow his work at http://www.abiyasa.com and connect with him on
Twitter (@abiyasasuhardi).
www.PacktPub.com
Support files, eBooks, discount offers and more
You might want to visit www.PacktPub.com for support files and downloads related
to your book.
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
http://PacktLib.PacktPub.com
Do you need instant solutions to your IT questions? PacktLib is Packt's online
digital book library. Here, you can access, read and search across 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 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 nine entirely free books. Simply use your login credentials
for immediate access.
Table of Contents
Preface 1
Chapter 1: Creating Your First 3D Scene with Three.js 7
Requirements for using Three.js 11
Getting the source code 12
Using Git to clone the repository 13
Downloading and extracting the archive 14
Testing the examples 14
Python-based approach should work on most Unix/Mac systems 15
NPM-based approach if you've got Node.js installed 15
Portable version of Mongoose for Mac/Windows 15
Creating an HTML skeleton page 16
Rendering and viewing a 3D object 19
Adding materials, lights, and shadows 24
Expanding your first scene with animations 27
Introducing the requestAnimationFrame() method 27
Animating the cube 30
Bouncing the ball 30
Using the dat.GUI library to make experimenting easier 32
Using the ASCII effect 33
Summary 35
Chapter 2: Working with the Basic Components That Make
Up a Three.js Scene 37
Creating a scene 37
Basic functionality of the scene 38
Adding the fog effect to the scene 44
Using the overrideMaterial property 45
Working with the Geometry and Mesh objects 46
The properties and functions of a geometry 47
