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.
Search WWH ::




Custom Search