Book Image

Learn Three.js - Fourth Edition

By : Jos Dirksen
5 (1)
Book Image

Learn Three.js - Fourth Edition

5 (1)
By: Jos Dirksen

Overview of this book

Three.js has become the industry standard for creating stunning 3D WebGL content. In this edition, you’ll learn about all the features of Three.js and understand how to integrate it with the newest physics engines. You'll also develop a strong grip on creating and animating immersive 3D scenes directly in your browser, reaping the full potential of WebGL and modern browsers. The book starts with the basic concepts and building blocks used in Three.js and helps you explore these essential topics in detail through extensive examples and code samples. You'll learn how to create realistic-looking 3D objects using textures and materials and how to load existing models from an external source. Next, you'll understand how to control the camera using the Three.js built-in camera controls, which will enable you to fly or walk around the 3D scene you've created. Later chapters will cover the use of HTML5 video and canvas elements as materials for your 3D objects to animate your models. You’ll learn how to use morph targets and skeleton-based animation, before understanding how to add physics, such as gravity and collision detection, to your scene. Finally, you’ll master combining Blender with Three.js and creating VR and AR scenes. By the end of this book, you'll be well-equipped to create 3D-animated graphics using Three.js.
Table of Contents (21 chapters)
Part 1: Getting Up and Running
Part 2: Working with the Three.js Core Components
Chapter 5: Learning to Work with Geometries
Part 3: Particle Clouds, Loading and Animating Models
Part 4: Post-Processing, Physics, and Sounds

Exploring the HTML structure for Three.js applications

In this section, we’ll look at the source of the geometries.html file. You can do this by looking at the source in the browser or opening the file from the dist/chapter-1 folder in the same location where you downloaded the source for this book:

<!DOCTYPE html>
  <meta charset="utf-8">
    body {
      margin: 0;
  <script defer src="../js/vendors-node_modules_three_
  <script defer src="../js/vendors-node_modules_lil-gui_
  <script defer src="../js/vendors-node_modules_three_
  <script defer src="../js/geometries.js"></script>

This code is generated when you run the npm run build step. This will combine all the sources and external libraries you’ve used into separate source files (called bundles) and add them to this page. So, you don’t need to do this yourself. The first three <script> tags refer to any of the external libraries we use. Later in the book, we’ll introduce other libraries such as React.js and Tween.js. Those will be included in the same manner automatically. The only other elements here are <style> and <body>. <style> is used to disable any margins in the page, so we can use the complete browser viewport to show our 3D scenes. Furthermore, we’ll add the 3D scene programmatically into an empty <body> element, which we’ll explain in the next section.

If you do want to add custom HTML elements here, you can, of course, do that. In the root of the downloaded code, you’ll find a template.html file, which is used by the build process to create the individual HTML files for the examples. Anything you add there will be added to all the examples. We won’t dive too deep into how this works since that’s outside the scope of this book. However, if you want to learn more about how this works, a couple of good resources on webpack (which we use for this) are as follows:

  • The getting started with webpack guide: This site contains a tutorial that explains the reason why we need webpack for JavaScript development, and how the basic concepts work.
  • Information on the HTML webpack plugin: Here, you can find information on the webpack plugin we use to combine the sources into the separate HTML pages you see when you open the browser after running npm run build and then running npm run serve.

Note that we don’t have to explicitly initialize our scene or call JavaScript. Whenever we open this page and the geometries.js file is loaded, the JavaScript from that file will run and create our 3D scene.

Now that we’ve set up the basic structure, we can create and render our first scene.