mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-10-10 06:54:18 +00:00
86 lines
2.2 KiB
HTML
86 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
</head>
|
|
<body>
|
|
<script type="text/javascript" src="build/dat.gui.min.js"></script>
|
|
<script type="text/javascript">
|
|
var obj = {
|
|
example: {
|
|
message: 'Hello World',
|
|
speed: 2,
|
|
displayOutline: false,
|
|
explode: function () {
|
|
console.log('Bang!');
|
|
},
|
|
},
|
|
|
|
noiseStrength: 10,
|
|
growthSpeed: 0.2,
|
|
maxSize: 6,
|
|
message: null,
|
|
speed: null,
|
|
|
|
flow: {
|
|
speed: 0.4,
|
|
noiseStrength: 10
|
|
},
|
|
|
|
letters: {
|
|
growthSpeed: 0.2,
|
|
maxSize: 10,
|
|
message: 'folders'
|
|
},
|
|
|
|
colors: {
|
|
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
|
|
}
|
|
};
|
|
|
|
var gui = new dat.gui.GUI();
|
|
|
|
gui.remember(obj);
|
|
gui.remember(obj.example);
|
|
gui.remember(obj.flow);
|
|
gui.remember(obj.letters);
|
|
|
|
gui.add(obj.example, 'message').onFinishChange(function(value) {
|
|
// Fires when a controller loses focus.
|
|
console.log("obj.example.message = " + value);
|
|
});
|
|
|
|
gui.add(obj.example, 'speed', -5, 5);
|
|
gui.add(obj.example, 'displayOutline');
|
|
gui.add(obj.example, 'explode');
|
|
|
|
gui.add(obj, 'noiseStrength').step(5); // Increment amount
|
|
gui.add(obj, 'growthSpeed', -5, 5); // Min and max
|
|
gui.add(obj, 'maxSize').min(0).step(0.25); // Mix and match
|
|
|
|
// Choose from accepted values
|
|
gui.add(obj, 'message', [ 'pizza', 'chrome', 'hooray' ] );
|
|
|
|
// Choose from named values
|
|
gui.add(obj, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );
|
|
|
|
var f1 = gui.addFolder('Flow Field');
|
|
f1.add(obj.flow, 'speed');
|
|
f1.add(obj.flow, 'noiseStrength');
|
|
|
|
var f2 = gui.addFolder('Letters');
|
|
f2.add(obj.letters, 'growthSpeed');
|
|
f2.add(obj.letters, 'maxSize');
|
|
f2.add(obj.letters, 'message');
|
|
|
|
gui.addColor(obj.colors, 'color0');
|
|
gui.addColor(obj.colors, 'color1');
|
|
gui.addColor(obj.colors, 'color2');
|
|
gui.addColor(obj.colors, 'color3');
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html> |