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!
JavaScript
x
48
48
1
function buildGui() {
2
clearGui();
3
/****************************** Light1 **************************/
4
var f1 = gui.addFolder('Light1');
5
addGui( 'lightcolor', spotLight.color.getHex(), function( val ) {
6
spotLight.color.setHex( val );
7
render();
8
}, true );
9
10
addGui( 'intensity', spotLight.intensity, function( val ) {
11
spotLight.intensity = val;
12
render();
13
}, false, 0, 2 );
14
15
/************************** Light2 **************************/
16
var f2 = gui.addFolder('Light2');
17
addGui( 'lightcolor 2', spotLight2.color.getHex(), function( val ) {
18
spotLight2.color.setHex( val );
19
render();
20
}, true );
21
22
addGui( 'intensity 2', spotLight2.intensity, function( val ) {
23
spotLight2.intensity = val;
24
render();
25
}, false, 0, 2 );
26
}
27
28
function addGui( name, value, callback, isColor, min, max ) {
29
var node;
30
param[ name ] = value;
31
32
if ( isColor ) {
33
node = gui.addColor( param, name ).onChange( function() {
34
callback( param[ name ] );
35
} );
36
} else if ( typeof value == 'object' ) {
37
node = gui.add( param, name, value ).onChange( function() {
38
callback( param[ name ] );
39
} );
40
} else {
41
node = gui.add( param, name, min, max ).onChange( function() {
42
callback( param[ name ] );
43
} );
44
}
45
gui.remember(param);
46
return node;
47
}
48
Advertisement
Answer
If you add the target (i.e. gui
or the folder) as parameter to addGui it should work fine.
something like this:
JavaScript
1
7
1
function addGui(gui, name, value, callback, isColor, min, max ) {
2
// ... stays the same
3
}
4
5
var f2 = gui.addFolder('Light2');
6
addGui(f2, 'lightcolor 2', /* ... */);
7