Learn Three.js - Third Edition

Introducing requestAnimationFrame

Modern browsers luckily have a solution for that with the requestAnimationFrame function. With requestAnimationFrame, you can specify a function that is called at an interval. You, however, don't define this interval. This interval is defined by the browser. You do any drawing you need to do in the supplied function, and the browser will make sure it is painted as smoothly and efficiently as possible. Using this is really simple (the complete source can be found in the 04-04.js file); you just create a function that handles the rendering:

function renderScene() { 
  requestAnimationFrame(renderScene); 
  renderer.render(scene, camera); 
} 

In this renderScene function, we call requestAnimationFrame again, to keep ...