Let's leverage dat.GUI to add more interactivity and customization to our application. Go ahead and try and add the following functionality:
- Create a dropdown so that you can select from the following car models provided in the common/models/ directory: bmw-i8, audi-r8, ford-mustang, and lamborghini-gallardo.
Hint
You can leverage carModelData to declaratively describe the car models and use the already created loadCar function with the appropriate information.
You can leverage carModelData to declaratively describe the car models and use the already created loadCar function with the appropriate information.
- Create a color picker to change the color of the loaded car.
Hint
By inspecting the car data files, you will find various indicators that signify which parts are body panels. These are described as paintAlias in carModelData, which can be used to change the Kd property of each individual item in the scene.
By inspecting the car data files, you will find various indicators that signify which parts are body panels. These are described as paintAlias in carModelData, which can be used to change the Kd property of each individual item in the scene.
- Create a slider to change the shininess of the selected car.
Hint
You can use paintAlias once again and update the Ks property of each individual item in the scene.
You can use paintAlias once again and update the Ks property of each individual item in the scene.
The following functionality has been implemented in ch09_03_showroom-controls.html, along with controls for each individual light, the background color, floor visibility, and so forth:
utils.configureControls
The utils.configureControls method is a simple abstraction on top of the dat.GUI interface to remove repetition and provide a more declarative way for describing our controls widget. You can use dat.GUI directly or build upon this simple helper function.
The utils.configureControls method is a simple abstraction on top of the dat.GUI interface to remove repetition and provide a more declarative way for describing our controls widget. You can use dat.GUI directly or build upon this simple helper function.