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

Question

我正在尝试在从three.js 示例复制的three.js 项目中为灯光添加文件夹。但我无法让它工作。我想我应该使用 f1=add.folder('light1') ，然后以某种方式使用 f1.add('intensity') 等将参数添加到 f1 ......但是当代码结构像这样时，如何做到这一点？node = f1.add() 不起作用！

        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', /* ... */);