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, on page 99, contains a good
example.newTWEEN.
Tween({
height: 150,
spin: 0
}).
to({
height: 250,
spin: 4
}, 500).
onUpdate(function() {
fruit.position.y = this.height;
fruit.rotation.z = this.spin;
}).
start();This moves between two values: the height and the spin. Over the course of
half a second (500 milliseconds), the height moves from 150 to 250. The spin
moves from 0 to 4. Each time the Tween is updated, we change the position
and rotation of the fruit being animated. The current values being Tweened
are made available as a property of the special this object.The last thing we do in the preceding example is to start the Tween.
Tweens also need something to tell them to update. In 3D programming, we
normally do this in the animate() function with a TWEEN.update() call.functionanimate() {
requestAnimationFrame(animate);
TWEEN.update();
renderer.render(scene, camera);
}In addition to onUpdate(), there are onStart() and onComplete() methods that call a
function when the Tween starts and finishes.A2.4 Scoreboard.js
The Scoreboard.js library is a simple JavaScript library that provides the
basics of scoring in games. It supports very little configuration, but aims to
be easy to use for programmers.Appendix 2. JavaScript Libraries Used in This Book • 274
Prepared exclusively for Michael Powell report erratum • discuss