A couple of guys from Google created a library called dat.GUI (you can find the documentation online at http://code.google.com/p/dat-gui/), which allows you to very easily create a simple user interface component that can change the variables in your code. In this part of the chapter, we'll use dat.GUI to add a user interface to our example that allows us to:
Control the speed of the bouncing ball
Control the rotation of the cube
Just like we had to do for the statistics, we will first add this library to the <header> of our HTML page by using the following code:
<script type="text/javascript" src="../libs/dat.gui.js"></script>
The next thing that we need to configure is a JavaScript object which will hold the properties that we want to change using the dat.GUI library. In the main part of our JavaScript code, we will add the following JavaScript object:
var controls = new function() {
this.rotationSpeed = 0.02;
this.bouncingSpeed = 0.03;
}In this JavaScript object we will define two properties: this.rotationSpeed and this.bouncingSpeed along with their default values. Next, we will pass this object into a new dat.GUI object and define the range for these two properties as shown:
var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
The rotationSpeed and bouncingSpeed properties are both set to a range from 0 to 0.5. All that we need to do now is make sure that in our render loop, we reference these two properties directly, so that when we make changes through the dat.GUI user interface, it immediately affects the rotation and bounce speed of our objects. This is shown as follows:
function render() {
...
cube.rotation.x += controls.rotationSpeed;
cube.rotation.y += controls.rotationSpeed;
cube.rotation.z += controls.rotationSpeed;
step+=controls.bouncingSpeed;
sphere.position.x = 20+( 10*(Math.cos(step)));
sphere.position.y = 2 +( 10*Math.abs(Math.sin(step)));
...
}Now when you run this example (05-control-gui.html), you'll see a simple user interface that you can use to control the bouncing and rotation speeds of the objects:
