Learn Three.js - Third Edition

Animating with Tween.js

Tween.js is a small JavaScript library that you can download from https://github.com/sole/tween.js/ and that you can use to easily define the transition of a property between two values. All the intermediate points between the start and end values are calculated for you. This process is called tweening. For instance, you can use this library to change the x position of a mesh from 10 to 3 in 10 seconds, as follows:

var tween = new TWEEN.Tween({x: 10}).to({x: 3}, 10000)       .easing(TWEEN.Easing.Elastic.InOut)       .onUpdate( function () { 
          // update the mesh 
       }) 

In this example, we've created TWEEN.Tween. This tween will make sure that the x property is changed from 10 to 3 over a period of 10000 milliseconds. Tween.js also allows ...