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
Chapter 1, 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.
Chapter 2, 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.
Chapter 3, Working with Light Sources in Three.js, dives deeper into the different lights you can use in your scene. It shows examples and explains how to use a SpotLight, a DirectionLight, an AmbientLight, a PointLight, a HemisphereLight, and an AreaLight. Additionally, it also shows how to apply a lens flare effect on your light source.
Chapter 4, Working with Three.js Materials, talks about the materials available in Three.js that you can use on your meshes. It shows all the properties you can set to configure the materials for your specific use and provides interactive examples to experiment with the materials that are available in Three.js.
Chapter 5, Learning to Work with Geometries, is the first of two chapters that explore all the geometries that are provided by Three.js. In this chapter, you'll learn how to create and configure geometries in Three.js and you can experiment, using the provided interactive examples, with geometries such as Plane, Circle, Shape, Cube, Sphere, Cylinder, Torus, TorusKnot, and PolyHedron.
Chapter 6, Advanced Geometries and Binary Operations, continues where the previous chapter left off. It shows you how to configure and use the more advanced geometries that are provided by Three.js, such as Convex and Lathe. In this chapter, you'll also learn how to extrude 3D geometries from 2D shapes and how you can create new geometries by combining geometries using binary operations.
Chapter 7, Points and Sprites, explains how to use the sprites and points from Three.js. You'll learn how to create a point cloud from scratch, and from existing geometries. In this chapter, you'll also learn how you can modify the way the individual points look through the use of sprites and materials.
Chapter 8, Creating and Loading Advanced Meshes and Geometries, shows you how to import meshes and geometries from external sources. You'll learn how to use Three.js' internal JSON format to save geometries and scenes. This chapter also explains how to load models from formats such as OBJ, DAE, STL, CTM, PLY, and many more.
Chapter 9, Animations and Moving the Camera, explores the various types of animations you can use to make your scene come to life. You'll learn how to use the Tween.js library together with Three.js, and you'll learn how to work with animation models based on morhps and skeletons.
Chapter 10, Loading and Working with Textures, expands on Chapter 4, Working with Three.js Materials, where materials were introduced. In this chapter, we dive into the details of textures. This chapter introduces the various types of textures that are available and how you can control how a texture is applied to your mesh. Additionally, in this chapter you are shown how you can directly use the output from HTML5 video and canvas elements as input for your textures.
Chapter 11, Render Postprocessing, explores how you can use Three.js to apply postprocessing effects to your rendered scene. With postprocessing you can apply effects such as blur, tiltshift, and sepia to your rendered scene. Besides this, you'll also learn how to create your own postprocessing effect and create a custom vertex and fragment shader.
Chapter 12, Adding Physics and Sounds to Your Scene, explains how you can add physics to your Three.js scene. With physics you can detect collisions between objects, make them respond to gravity, and apply friction. This chapter shows how to do this with the Physijs JavaScript library. Additionally, this chapter also shows how you can add positional audio to a Three.js scene.
To get the most out of this book
To get the most out of this book, you need to know a little bit of JavaScript and follow the instructions in the first chapter to set up a local web server and get the samples for this book.
Download the example code files
You can download the example code files for this book from your account at www.packtpub.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.
You can download the code files by following these steps:
- Log in or register at www.packtpub.com.
- Select the
SUPPORTtab. - Click on
Code Downloads & Errata. - Enter the name of the book in the
Searchbox and follow the onscreen instructions.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
- WinRAR/7-Zip for Windows
- Zipeg/iZip/UnRarX for Mac
- 7-Zip/PeaZip for Linux
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Learn-Three.js-Third-Edition. In case there's an update to the code, it will be updated on the existing GitHub repository.
We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Download the color images
We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://www.packtpub.com/sites/default/files/downloads/LearnThreeDotjsThirdEdition_ColorImages.pdf.
Conventions used
There are a number of text conventions used throughout this book.
CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "The learning-threejs-third directory will now contain all the examples that are used throughout this book."
A block of code is set as follows:
<!DOCTYPE html>
<html>
<head>
<title>Example 01.01 - Basic skeleton</title>
<meta charset="UTF-8" />
<script type="text/javascript" charset="UTF-8" src="../../libs/three/three.js"></script>
<script type="text/javascript" charset="UTF-8" src="../../libs/three/controls/TrackballControls.js"></script>
<script type="text/javascript" src="./js/01-01.js"></script>
<link rel="stylesheet" href="../../css/default.css">
</head>When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);
Any command-line input or output is written as follows:
chrome.exe --disable-web-securityBold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "When you hit the addCube button, a new object is created."
Note
Warnings or important notes appear like this.
Note
Tips and tricks appear like this.
Get in touch
Feedback from our readers is always welcome.
General feedback: Email [email protected] and mention the book title in the subject of your message. If you have questions about any aspect of this book, please email us at [email protected].
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.
Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Reviews
Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!
For more information about Packt, please visit packtpub.com.
