Wie füge ich Ordner in dat.gui hinzu?

Question

Ich versuche, Ordner für die Lichter in einem three.js-Projekt hinzuzufügen, das ich aus einem three.js-Beispiel kopiert habe. Aber ich kann es nicht funktionieren. Ich denke, ich sollte f1 = add.folder ('light1') verwenden und dann irgendwie die Parameter zu f1 mit f1.add ('intensity') usw. hinzufügen ... aber wie macht man das, wenn der Code so aufgebaut ist? node = f1.add() funktioniert nicht!

 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

Wenn Sie das Ziel (das heißt gui oder der Ordner) als Parameter in den addGui es sollte funktionieren.

etwas wie folgt aus:

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

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