Animation and Physics - Three.js - page 295

How to do it…
Once you've added the required library to your HTML page, creating the animation
only takes a couple of simple steps:
1. To use this library, we need to first create an instance of a TWEEN.Tween ob-
ject:
var tween = new TWEEN.Tween({x:0 ,
y:1.25, z:0, rot: 0});
This creates a TWEEN.Tween instance. We can use this instance to move
the provided properties from the start value (the value we added in this step)
to an end value.
2. The next step is to define the target values for the properties. We do this by
using the to function:
tween.to({x:5, y:15, z:-10, rot:
2*Math.PI}, 5000);
With this function, we tell the tween object that we want to slowly change
the provided values in the constructor to these values. So, we change the
x property from 0 to 5 . The second parameter, which is 5000 , defines how
many milliseconds this change should take.
3. We can also choose how the value changes over time. You can for instance
use a linear easing function, which changes the values at a constant rate,
a quadratic one, which starts with small changes and quickly increases, or
even use an easing function that bounces (overshoots) at the end. There are
many more easing functions that are predefined in TWEEN (see the There's
more… section for more information). You do this by calling the easing func-
tion:
tween.easing(TWEEN.Easing.Elastic.InOut);