Graphics Reference
In-Depth Information
4. So far, we have changed the values of these properties from one value to
another, but we don't really do anything when a value changes. In this re-
cipe, we want to change the position and the rotation of the cube. You do this
by calling the
onUpdate
function and passing in the function that should be
called on each change:
tween.onUpdate(function() {
cube.position.set(this.x, this.y,
this.z);
cube.rotation.set(this.rot, this.rot,
this.rot);
});
As you can see in this code snippet, we use the provided properties to set
the rotation and position properties of cube.
5. There are a number of other settings you can use on the
tween
object to
control how the animation behaves. For this recipe, we tell the
tween
object
to repeat its animation indefinitely and use a yo-yo effect that reverses the
animation each time it is repeated:
tween.repeat(Infinity);
tween.yoyo(true);
6. Finally, we can start the
tween
object by calling the start function:
tween.start();
7. At this point, you won't see anything happening. There is one last step you
need to add to the
render
loop to inform the
tween
object how much time
has passed so that it can calculate the correct values for the properties you
provided in step 1:
TWEEN.update();
This will update all the
TWEEN.Tween
objects you've defined and call the
onUpdate
functions with the
updated
values.