O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Three.js Essentials

Book Description

Create and animate beautiful 3D graphics with this fast-paced tutorial

In Detail

Create beautiful visualizations and 3D scenes using Three.js with this practical, example-rich book. Learn all the core concepts of Three.js, and whether you are targeting mobile devices or desktop browsers, you will gain the necessary skills to build a 3D application and improve web performance.

From setting up a development environment and creating your first Three.js scene, you will quickly dive into more complex scene-making. Discover a variety of possible scenes from how to make a rotating planet with data overlay to mini games. Through these examples, you will be shown an array of skills from using materials, controls, and lighting to creating particle systems and geometries from scratch.

By the end of this book, you'll be able to effectively and confidently create 3D scenes using different lights and materials, create visualizations using particle systems, animate web pages, and incorporate Blender in your 3D workflow.

What You Will Learn

  • Create standard skeletons and animation loops for Three.js projects that support WebGL and CSS3 3D
  • Use textures and materials to their fullest to enhance rendering of an object
  • Apply different types of lighting using the different light sources available
  • Animate geometries, particle systems, and HTML5 elements with Three.js and Tween.js
  • Create procedural and random geometries from scratch
  • Load geometries from external sources and work with Blender as a 3D modeling tool
  • Work with particle systems for advanced visualizations

Table of Contents

  1. Three.js Essentials
    1. Table of Contents
    2. Three.js Essentials
    3. Credits
    4. About the Author
    5. Acknowledgment
    6. About the Reviewers
    7. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    8. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    9. 1. Get Up and Running with Three.js
      1. Introducing Three.js
      2. Looking at the requirements for Three.js
      3. Setting up a local development environment
        1. Getting the source code
        2. Setting up a local web server
          1. Using Python to run a web server
          2. Using the npm command from Node.js to run a web server
          3. Running a portable version of Mongoose
      4. Creating a minimal Three.js web application
        1. Creating a scene to contain all the objects
        2. Adding a mesh created from geometry
          1. What are vertices?
          2. Combining vertices into faces
      5. Enhancing the basic scene
        1. Adding easy controls with the dat.GUI library
        2. Add a statistics element to show the frame rate
      6. Debugging the examples in this book
        1. Using console logging for debugging
        2. Looking at objects with breakpoints in Chrome
      7. Summary
    10. 2. Creating a 3D World Globe and Visualizing Open Data
      1. Setting up the globe and camera controls
      2. Adding basic textures to the globe
      3. Adding directional and ambient lighting
      4. Combining with a starry background
      5. Improving the look with more advanced textures
        1. Using a normal map to simulate elevations
        2. Using a specular map to define the reflectivity of an area
      6. Adding 2D information using HTML canvas as a texture
      7. Summary
    11. 3. Navigate around a Randomly Generated Maze
      1. The result we're aiming for in this chapter
      2. Creating the maze
        1. Generating a maze layout
        2. Converting the layout to a 3D set of objects
      3. Animating the cube
        1. The standard Three.js rotation behavior
        2. Creating an edge rotation using matrix-based transformation
        3. Using Tween.js to add an animation
      4. Setting up collision detection
        1. Selecting objects
        2. Detecting collisions
      5. Adding textures and improving the lighting
        1. Adding a repeating texture
        2. Setting up the light sources
      6. Adding trackball and keyboard controls
        1. Adding trackball controls to the camera
        2. Configuring keyboard controls
      7. Summary
    12. 4. Visualizing Audio Data with a Particle System
      1. Visualizing the audio volume
        1. Setting up the HTML5 Web Audio API
        2. Creating a particle system
        3. Playing a sound and animating the particle system
      2. Creating a particle system by hand
        1. Web Audio's configuration and the render loop
        2. Creating waves with a custom geometry
      3. Customizing colors of individual particles
        1. Coloring individual particles
        2. Coloring the particles based on the amplitude
      4. Combining dynamic colors to create advanced visualizations
        1. Setting up the initial particle system
        2. Calculating volumes for each range
        3. Determining particles that need to be updated and setting the height and color of an individual particle
      5. Summary
    13. 5. Programmatic Geometries
      1. Creating a 3D terrain from scratch
        1. Generating a terrain with Math.random()
        2. Generating a terrain with a Perlin noise
        3. Adding a texture
        4. Creating a JavaScript object with a constructor
      2. Creating a city from scratch
      3. Creating parametric trees
      4. Summary
    14. 6. Combining HTML and Three.js with CSS3DRenderer
      1. Setting up a CSS3DRenderer skeleton
      2. Creating an interactive 3D Google Maps cube
        1. Displaying a part of Google Maps using HTML
        2. Positioning and rotating the element
      3. Animating HTML elements with TweenJS
        1. Using images as the input
        2. Setting up the animations
          1. Determining the target position and rotation
          2. Configuring TweenJS to run the animation
      4. Creating a parametric terrain using CSS sprites
        1. Creating a 3D terrain using sprites
        2. Animating the terrain with TweenJS
      5. Summary
    15. 7. Loading and Animating External Models Using Blender
      1. Installing Blender and the Three.js plugin
        1. Downloading and installing Blender
        2. Installing the Three.js plugin
        3. Enabling the Three.js plugin
      2. Exporting a model from Blender and showing it in Three.js
        1. Exporting the model
        2. Loading the model and showing it in Three.js
      3. Using Blender's predefined materials in Three.js
        1. Setting up a Blender material
        2. Setting up UV mapping in Blender
        3. Exporting and rendering in Three.js
      4. Working with skeletal-based animations in Three.js
        1. Exploring the model and exporting it to Three.js
        2. Loading and animating the model in Three.js
      5. Working with morph-based animations in Three.js
        1. Exploring the model and exporting it to Three.js
        2. Loading and animating the model in Three.js
      6. Summary
    16. Index