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

Using an orthographic camera

In most cases, you'll use THREE.PerspectiveCamera to render your scene. With such a camera, the result is a scene with a realistic-looking perspective. Three.js provides an alternative camera with THREE.OrthographicCamera. This camera uses an orthographic projection to render the scene. With this type of projection, all objects have the same size regardless of their distance to the camera. This is in contrast to THREE.PerspectiveCamera, where objects that are further away from the camera appear smaller. This was used often for fake 3D in games such as the Sims or older versions of SimCity (image taken from http://glasnost.itcarlow.ie/~powerk/GeneralGraphicsNotes/projection/projection_images/iosmetric_sim_city.jpg).

In this recipe, we'll show you how to configure THREE.OrthographicCamera so that you can create this fake 3D effect for your own scenes.

Getting ready

For this recipe, the only object from Three.js we use is THREE.OrthographicCamera. This camera is available...

Previous Section
End of Section 6
Next Section