Tween.js

When we want to change values (location, rotation, speed) over the course of time in this book, we use the Tween library. The project home page is http://github.com/sole/tween.js.

Building a Tween involves several parts. A Tween needs the starting value or values, the ending values, the time that it takes to move from the start to the end values, and a function that’s called as the Tween is running. A Tween also needs to be started and updated to work.

The Tween from Chapter 11, Project: Fruit Hunt, contains a good example.

 
new​ TWEEN.
 
Tween({
 
height: 150,
 
spin: 0
 
}).
 
to({
 
height: 250,
 
spin: 4
 
}, 500).
 
onUpdate(​function​ () {
 
fruit.position.y = this.height;
 
fruit.rotation.z = this.spin;
 
}).
 
start();

Get 3D Game Programming for Kids now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.