一、导入
1.npm安装
npm install --save dat.gui
引入：
// CommonJS:
const dat = require('dat.gui');
// ES6:
import * as dat from 'dat.gui';
const gui = new dat.GUI();
二、控制器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script src="dat.gui.min.js"></script>
<script>
const controls = {
num: 1,
a: 1,
b: 2,
c: 3,
bool: false,
color: "#ffffff",
x: 1,
y: 1,
z: 1
}
const gui = new dat.GUI();
gui.add(controls,'num').name("input输入");
gui.add(controls,'a',0,5,1).name("挡位输入");
gui.add(controls,'b').min(0).max(5).step(1).name("挡位输入");
gui.add(controls,'c',{ "值为1" : 1 , "值为2" : 2 , "值为3" : 3 }).name("选择输入");
gui.add(controls,'bool');
gui.addColor(controls,'color');
const f1 = gui.addFolder('分组输入');
f1.add(controls,'x');
f1.add(controls,'y');
f1.add(controls,'z');
</script>
</html>效果图：
