Now that we have cars stored as JSON files, they are ready to be used in our WebGL scene. First, we have to let the user choose which car to visualize. That said, it's still a good idea to load one by default. To do so, we will write the following code inside the load function:
function goHome() {
camera.goHome([0, 0.5, 10]);
camera.setFocus([0, 0, 0]);
camera.setAzimuth(25);
camera.setElevation(-11);
}
function load() {
goHome();
loadCar('BMW i8');
}
We call goHome, a helper function, that sets the camera position to a particular point in our scene. This is defined as a function, since we'll later use it as a way to reset our camera location, as needed. Then, we call loadCar, which is where we supply the key of the car (for example, BMW i8) we want to load from the carModelData that we defined inside of configure. Let's see what loadCar looks like:
function loadCar(model) {
scene.objects = [];
scene.add(floor);
const { path, partsCount } = carModelData[model];
scene.loadByParts(path, partsCount);
selectedCar = model;
}
This function clears all of the objects in our scene, adds the already created floor instance, and extracts the necessary data from the carModelData object, such as the path to the model and the number of parts to load.