Learn Three.js for 3D Computer Graphics/

...

/

Animations in Three.js

Animations in Three.js

Learn how to create basic and simple animations in Three.js.

We'll cover the following...

Basic animations

Before we look at the examples, let’s quickly review the render loop for creating 3D scenes. To support animations, we need to tell Three.js to render the scene every so often. For this, we use the standard HTML5 requestAnimationFrame functionality, as follows:

Press + to interact
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

With this code, we only need to call the render() function (line 3) once we’ve initialized the scene. In the render() function itself, we use requestAnimationFrame (line 2) to schedule the next rendering. This way, the browser will make sure the render() function is called at the correct interval (usually ...