How to Use Tween.js with Three.js

Tween.js is a javascript animation engine that is typically used with Three.js to apply tweening animations to 3D objects. Tween.js is also commonly used to handle 2D web based animations. For me the greatest advantage of using a tweening library with Three.js is that makes it really easy to create animation tweens with properties like easing and back and forth looping etc. Above is a basic demo using Tween.js with Three.js. I have also written a similar guide that shows you how to use a different animation engine – Anime.js with Three.js, just in case you’re interested.

Open Demo in New Tab

There are plenty of examples of using Tween.js and Three.js available, so the following is really just my own simplified notes.

Firstly, of course within the JavaScript you need to import the library. In the following example, just to make everything work standalone I am linking to the script via a CDN:

import { TWEEN } from 'https://unpkg.com/three@0.139.0/examples/jsm/libs/tween.module.min.js';

Now here is an excerpt from the code where I have created an icosahedron and applied different tweens to it for position, rotation, and scale:

// Tween.js Tweening
new TWEEN.Tween(icosahedron.position)
  .to( { y:1.5 }, 2000)
  .yoyo(true)
  .repeat(Infinity)
  .easing(TWEEN.Easing.Cubic.InOut)
  .start()
;
new TWEEN.Tween(icosahedron.rotation)
  .to({ y: "-" + (Math.PI/2) * 8}, 6000) // Math.PI/2 = 360degrees x8 rotations
  .delay(1000)
  .repeat(Infinity)
  .easing(TWEEN.Easing.Cubic.InOut)
  .start()
;
new TWEEN.Tween(icosahedron.rotation)
  .to({ x: "-" + (Math.PI/2) * 9}, 14000)
  .repeat(Infinity)
  .easing(TWEEN.Easing.Cubic.InOut)
  .start()
;
new TWEEN.Tween(icosahedron.scale)
  .to( { x:1.25, y:1.25, z:1.25 }, 5000)
  .yoyo(true)
  .repeat(Infinity)
  .easing(TWEEN.Easing.Cubic.InOut)
  .start()
;

In this example I applied two different tweens for rotation on the x and y axis’. Unlike when applying tweens using Anime.js, when using Tween.js the rotational values need to be in radians (hence the PI equation).

And lastly, when using Tween.js you need to include an update in the animation loop. Here is a copy of the animation loop for this demo:

function animation(time) {
  controls.update();
  renderer.render(scene, camera);   
  TWEEN.update();
}

As I mentioned in my other article about using Anime.js with Three.js, one thing I really like about using tweening engines with Three.js is that you can create animation sequences that apply tweens to different properties of a single object separately. In the example above my tweens span different durations. By tweening these properties separately and with different durations I am able to create an animation sequence that is not linear. – The entire animation doesn’t have a set form that repeats itself, rather the different properties constantly combine with each other in different ways.

Also it’s probably worth mentioning that currently I am leaning towards Anime.js as my preferred animation framework for using with Three.js. The main reason being that as identified above the code is a bit more streamlined and easier to work with. Also recently I found I was able create animations which looped between randomly generated values in Anime.js, whereas I couldn’t quite pull off the same thing with Tween.js.

Otherwise I hope this information if useful for you. 🙂

If you would like to stay in the loop when I publish new content your best bet is to join my mailing list, as I don't tend to post my tutorials and articles to social media. Otherwise you can always follow my work on Youtube, Twitter, Instagram, Reddit, Artstation, LinkedIn, and Behance.