Learn Three.js for 3D Computer Graphics/

...

/

Animating with Tween.js

Animating with Tween.js

Learn to create animation using Tween.js library.

We'll cover the following...

Tween.js

Let’s show how we can use an alternative way of modifying the properties of an object by using a tweening library.

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

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

Alternatively, we can create a separate object (lines 1–3) and pass (line 4) ...