I'm attempting to incorporate folders for the lights in a three.js project that I borrowed from a three.js example. However, I am struggling to make it work. From what I gather, I should use f1=add.folder('light1') and then somehow add the parameters to f1 with f1.add('intensity') etc... but how can I achieve this when the code is structured in this manner? node = f1.add() doesn't work!
function createGUI() {
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;
}