Graphics Reference
In-Depth Information
Setting up an animation loop
In the recipes at the beginning of this chapter, we showed you how to set up a basic
Three.js scene, using one of the available renderers. If you want to add animations
to your Three.js scene, for instance, to move the camera around or rotate an object,
you'll need to call the
render
function multiple times. In the old days of JavaScript,
you had to control this yourself using the
setTimeout
or
setInterval
JavaScript
functions. The problem with these functions is that they don't take into account what
is happening in your browser. For instance, your page will be hidden or the Three.js
scene might be scrolled out of view. A better solution for animations, and the one
that we'll use in this recipe, is
requestAnimationFrame
. With this function, your
browser determines when it is the best time to call the animation code.
Getting ready
For this recipe, we will use the
01.05-setup-animation-loop.html
example
HTML file. To see the animation in action, just open this file in your browser:
This example uses the WebGL renderer. You can of course apply this same recipe to
the other renderers we've discussed in this chapter.
Let's take a look at the steps we need to take to set up such an animation loop.
How to do it...
To create an animation loop you don't have to change much in your existing code:
