Graphics Reference
In-Depth Information
In this addControls function, we use the provided argument that contains
the rotationSpeed and scale properties in order to create the control
GUI. For each variable, we specify four arguments:
1. Object : The first argument is the JavaScript object that contains the
variables. In our case, it's the object passed to the addControls
function.
2. Name : The second argument is the name of the variable we want to
add. This should point to one of the variables (or functions) available
in the object that is provided in the first argument.
3. Minimum value : The third argument is the minimum value that
should be shown in the GUI.
4. Maximum value : The last argument specifies the maximum value
that should be shown.
3. At this point, we've got a GUI that can be used to control the variables, as
you can see in the following screenshot:
The only thing we now need to do is make sure that we update our object in
the render loop, which is based on the variables from the GUI. We can do
this easily in the render function, which is as follows:
function render() {
renderer.render(scene, camera);
scene.getObjectByName('cube').rotation.x+=
control.rotationSpeed;
scene.getObjectByName('cube').scale.set
(control.scale,
control.scale,
control.scale);
Search WWH ::




Custom Search