Using dat.GUI to make experimenting easier

A couple of employees 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 variables in your code. In this last part of this chapter, we'll use dat.GUI to add a user interface to our example that allows us to change the following:

Control the speed of the bouncing ball
Control the rotation of the cube

Just like we had to do for the statistics, we first add this library to the <head> element of our HTML page, as follows:

<script src="../libs/dat.gui.js"></script>

The next thing we need to configure is a JavaScript object that will hold the properties we want to change using dat.GUI. In the main part of our JavaScript code, we add the following JavaScript object, as follows:

var controls = new function() {
  this.rotationSpeed = 0.02;
  this.bouncingSpeed = 0.03;
}

In this JavaScript object, we define two properties—this.rotationSpeed and this.bouncingSpeed—and their default values. Next, we pass this object into a new dat.GUI object and define the range for these two properties, as follows:

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 of 0 to 0.5. All we need to do now is make sure that in our renderScene 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, as follows:

function renderScene() {
  ...
  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. A screenshot of the bouncing ball and the rotating cube is shown here:

Using dat.GUI to make experimenting easier

If you've looked at the examples in your browser, you might have noticed that when you change the size of your browser, the scene doesn't automatically scale. In the next section, we'll add this as a final feature for this chapter.

Learning Three.js: The JavaScript 3D Library for WebGL - Second Edition

By : Jos Dirksen

Learning Three.js: The JavaScript 3D Library for WebGL - Second Edition

By: Jos Dirksen

Overview of this book

Using dat.GUI to make experimenting easier

Learning Three.js: The JavaScript 3D Library for WebGL - Second Edition

By : Jos Dirksen

Learning Three.js: The JavaScript 3D Library for WebGL - Second Edition

By: Jos Dirksen

Overview of this book

Using dat.GUI to make experimenting easier

Delete Bookmark