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
Preview in Mapt

Three.js Cookbook

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
Mapt Subscription
FREE
$29.99/m after trial
eBook
$21.00
RRP $29.99
Save 29%
Print + eBook
$49.99
RRP $49.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$21.00
$49.99
$29.99p/m after trial
RRP $29.99
RRP $49.99
Subscription
eBook
Print + eBook
Start 30 Day Trial

Frequently bought together


Three.js Cookbook Book Cover
Three.js Cookbook
$ 29.99
$ 21.00
Learning Three.js: The JavaScript 3D Library for WebGL Book Cover
Learning Three.js: The JavaScript 3D Library for WebGL
$ 29.99
$ 21.00
Buy 2 for $35.00
Save $24.98
Add to Cart
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 

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

Recommended for You

Learning Three.js: The JavaScript 3D Library for WebGL Book Cover
Learning Three.js: The JavaScript 3D Library for WebGL
$ 29.99
$ 21.00
Data Visualization with D3.js Cookbook Book Cover
Data Visualization with D3.js Cookbook
$ 26.99
$ 18.90
Game Development with Three.js Book Cover
Game Development with Three.js
$ 17.99
$ 12.60
Learning Three.js – the JavaScript 3D Library for WebGL - Second Edition Book Cover
Learning Three.js – the JavaScript 3D Library for WebGL - Second Edition
$ 39.99
$ 28.00
WebGL Beginner's Guide Book Cover
WebGL Beginner's Guide
$ 26.99
$ 18.90
Mastering D3.js Book Cover
Mastering D3.js
$ 32.99
$ 23.10