Three.js Essentials: Create and animate beautiful 3D graphics with this fast-paced tutorial

198 Pages·2014·5.91 MB·English

by  Jos Dirksen

www.it-ebooks.info
Three.js Essentials
Create and animate beautiful 3D graphics with
this fast-paced tutorial
Jos Dirksen
BIRMINGHAM - MUMBAI
www.it-ebooks.info
Three.js Essentials
Copyright © 2014 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: July 2014
Production reference: 1300614
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78398-086-4
www.packtpub.com
Cover image by Suyog Gharat ([email protected])
www.it-ebooks.info
Credits
Author Project Coordinator
Jos Dirksen Lima Danti
Reviewers Proofreaders
Samrat Ambadekar Maria Gould
Chris "2pha" Brown Ameesha Green
Justin Tolman
Indexers
Mehreen Deshmukh
Commissioning Editor
Ashwin Nair Tejal Soni
Acquisition Editor Production Coordinator
Rebecca Pedley Kyle Albuquerque
Content Development Editor Cover Work
Akshay Nair Kyle Albuquerque
Technical Editors
Taabish Khan
Pooja Nair
Copy Editors
Sarang Chari
Gladson Monteiro
www.it-ebooks.info
About the Author
Jos Dirksen has worked as a software developer and architect for more than a
decade. He has quite a lot of experience in a large range of technologies that range
from backend technologies, such as Java and Scala, to frontend development
using HTML5, CSS, and JavaScript. Besides working with these technologies, he
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 currently works as an enterprise architect for Malmberg, a large Dutch publisher
of educational material. He helps to create a new digital platform for the creation and
publication of educational content for primary, secondary, and vocational education.
Previously, he 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 already written a book on Three.js named Learning Three.js: The JavaScript 3D
Library for WebGL, Packt Publishing, which is an in-depth description of all the features
Three.js provides. Besides his interest in frontend JavaScript and HTML5 technologies,
he is also interested in backend service development using REST and traditional web
service technologies. He has already written two books on this subject. He is the
co-author along with Tijs Rademakers of Open-Source ESBs in Action, Manning
Publications, an action book that was published in 2008. In 2012, he published a book on
how to apply SOA Governance in a practical manner, titled SOA Governance in Action,
Manning Publications.
www.it-ebooks.info
Acknowledgment
Writing a book isn't something you do by yourself. A lot of people have helped
and supported me when I was doing this, and my special thanks go out to the
following people:
• All the guys from Packt Publishing who have helped me during the writing,
reviewing, and laying out part 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 have provided me with great
feedback and comments that really helped me improve the book;
their positive remarks have really helped me 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 can always find reasons
to pull me away from the keyboard and computer.
www.it-ebooks.info
About the Reviewers
Samrat Ambadekar is a user experience and interaction designer based in
California, U.S. He holds a Master's degree in Human Computer Interaction from the
Georgia Institute of Technology, Atlanta. He has more than five years of experience
as a designer and a developer. His work and interests span across interaction design,
interactive environments, augmented reality, and information visualization. You can
track him at www.samratambadekar.com.
Chris "2pha" Brown is a web and Drupal developer based out of Brisbane,
Australia. He has been dabbling with 3D from around 2003 when he started making
custom characters and mods for Unreal Tournament 2003. Since then, he has kept
his 3D skills up to date by occasionally working on both personal and professional
3D projects. After completing a multimedia degree in 2007, he went into a Flash
developer role where he discovered Papervision3D, which allowed his 3D creations
to be visualized on the Web via Flash. With new tools and technologies such as
HTML5 and Three.js becoming more popular and widespread, he has incorporated
these into his 3D/web workflow. When not creating awesome stuff with Drupal,
Three.js, and 3D, he can be found trying to get a knee down on his bike or sitting
on a beach in Thailand. You can keep up to date with him at www.2pha.com.
www.it-ebooks.info
Justin Tolman currently works as a contract-based web and mobile developer in
Boise, Idaho. Programming and electronics have interested him since childhood. He
started building websites in 2005 and has worked with WebGL and Three.js since
2011. On the mobile side of things, he has written native applications for Android
and iOS devices. His favorite operating system is Linux. He has trouble deciding
between Firefox and Chrome, so we'll just say that his favorite browser is not Internet
Explorer. He has also dabbled in robotics and automation. He has done technical
support work for a US Defense contractor, and is a former military intelligence
cryptographer and linguist for the US Army.
In addition to his experience with a wide range of technologies and a variety of
programming languages, Justin also has a keen interest in human languages. He is
a native English speaker, is fluent in Thai, and has also studied Laotian, Spanish,
and Arabic. In his spare time, he enjoys reasoning puzzles and games, reading,
and outdoor activities. He has a scuba diving certification and is a member of Mensa.
I would like to thank the developers and contributors of Three.js for
creating a great library of tools for 3D on the Web.
www.it-ebooks.info
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.
www.it-ebooks.info
Table of Contents
Preface 1
Chapter 1: Get Up and Running with Three.js 7
Introducing Three.js 8
Looking at the requirements for Three.js 9
Setting up a local development environment 11
Getting the source code 11
Setting up a local web server 12
Using Python to run a web server 13
Using the npm command from Node.js to run a web server 13
Running a portable version of Mongoose 14
Creating a minimal Three.js web application 14
Creating a scene to contain all the objects 15
Adding a mesh created from geometry 18
What are vertices? 20
Combining vertices into faces 21
Enhancing the basic scene 22
Adding easy controls with the dat.GUI library 22
Add a statistics element to show the frame rate 24
Debugging the examples in this book 25
Using console logging for debugging 25
Looking at objects with breakpoints in Chrome 27
Summary 28
Chapter 2: Creating a 3D World Globe and Visualizing Open Data 29
Setting up the globe and camera controls 30
Adding basic textures to the globe 32
Adding directional and ambient lighting 35
Combining with a starry background 37
www.it-ebooks.info