How to add folders in dat.gui?

Question

I'm trying to add folders for a the lights in a three.js project that i copied from a three.js example. But i can't get it working. I guess i should use f1=add.folder('light1') and then somehow add the parameters to f1 with f1.add('intensity') etc... but how to do this, when the code is structured like this ? node = f1.add() doesen't work!

        function buildGui() {
            clearGui();         
 /****************************** Light1 **************************/ 
            var f1 = gui.addFolder('Light1');
            addGui( 'lightcolor', spotLight.color.getHex(), function( val ) {
                spotLight.color.setHex( val );
                render();
            }, true );

            addGui( 'intensity', spotLight.intensity, function( val ) {
                spotLight.intensity = val;
                render();
            }, false, 0, 2 );

 /************************** Light2 **************************/  
            var f2 = gui.addFolder('Light2');
            addGui( 'lightcolor 2', spotLight2.color.getHex(), function( val ) {
                spotLight2.color.setHex( val );
                render();
            }, true );

            addGui( 'intensity 2', spotLight2.intensity, function( val ) {
                spotLight2.intensity = val;
                render();
            }, false, 0, 2 );
        }

        function addGui( name, value, callback, isColor, min, max ) {
            var node;
            param[ name ] = value;

            if ( isColor ) {
                    node = gui.addColor( param, name ).onChange( function() {
                    callback( param[ name ] );
                } );
            } else if ( typeof value == 'object' ) {
                    node = gui.add( param, name, value ).onChange( function() {
                    callback( param[ name ] );
                } );
            } else {
                    node = gui.add( param, name, min, max ).onChange( function() {
                    callback( param[ name ] );
                } );
            }
            gui.remember(param);
            return node;
        }  

Answer 1

The other answer does work, but an easier way would be following this js fiddle i found while looking for the same thing you are. Here it is:

https://jsfiddle.net/ikatyang/182ztwao/

var gui = new dat.GUI({ load: getPresetJSON(), preset: 'Preset1' });

var object1 = {
    type1_boolean: false,
  type2_string: 'string',
  type3_number: 0,
  type4_function: function () {
    alert('This is a function.');
  }
};

var object2 = {
    string1: 'string1',
  string2: 'string2'
};

var object3 = {
    color0: "#ffae23", // CSS string
  color1: [ 0, 128, 255 ], // RGB array
  color2: [ 0, 128, 255, 0.3 ], // RGB with alpha
  color3: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
};
// dat.GUI will modify colors in the format defined by their initial value.

// saveValues: gui.remember must be executed before gui.add
gui.remember(object1);
gui.remember(object2);

// setController: boolean, string, number, function
gui.add(object1, 'type1_boolean');
gui.add(object1, 'type2_string');

var folder1 = gui.addFolder('FolderNameA');
folder1.add(object1, 'type3_number', -5, 5);
folder1.add(object1, 'type4_function');

// collapse folder1
folder1.close();

var folder2 = gui.addFolder('FolderNameB');
folder2.add(object2, 'string1', {
    'key1': 'string_1',
  'key2': 'string_2',
  'key3': 'string_3'
});
folder2.add(object2, 'string2', [
    'string_1', 'string_2', 'string_3'
]);

var folder3 = gui.addFolder('FolderNameC');
folder3.addColor(object3, 'color0');
folder3.addColor(object3, 'color1');
folder3.addColor(object3, 'color2');
folder3.addColor(object3, 'color3');

// expand folder3
folder3.open();

// presetJSON: created from pressing the gear.
function getPresetJSON() {
    return {
    "preset": "Default",
    "closed": false,
    "remembered": {
      "Default": {
        "0": {
          "type1_boolean": false,
          "type2_string": "string",
          "type3_number": 0
        },
        "1": {
          "string1": "string1",
          "string2": "string2"
        }
      },
      "Preset1": {
        "0": {
          "type1_boolean": true,
          "type2_string": "string123",
          "type3_number": -2.2938689217758985
        },
        "1": {
          "string1": "string_2",
          "string2": "string_3"
        }
      }
    },
    "folders": {
      "FolderNameA": {
        "preset": "Default",
        "closed": false,
        "folders": {}
      },
      "FolderNameB": {
        "preset": "Default",
        "closed": false,
        "folders": {}
      },
      "FolderNameC": {
        "preset": "Default",
        "closed": false,
        "folders": {}
      }
    }
  };
}

.folder .dg ul {
  margin-top: 0 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

Again, not mine, but still useful.

Answer 2

If you add the target (i.e. gui or the folder) as parameter to addGui it should work fine.

something like this:

function addGui(gui, name, value, callback, isColor, min, max ) {
  // ... stays the same
}

var f2 = gui.addFolder('Light2');
addGui(f2, 'lightcolor 2', /* ... */);