Search⌘ K
AI Features
Home
Courses
Learn Three.js for 3D Computer Graphics

Animations in Three.js

Explore how to create basic animations in Three.js by using the render loop and requestAnimationFrame. Understand how to smoothly animate 3D object properties such as rotation, position, and scale, and learn how to incorporate dynamic camera movements for engaging 3D scenes.

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:

Javascript (babel-node-es2024)
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();
...