Example of Using Three.js with Tween.js

This is a quick example of using Create.js’s Tween.js library with Three.js to perform 3D WebGL animations. This library is not to be confused with another one with the same name, although the APIs and concepts are similar. This example simply adds animation and uses Tween.js for the game loop but is otherwise the same as the basic three.js example.

Basic index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Three.js Tween.js Example</title>
    <script src="https://code.createjs.com/1.0.0/tweenjs.min.js"></script>
    <script src="js/three.js"></script>
    <script src="js/game.js"></script>
  </head>
  <body onload="init()">

  </body>
</html>

Our HTML file here is basic, and does not include a canvas as this is added later by three.js in the JavaScript file. We simply link tween.js, three.js and our game.js file which we will write our code in. Note that tween.js is linked by CDN but that I have downloaded the three.js library and placed it in the js folder. We setup the body to call the init() function in our game.js file when it loads.

Three.js and Tween.js in game.js

var scene, camera, renderer, cube;

function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, 640 / 480, 0.1, 1000);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(640, 480);
  document.body.appendChild(renderer.domElement);

  var geometry = new THREE.BoxGeometry();
  var material = new THREE.MeshBasicMaterial({ color: 0x93CCEA });
  cube = new THREE.Mesh(geometry, material);

  cube.position.x = 0;
  cube.material.transparent = true;

  scene.add(cube);

  camera.position.z = 5;
  camera.position.y = 1;

  createjs.Ticker.timingMode = createjs.Ticker.RAF;
  createjs.Ticker.addEventListener("tick", animate);

  cube.material.opacity = 0;

  createjs.Tween.get(cube.material, { loop: true }).to({ opacity: 1 }, 500).wait(1500).to({ opacity: 0 }, 500);
  createjs.Tween.get(cube.rotation, { loop: true }).wait(500).to({ y: Math.PI*2 }, 1500, createjs.Ease.getPowInOut(3)).wait(500);
}

function animate() {
  renderer.render(scene, camera);
}

Our game.js file sets up a scene and camera and adds a single cube to animate. Rather than using requestAnimationFrame directly, we make use of the tween.js ticker to call our animate function regularly using requestAnimationFrame behind the scenes.

One thing that is somewhat annoying is that three.js uses many properties which are themselves objects, making them harder to access using Tween.js get functions. The solution here is to use the wait function to ensure the animations line up.

Conclusion

It’s relatively easy to use Tween.js with three.js, and provides the added advantage of an easy to use ticker that can be set at a constant frame rate or simply as fast as possible. For more about Create.js, see my Flappy Bird tutorials.