Animating with Tween.js

Tween.js is a small JavaScript library that you can download from https://github.com/sole/tween.js/ and that you can use to easily define the transition of a property between two values. All the intermediate points between the start and end values are calculated for you. This process is called tweening. For instance, you can use this library to change the x position of a mesh from 10 to 3 in 10 seconds, as follows:

var tween = new TWEEN.Tween({x: 10}).to({x: 3}, 10000)       .easing(TWEEN.Easing.Elastic.InOut)       .onUpdate( function () { 
          // update the mesh 
       }) 

In this example, we've created TWEEN.Tween. This tween will make sure that the x property is changed from 10 to 3 over a period of 10000 milliseconds. Tween.js also allows ...

Get Learn Three.js - Third Edition 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.