Learn Three.js
Third Edition
Programming 3D animations and visualizations for the web with HTML5 and WebGL
Jos Dirksen
BIRMINGHAM - MUMBAI
Learn Three.jsThird Edition
Copyright 2018 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 or its dealers and distributors, will be held liable for any damages caused or alleged to have been 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.
Commissioning Editor: Amarabha Banerjee
Acquisition Editor: Reshma Raman
Content Development Editor: Arun Nadar
Technical Editor: Surabhi Kulkarni
Copy Editor: Safis Editing
Project Coordinator: Sheejal Shah
Proofreader: Safis Editing
Indexer: Mariammal Chettiyar
Graphics: Jason Monteiro
Production Coordinator: Deepika Naik
First published: October 2013
Second edition: March 2015
Third edition: August 2018
Production reference: 1310818
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham
B3 2PB, UK.
ISBN 978-1-78883-328-8
www.packtpub.com
mapt.io
Mapt is an online digital library that gives you full access to over 5,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.
Why subscribe?
Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals
Improve your learning with Skill Plans built especially for you
Get a free eBook or video every month
Mapt is fully searchable
Copy and paste, print, and bookmark content
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 service@packtpub.com 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.
Contributors
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 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.
He is currently working as a freelance full-stack engineer on various Scala and JavaScript project.
Previously, Jos has worked in many different roles in the private and public sectors, ranging from private companies such as ING, ASML, Malmberg, and Philips to organizations in the public sector, such as the Department of Defense.
About the reviewer
Francesco Strazzullo is a frontend engineer and trainer for extrategy. He loves to share what he learns in his job by writing on his blog or presenting a new talk at a conference or a local JavaScript user group. During his free time, he likes to relax by playing with his PlayStation or cooking.
Packt is searching for authors like you
If you're interested in becoming an author for Packt, please visit authors.packtpub.com
and apply today. We have worked with thousands of developers and tech professionals,
just like you, to help them share their insight with the global tech community. You can
make a general application, apply for a specific hot topic that we are recruiting an author
for, or submit your own idea.
Preface
Over the last couple of years, browsers have gotten more powerful and are capable of delivering complex applications and graphics. Most of this, though, is standard 2D graphics. All modern browsers have adopted WebGL, which allows you to not just create 2D applications and graphics in the browser, but also create beautiful and high-performance 3D applications using the capabilities of the GPU.
Programming WebGL directly, however, is very complex. You need to know the inner details of WebGL and learn a complex shader language to get the most out of WebGL. Three.js provides a very easy-to-use JavaScript API around the features of WebGL, so you can create beautiful 3D graphics without having to learn the details of WebGL.
Three.js provides a large number of features and APIs you can use to create 3D scenes directly in your browser. In this book, you'll learn all the different APIs Three.js has to offer through lots of interactive examples and code samples.
Who this book is for
This book is great for everyone who already knows JavaScript and wants to start with creating 3D graphics that run in any browser. You don't need know anything about advanced math or WebGL; all that is needed is a general knowledge of JavaScript and HTML. The required materials and examples can be freely downloaded and all tools used in this book are open source. So, if you've ever wanted to learn how to create beautiful, interactive 3D graphics that run in any modern browser, this is the book for you.
What this book covers
, Creating Your First 3D Scene with Three.js, covers the basic steps you need to take to get started with Three.js. You'll immediately create your first Three.js scene, and at the end of this chapter you'll be able to create and animate your first 3D scene directly in your browser.
, The Basic Components That Make Up a Three.js Application , explains the basic components that you need to understand when working with Three.js. You'll learn about lights, meshes, geometries, materials, and cameras. In this chapter, you also get an overview of the different lights Three.js provides and the cameras you can use in your scene.
, Working with Light Sources in Three.js
Next page