dat.gui/example.html at master · dataarts/dat.gui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
<metaname="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<scripttype="text/javascript" src="build/dat.gui.js"></script>
<scripttype="text/javascript">
varobj={
message: 'Hello World',
displayOutline: false,

maxSize: 6.0,
speed: 5,

height: 10,
noiseStrength: 10.2,
growthSpeed: 0.2,

type: 'three',

explode: function(){
alert('Bang!');
},

color0: "#ffae23",// CSS string
color1: [0,128,255],// RGB array
color2: [0,128,255,0.3],// RGB with alpha
color3: {h: 350,s: 0.9,v: 0.3}// Hue, saturation, value
};

vargui=newdat.gui.GUI();

gui.remember(obj);

gui.add(obj,'message');
gui.add(obj,'displayOutline');
gui.add(obj,'explode');

gui.add(obj,'maxSize').min(-10).max(10).step(0.25);
gui.add(obj,'height').step(5);// Increment amount

// Choose from accepted values
gui.add(obj,'type',['one','two','three']);

// Choose from named values
gui.add(obj,'speed',{Stopped: 0,Slow: 0.1,Fast: 5});

varf1=gui.addFolder('Colors');
f1.addColor(obj,'color0');
f1.addColor(obj,'color1');
f1.addColor(obj,'color2');
f1.addColor(obj,'color3');

varf2=gui.addFolder('Another Folder');
f2.add(obj,'noiseStrength');

varf3=f2.addFolder('Nested Folder');
f3.add(obj,'growthSpeed');

obj['Button with a long description']=function(){
console.log('Button with a long description pressed');
};
gui.add(obj,'Button with a long description');

</script>
</body>
</html>