We can set up the scene by defining some global variables for our application and writing the code for the configure function. Let's analyze this line by line:
let gl, program, scene, clock, camera, transforms, lights,
floor, selectedCar, lightPositions, carModelData,
clearColor = [0.9, 0.9, 0.9, 1];
function configure() {
// ...
}
At this stage, we want to set some of the WebGL properties, such as the clear color and the depth test. Then, we need to create a camera and set its initial position and orientation. We also need to create a camera controls instance so that we can update the position of the camera during scene interactions. Finally, we need to define the JavaScript variables that will be mapped to the shaders.
To accomplish these tasks, we will use Camera.js, Controls.js, Program.js, and Transforms.js from our architecture.
...
