Three.js Cookbook

Book description

Over 80 shortcuts, solutions, and recipes that allow you to create the most stunning visualizations and 3D scenes using the Three.js library

In Detail

Modern browsers are becoming more powerful each year and in recent years have adopted WebGL as the standard to deliver 3D graphics in a browser. Beginning with some basic recipes to get you started, this book will guide you through the most important features that Three.js has to offer. You'll even learn how to quickly create new geometries from scratch. Solutions and methods that show you how to use HTML5 video and canvas as textures will follow on from this.

By the end of the book, you'll be able to quickly add advanced features to your scene, improve the way users interact with your 3D scene, and make your scenes look stunning.

What You Will Learn

  • Create a standard HTML skeleton and advanced features such as keyboard controls, drag and drop support, WebGL detection, and loading resources

  • Build and transform Three.js geometries using simple properties and advanced matrix transformations

  • Enhance the look of your scene using Three.js materials, texture maps, and dynamic textures

  • Apply realistic lighting and shadows to the 3D objects you have created

  • Animate particle systems created from scratch or from existing geometries

  • Work with animations, advanced physics, and collision detection

  • Table of contents

    1. Three.js Cookbook
      1. Table of Contents
      2. Three.js Cookbook
      3. Credits
      4. About the Author
      5. Acknowledgments
      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. Sections
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        5. Conventions
        6. Reader feedback
        7. Customer support
          1. Downloading the example code
          2. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      9. 1. Getting Started
        1. Introduction
        2. Getting started with the WebGL renderer
          1. Getting ready
          2. How to do it...
          3. See also
        3. Getting started with the Canvas renderer
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        4. Getting started with the CSS 3D renderer
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        5. Detecting WebGL support
          1. Getting ready
          2. How to do it...
        6. Setting up an animation loop
          1. Getting ready
          2. How to do it...
          3. See also
        7. Determining the frame rate for your scene
          1. Getting ready
          2. How to do it...
          3. How it works...
        8. Controlling the variables used in the scene
          1. Getting ready
          2. How to do it...
          3. There's more...
        9. Setting up a local web server with Python
          1. Getting ready
          2. How to do it...
        10. Setting up a local web server with Node.js
          1. Getting ready
          2. How to do it...
        11. Setting up a local web server using Mongoose
          1. Getting ready
          2. How to do it...
          3. See also
        12. Solving cross-origin-domain error messages in Chrome
          1. How to do it...
        13. Solving cross-origin-domain error messages in Firefox
          1. How to do it...
          2. How it works...
          3. See also
        14. Adding keyboard controls
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        15. Loading textures asynchronously
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        16. Loading models asynchronously
          1. Getting ready
          2. How to do it...
          3. There is more...
        17. Loading models asynchronously with progress
          1. Getting started
          2. How to do it...
        18. Loading other resources asynchronously with progress
          1. Getting ready
          2. How to do it...
        19. Waiting until resources are loaded
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There is more...
          5. See also
        20. Dragging a file from the desktop to the scene
          1. Getting ready
          2. How to do it...
          3. How it works...
      10. 2. Geometries and Meshes
        1. Introduction
        2. Rotating an object around its own axis
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        3. Rotating an object around a point in space
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        4. Informing Three.js about updates
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        5. Working with a large number of objects
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        6. Creating geometries from height maps
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        7. Pointing an object to another object
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        8. Writing text in 3D
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
        9. Rendering 3D formulas as 3D geometries
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
        10. Extending Three.js with a custom geometry object
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        11. Creating a spline curve between two points
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
        12. Creating and exporting a model from Blender
          1. Getting ready
          2. How to do it...
          3. See also
        13. Using OBJMTLLoader with multiple materials
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        14. Applying matrix transformations
          1. Getting ready
          2. How to do it...
          3. How it works
          4. There's more…
          5. See also
      11. 3. Working with the Camera
        1. Introduction
        2. Making the camera follow an object
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        3. Zooming the camera to an object
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
        4. Using a perspective camera
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        5. Using an orthographic camera
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        6. Creating a 2D overlay
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        7. Rotating the camera around a scene
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        8. Matching the rendered view to a resized browser
          1. Getting ready
          2. How to do it...
          3. How it works...
        9. Converting world coordinates to screen coordinates
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        10. Selecting an object in the scene
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more
          5. See also
      12. 4. Materials and Textures
        1. Introduction
        2. Adding depth to a mesh with a bump map
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        3. Adding depth to a mesh with a normal map
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        4. Using HTML canvas as a texture
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        5. Using HTML video as a texture
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        6. Creating a mesh with multiple materials
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        7. Using separate materials for faces
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        8. Setting up repeating textures
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        9. Making part of an object transparent
          1. Getting ready
          2. How to do it...
          3. There's more…
          4. See also
        10. Using a cubemap to create reflective materials
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        11. Using a dynamic cubemap to create reflective materials
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        12. Using Blender to create custom UV mapping
          1. Getting ready
          2. How to do it...
          3. There's more…
          4. See also
        13. Configuring blend modes
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
        14. Using a shadow map for fixed shadows
          1. Getting ready
          2. How to do it...
          3. See also
      13. 5. Lights and Custom Shaders
        1. Introduction
        2. Creating shadows with THREE.SpotLight
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        3. Creating shadows with THREE.DirectionalLight
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        4. Softening lights by adding ambient lighting
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        5. Using THREE.HemisphereLight for natural lighting
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        6. Adding a moving all-directional light
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        7. Moving a light source along a path
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
        8. Making a light source follow an object
          1. Getting ready
          2. How to do it...
          3. There's more…
          4. See also
        9. Creating a custom vertex shader
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        10. Creating a custom fragment shader
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
      14. 6. Point Clouds and Postprocessing
        1. Introduction
        2. Creating a point cloud based on a geometry
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        3. Creating a point cloud from scratch
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more…
          5. See also
        4. Coloring the individual points in a point cloud
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        5. Styling individual points
          1. Getting ready
          2. How to do it…
          3. How it works...
          4. There's more…
          5. See also
        6. Moving individual points of a point cloud
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        7. Exploding a point cloud
          1. Getting ready
          2. How to do it…
          3. There's more
          4. See also
        8. Setting up the basic postprocessing pipeline
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more
          5. See also
        9. Creating custom postprocessing steps
          1. Getting ready
          2. How to do it…
          3. How it works...
          4. There's more…
          5. See also
        10. Saving WebGL output to disk
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more
      15. 7. Animation and Physics
        1. Introduction
        2. Creating animations with Tween.js
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        3. Animating using morph targets
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        4. Animating with skeletons
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        5. Using morph animations created in Blender
          1. Getting ready
          2. How to do it…
          3. There's more…
          4. See also
        6. Using skeleton animations created in Blender
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        7. Adding a simple collision detection
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        8. Saving a movie of an animation in Chrome
          1. Getting ready
          2. How to do it…
          3. There's more…
          4. See also
        9. Dragging and dropping objects around a scene
          1. Getting ready
          2. How to do it…
          3. There's more…
          4. See also
        10. Adding a physics engine
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
      16. Index

    Product information

    • Title: Three.js Cookbook
    • Author(s): Jos Dirksen
    • Release date: January 2015
    • Publisher(s): Packt Publishing
    • ISBN: 9781783981182