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