Animation and Physics - Three.js - page 294

Creating animations with Tween.js
In Chapter 1 , Getting Started , we've already showed you how to set up an animation
loop, and in Chapter 2 , Geometries and Meshes , we showed you how to create simple
animations by changing properties of THREE.Mesh . When you have many or com-
plex animations, the code can quickly become complex to maintain or understand. In
this recipe, we'll show you how you can use an external JavaScript library that makes
the creation of animations easier and more maintainable. We'll use the Tween.js lib-
rary for this.
Getting ready
For this recipe, we use a library from https://github.com/sole/tween.js/ . As this is an
external library, we first need to make sure it is included in our HTML page. For this,
first add the following within the head element of your page:
<script src="../libs/tween.js"></script>
For this recipe, we'll create a simple animation using this library. If you open the
07.01-animation-with-tweenjs.html example in your browser, you can view
the final result, which is similar to what is shown in the following screenshot:
If you open this example in your browser, you'll see a small red cube that moves to a
different position and rotates while it is moving. This animation is configured using the
Tween.js library.