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
-
Three.js Cookbook
- Table of Contents
- Three.js Cookbook
- Credits
- About the Author
- Acknowledgments
- About the Reviewers
- www.PacktPub.com
- Preface
-
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
-
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
-
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
-
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
-
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
-
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
-
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
- Index
Product information
- Title: Three.js Cookbook
- Author(s):
- Release date: January 2015
- Publisher(s): Packt Publishing
- ISBN: 9781783981182
You might also like
video
Hands-on Three.js 3D Web Visualisations
Three.js is the most popular JavaScript library for displaying 3D content on the web, giving you …
book
Learning Three.js – the JavaScript 3D Library for WebGL - Second Edition
Create stunning 3D graphics in your browser using the Three.js JavaScript library In Detail Modern browsers …
book
Learn Three.js - Third Edition
Create and animate stunning 3D browser based graphics with Three.js JavaScript library Key Features Enhance your …
book
3D Graphics Rendering Cookbook
Build a 3D rendering engine from scratch while solving problems in a step-by-step way with the …