The other interesting thing happening in the animate() function is requestAnima-
tionFrame(). This is a function that is built into modern web browsers, which
are very good about knowing just the right time to draw things. By using the
requestAnimationFrame() function, we get very smooth animations.What’s really interesting about requestAnimationFrame() is that we give it another
function—the very animate() function that’s currently running. We don’t add
the parentheses at the end of animate because that would call the animate()
function. By giving requestAnimationFrame() a reference to animate(), we tell the web
browser that the next time it is ready to do some drawing, which should be
in a few milliseconds, it should call this animate function again.With that, you just made a donut from nothing and sent it spinning around
wildly.How cool is that?
15.4 The Code So Far
If you would like to double-check the code in this chapter, flip to Section
A1.12, Code: Working with Lights and Materials, on page 240.13.5 What’s Next
Lights and materials are advanced topics and we have only scratched the
surface of what’s possible. There are many settings that take a lot of getting
used to. Just setting colors with red, green, and blue values is a little strange
at first. But that’s not why these are advanced topics. Lights and materials
are incredibly cool, but you must realize that you shouldn’t always use them.
This is an important lesson in any kind of programming, not just JavaScript
gaming: just because you can doesn’t mean you should. The best programmers
in the world know this rule well. And now you do, too!Let’s put our new lighting skills to good use in the next chapter as we build
a simulation of our solar system.Chapter 12. Working with Lights and Materials • 116
Prepared exclusively for Michael Powell report erratum • discuss