Getting Started - Three.js - page 28

Controlling the variables used in the
scene
When you're developing and writing JavaScript, you often need to tune some vari-
ables for the best visualization. You might need to change the color of a sphere,
change the speed of an animation, or experiment with more complex material proper-
ties. You can just change the source code, and reload the HTML, but that becomes te-
dious and time consuming. In this recipe, we'll show you an alternative way to quickly
and easily control the variables in your Three.js scene.
Getting ready
For this recipe, we also need an external JavaScript library called dat.gui . You can
download the latest version from https://code.google.com/p/dat-gui/ , or look into the
libs directory of the sources provided with this topic. To use this library, you first
have to include it in the top of your HTML file:
<script src="../libs/
dat.gui.min.js"></script>
In the source folder of this chapter, there is also a ready-to-use example, which
we'll explain in the following sections. When you open the 01.07-control-vari-
ables.html file, you'll see the following: