Tween 3d objects

Tweens or transitions are an essential part of animation coding. In layman’s terms, Tweens helps you move things around on the screen using only code, instead of the timeline. Which actually means, computing the in-between values of a start and end value. Finally apply these in-between values to an actual object, which creates a fluid motion. Most of the time the tween equation is driven by an additional easing function. Tweens are fairly common theme, for further details about tweens look up for the most used tweening libraries like, GSAP and creates.js. We are using the tween.js library for the following examples, check their github page for the documentation.

easing functions

Each of this easing function are based of simple math equation, below a sample for the most basic one “linear interpolation”. This makes it possible to animate any value represented in numbers, the object itself doesn’t matter.

``````var t = currentTime;
var b = startValue;
var c = chanege_in_Value;
var d = duration;
function (t, b, c, d) { return c*t/d + b; };``````

Add a tween to any object on your screen. In this case a simple box made with three.js. You can find a simple scene setup tutorial on the Github project page of three.js. Below is the code to add a tween to a certain object, or it’s position values. Make sure you check the official documentation of the tween.js library, there are plenty of options to check out.

``````
var geometry	= new THREE.BoxGeometry(0.5,0.5,0.5);
var material	= new THREE.MeshNormalMaterial();
var mesh	= new THREE.Mesh( geometry, material );

var tween = new TWEEN.Tween(mesh.position).to({ x: 1, y: 0, z: 0 }, 1000).start();
tween.easing(TWEEN.Easing.Elastic.InOut);
tween.repeat(Infinity);
tween.yoyo(true);

``````//UPDATE TWEEN