(click anywhere to close)

[Three.js] Animation/Movement!

category: Games | course: Threejs | difficulty:

Now that you've learned a lot about creating all sorts of things and setting them up in Three.js, you'll want to know how to perform actions on these objects!

The Basic Setup

In the first few tutorials of this series you already learned to set up a render loop in JavaScript. The part between requestAnimationFrame()and renderer.render() is where you'll put all your code from this lesson.

The way this works is that the loop runs at the highest FPS your browser can handle at that moment (with maximum at 60), and every time the loop runs, your code is executed. That means that for a FPS of 60, your scene is updated 60 times per second.

So if you wanted to move a cube 100 units in world space along the x-axis (depends on from where you're viewing how much pixels this is!), you'd put into the render frame:

theCube.position.x += (100/60);

But, the FPS can change right?

Yes, I've already mentioned that FPS depends on how much is in the scene and how much your computer can handle. Therefore, it's unwise to use a fixed number for FPS.

Instead, Three.js provides aclockclass. How it works is: you create a clock object, and start it at the start of your program. Then every rendered frame, you can get the amount of seconds that has passed from the clock.

//Create clock, set autostart to true
var clock = new THREE.Clock(true);

//Within the render() function
//Get the seconds elapsed since last getDelta call
var timeElapsed = clock.getDelta();
//Or get the amount of time elapsed since start of the clock/program
var timeElapsed = clock.getTimeElapsed();

Once that is all set up, you can change your cube-moving code to:

theCube.position.x += 100 * timeElapsed;


The previously mentioned techniques creates linear motion/animation for your objects, and that's not always what you want. For creating nice tweened animations, there is a tiny, awesome extra JS library calledtween.js.. We are going to work with that here.

Don't forget to include the library before you test any of the code!

<script type='text/javascript' src='tween.js'></script>
Create basic tween
//Set position and target coordinates
var position = { x : 0, y: 300 };
var target = { x : 400, y: 50 };

//Tell it to tween the 'position' parameter
//Make the tween last 2 seconds (=2000 milliseconds)
var tween = new TWEEN.Tween(position).to(target, 2000);

//Now update the 3D mesh accordingly
    mesh.position.x = position.x;
    mesh.position.y = position.y;

//But don't forget, to start the tween

//And also don't forget, to put this into your looping render function
Do even more awesome stuff
//Delay the start of the tween

//Set a different tweening (easing) function

//Create a chain of tweens
//For example: this one loops between firstTween and secondTween

A list of all the different easing functions can be found here: 31 Easing Functions

Other Types of Animation

Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk