Nowhere Near Ithaca: 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');`