dat.GUI - an Easy Way to Allow Users to Adjust Variables in a Three.js Visualization

Generate a control tool
for your three.js viz
with a few lines of code

As part of playing with the "split depth GIF" effect in three.js, and as part of simply learning about three.js itself, I wanted to have a way to adjust various parameters so that I could see the effectiveness (or lack thereof) for certain combinations of values.

I have done this with the dat.GUI library by the Google Data Arts Team (source on github).

My sample interactive visualization that motivated my interest in dat.GUI is available at https://learnforeverlearn.com/splitdepth/.

The purpose of this note is to provide some details on basic usage of the fantastically useful dat.GUI tool. Links to more advanced tutorials are provided below.

What It Looks Like in Use

Here is a few screenshots of my basic usage of this little library (live demo at https://learnforeverlearn.com/splitdepth/). Code snippets and what they do are shown in the section farther below.

Default screen location of dat.GUI
(this screenshot from https://learnforeverlearn.com/splitdepth/)


dat.GUI can be minimized by the user as desired
(this screenshot from https://learnforeverlearn.com/splitdepth/)

Basic Usage and Examples

dat.GUI will create the type of element based on the type of value you initially specify. If the property has a boolean value it will create a checkbox. If the property is a function, it will create a button.

Prior to Adding Controls
var props = {hideBars:false,
        depthZ_Fraction:0.015;
  barColor: '#FFFFFF';
  barDirection:'Vertical'};

var datGui = new dat.GUI();
Checkboxes
hideBarsController = 
     datGui.add(props,'hideBars')
            .name('Hide Bars')
            .listen();
hideBarsController.onChange(
                  function(newValue) {
               //do whatever you want...
           });
Sliders
barDepthController = 
    datGui.add(props,'depthZ_Fraction',0,0.05)
             .name('Bar Depth')
             .listen();

barDepthController.onChange(
                   function(newValue) {
       //do whatever you want...
     });

Dropdowns
barDirection = 
    datGui.add(props,'barDirection',
                ['Vertical', 'Horizontal'])
           .name('Bar Direction')
           .listen();
    
barDirection.onChange(
              function(newValue) {
         //do whatever you want...
       });
Color (color picker on mouseover)
barColorCtrl = 
    datGui.addColor(props,'barColor')
           .name('Bar Color')
           .listen();

barColorCtrl.onChange(
             function(newColor) {
        //do whatever you want...
      });

Buttons
props.resetAnimation = 
              function() {
  //do whatever
       };

datGui.add(props,'resetAnimation')
       .name('Reset Animation');

For More Information

I have yet to explore other slick features of dat.GUI - these are discussed in more detailed tutorials available at:

Popular Posts