Animations and Moving the Camera

In the previous chapters, we have seen some simple animations, but nothing too complex. In Chapter 1, Creating Your First 3D Scene with Three.js, we introduced the basic rendering loop, and in the chapters following that, we used that to rotate some simple objects and show a couple of other basic animation concepts. In this chapter, we're going to look in more detail at how animation is supported by Three.js. We will look in detail at the following four subjects:

• Basic animation
• Moving the camera
• Morphing and skinning
• Loading external animations

We start with the basic concepts behind animations.

Basic animations

Before we look at the examples, let's do a quick recap of what was shown in Chapter 1, Creating Your First 3D Scene with Three.js on the render loop. To support animations, we need to tell Three.js to render the scene every so often. For this, we use the standard HTML5 requestAnimationFrame functionality, as follows:

render(); 
 
function render() { 
 
  // render the scene 
  renderer.render(scene, camera); 
  // schedule the next rendering using requestAnimationFrame 
  requestAnimationFrame(render); 
} 

With this code, we only need to call the render() function once when we're done initializing the scene. In the  render() function itself, we use requestAnimationFrame to schedule the next rendering. This way, the browser will make sure the render() function is called at the correct interval...

Working with the camera

Three.js has a number of camera controls you can use to control the camera throughout a scene. These controls are located in the Three.js distribution and can be found in the examples/js/controls directory. In this section, we'll look in more detail at the following controls:

Name	Description
FirstPersonControls	These are controls that behave like those in first-person shooters. Move around with the keyboard and look around with the mouse.
FlyControls	These are flight simulator-like controls. Move and steer with the keyboard and the mouse.
TrackBallControls	These are the most-used controls, allowing you to use the mouse (or the trackball) to easily move, pan, and zoom around the scene. Note that if you use OrtographicCamera, you can use OrtographicTrackBallControls, which are specifically made to...

Morphing and skeletal animation

When you create animations in external programs (for instance, Blender), you usually have two main options to define animations:

• Morph targets: With morph targets, you define a deformed version, that is, a key position, of the mesh. For this deformed target, all vertex positions are stored. All you need to do to animate the shape is move all the vertices from one position to another key position and repeat that process. The following screenshot shows various morph targets used to show facial expressions (the screenshot has been provided by the Blender Foundation):

• Skeletal animation: An alternative is using skeletal animation. With skeletal animation, you define the skeleton, that is, the bones, of the mesh and attach vertices to the specific bones. Now, when you move a bone, any connected bone is also moved appropriately, and the attached...

Creating animations using external models

In Chapter 8, Creating and Loading Advanced Meshes and Geometries, we looked at a number of 3D formats that are supported by Three.js. A couple of those formats also support animations. In this chapter, we'll look at the following examples:

• Blender with the JSON exporter: We'll start with an animation created in Blender and exported to the Three.js JSON format.
• COLLADA model: The COLLADA format has support for animations. For this example, we'll load an animation from a COLLADA file and render it with Three.js.
• MD2 model: The MD2 model is a simple format used in the older Quake engines. Even though the format is a bit dated, it is still a very good format for storing character animations.
• glTF models: The GL Transmission (glTF) format is a format specifically designed for storing 3D scenes and models...

Summary

In this chapter, we looked at different ways that you can animate your scene. We started with some basic animation tricks, moved on to camera movement and control, and ended with animation models using morph targets, and skeleton/bones animations. When you have the render loop in place, adding simple animations is very easy. Just change a property of the mesh, and in the next rendering step, Three.js will render the updated mesh. For the more complex animations, you would usually model them in external programs and load them through one the loaders provided by Three.js.

In previous chapters, we looked at the various materials you can use to skin your objects. For instance, we saw how you can change the color, shininess, and opacity of these materials. What we haven't discussed in detail yet, however, is how you can use external images (also called textures) together...