Doing Cartwheels

We’ll add controls to our avatar later. But before moving on to the next lesson, let’s make the avatar do some flips and cartwheels.

Just like we did at the end of Chapter 1, Project: Creating Simple Shapes, we start by changing the very last line of the code (which is just above the </script>) tag at the end of the editor. Instead of telling the browser to show the scene one time, we animate the scene as follows.

 
// Now, animate what the camera sees on the screen:
 
function​ animate() {
 
requestAnimationFrame(animate);
 
avatar.rotation.z = avatar.rotation.z + 0.05;
 
renderer.render(scene, camera);
 
}
 
animate();

If you typed everything correctly, you might notice something odd. Just the head is spinning, not the whole ...

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.