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 complex 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 library 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...