Graphics Reference
In-Depth Information
As you can see in the preceding screenshot, a menu is available in the top-right
corner that you can use to control the rotation speed and the scaling of the cube.
How to do it...
To use this library for yourself, you only need to do a couple of small things:
1. The first thing you need to do is define a JavaScript object that contains the
properties you want to control. In this case, you need to add it to the
init
function and create a new global JavaScript variable with the name,
con-
trol
:
...
var control;
function init() {
...
control = new function() {
this.rotationSpeed = 0.005;
this.scale = 1;
};
addControls(control);
// call the render function
render();
}
2. The control object in the preceding code contains two properties:
rota-
tionSpeed
and
scale
. In the
addControls
function, we'll create the UI
component that is shown in the preceding screenshot:
function addControls(controlObject) {
var gui = new dat.GUI();
gui.add(controlObject,
'rotationSpeed', -0.1, 0.1);
gui.add(controlObject, 'scale',
0.01, 2);
}
