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

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

How to add folders in dat.gui?

javascript

three.js

dat.gui