如何在dat.gui中添加文件夹？

Question

我正在尝试为three.js示例中的three.js项目中的灯光添加文件夹。但我无法得到它的工作。我想我应该使用f1 = add.folder（'light1'），然后以某种方式将参数添加到f1与f1.add（'强度'）等......但如何做到这一点，当代码的结构是这样的？ 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

如果添加的目标（即gui或文件夹）作为参数传递给addGui它应该工作的罚款。

是这样的：

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

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