Book Image

Three.js Cookbook

By : Jos Dirksen
Book Image

Three.js Cookbook

By: Jos Dirksen

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
Three.js Cookbook
Jos Dirksen
Jan, 2015 | 300 pages
No titles found
Table of Contents (15 chapters)
Three.js Cookbook
Three.js Cookbook
Credits
Credits
About the Author
About the Author
Acknowledgments
Acknowledgments
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Getting Started
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
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
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
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
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
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
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
Index

Making a light source follow an object

If you've got a moving object in the scene that you want to highlight with a spotlight, you need to be able to change the direction a light is pointed at. In this recipe, we will show you how to do just that. We will show you how you can keep THREE.SpotLight pointed at a moving object in the scene.

Getting ready

There are no steps that you need to take to run this recipe. You can see the final result of this recipe by opening up the 05.07-make-a-light-follow-object.html example in your browser. You will see something similar to the following screenshot:

In this example, you can see a sphere that moves from left to right and back again. THREE.SpotLight in this scene follows the position of this sphere so that it is always pointed directly at the center of that object.

How to do it...

Following an object in Three.js is very easy and only takes a couple of easy steps:

  1. The fist thing we need to do is create the object that we want to follow. For this recipe,...

Previous Section
End of Section 9
Next Section