Animation and Physics - Three.js - page 297

You define the start value, the end value, and how the start value should transition to
the end value.
How it works…
Whenever you call TWEEN.update() , the TWEEN library will determine how much
time has passed from the previous call to TWEEN.update for each TWEEN.Tween
object (or in the case of the first time, the time from calling start() on the
TWEEN.Tween object). Based on this difference, the start time of tween , and the
configured easing property, this library calculates new values for the passed-in
properties. Finally, it will call the function passed into onUpdate() so that you can
take action on the changed values.
There's more…
In this recipe, we didn't show all the configuration you can pass into the
TWEEN.Tween object. For a complete overview of all the different easing options
and other properties of the TWEEN.Tween object, refer to the GitHub project site at
https://github.com/sole/tween.js/ .
Before we move on to the next recipe, there is one additional interesting aspect of
the Tween.js library. In our recipe, we configured the TWEEN.Tween object step by
step. You can also configure the object in one call like this:
var tween = new TWEEN.Tween({x:0 , y:1.25,
z:0, rot: 0}).to({x:5, y:15, z:-10, rot:
2*Math.PI},
5000).easing(TWEEN.Easing.Elastic.InOut).onUpdate(function()
{
cube.position.set(this.x, this.y, this.z);
cube.rotation.set(this.rot, this.rot,
this.rot);
})
.repeat(Infinity)
.yoyo(true)
.start();