Learn Three.js - Third Edition

Animating the cube

With requestAnimationFrame and the statistics configured, we've got a place to put our animation code. In this section, we'll expand the renderScene function with code that will rotate our red cube around all of its axes. Let's start by showing you the code:

function renderScene() { 
  ... 
  cube.rotation.x += 0.02; 
  cube.rotation.y += 0.02; 
  cube.rotation.z += 0.02; 
  ... 
  requestAnimationFrame(renderScene); 
  renderer.render(scene, camera); 
} 

That looks simple, right? What we do is that we increase the rotation property of each of the axes by 0.02 every time the renderScene function is called, which shows up as a cube smoothly rotating around all of its axes. Bouncing the blue ball isn't much harder.