Let’s Animate!

That is all pretty cool, but you know what’s even cooler than a shiny donut casting a shadow? A shiny donut casting a shadow and spinning!

Replace the renderer.render at the bottom of our code:

 
var​ clock = ​new​ THREE.Clock();
 
function​ animate() {
 
requestAnimationFrame(animate);
 
 
var​ time = clock.getElapsedTime();
 
donut.rotation.set(time, 2*time, 0);
 
 
renderer.render(scene, camera);
 
}
 
animate();

We’ve seen a lot of that code before, but now is a good time to explain it. Our 3D library provides the clock. It is extremely useful for finding out how much time has gone by since the animation began. This “elapsed time” is useful for animating all sort of things.

In this code, we use it to set the rotation of the ...

Get 3D Game Programming for Kids now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.