Time for Action: Bouncing Ball

Let's look at an example covering how we'd animate many objects in our scene:

1. Open ch05_03_bouncing-balls.html in your browser:

2. The orbiting camera is activated by default. Move the camera and you will see how all the objects adjust to the global transform (camera) and continue bouncing according to their local transforms.
3. Let's explain how we keep track of each ball in more detail.
4. Define the appropriate global variables and constants:

let
  gl, scene, program, camera, transforms,
  elapsedTime, initialTime,
  fixedLight = false,
  balls = [],
  sceneTime = 0,
  animationRate = 15,
  gravity = 9.8,
  ballsCount = 50;

5. Initialize the balls array. We use a for loop in the load function to achieve this:

function load() {
  scene.add(new Floor(80, 2));
  for (let i = 0; i < ballsCount; i++) {
    balls.push(new BouncingBall());
    scene...