Three.js Cookbook

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

Three.js Cookbook

This ebook is included in a Mapt subscription
Jos Dirksen

1 customer reviews
Over 80 shortcuts, solutions, and recipes that allow you to create the most stunning visualizations and 3D scenes using the Three.js library
$0.00
$25.50
$49.99
$29.99p/m after trial
RRP $29.99
RRP $49.99
Subscription
eBook
Print + eBook
Start 30 Day Trial
Subscribe and access every Packt eBook & Video.
 
  • 4,000+ eBooks & Videos
  • 40+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 
Preview in Mapt

Book Details

ISBN 139781783981182
Paperback300 pages

Book Description

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.

Table of Contents

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

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

Authors

Table of Contents

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

Book Details

ISBN 139781783981182
Paperback300 pages
Read More
From 1 reviews

Read More Reviews