一个有用的属性控件：dat.gui

在很多地方看到一个有用的控件 dat.gui
更新于: 2022-03-24 09:08:37

基本的demo

dat.gui 预览图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"
        integrity="sha512-WoO4Ih0CDOSLYafy22wZD/mcJ7k0ESLqtQsFa6zFKnEUrbtuGU+GkLtVhgt93xa2qewG5gKEC6CWlN8OaCTSVg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <title>Document</title>
</head>
<body>
    <div id="main"></div>
    <script>
        var testObj = { x: 10, y: "20", z: 30, color: '#66ccff', };
        var gui = new dat.GUI();
        var f = gui.addFolder('入门');
        f.add(testObj, "x", 5, 175, 1);
        f.add(testObj, "y");
        f.add(testObj, "z");
        f.addColor(testObj, "color");
        f.open();
    </script>
</body>
</html>

控件参考

功能实现代码
初始化/添加到页面
var testObj = { x: 10, y: "20", z: 30, color: '#66ccff', };
var gui = new dat.GUI();
f.open();
添加目录/number控件
// 添加目录
var f = gui.addFolder('入门');
// 添加 numberspinner控件
f.add(testObj, "x", 5, 175, 1);
添加color控件
f.addColor(testObj, "color");
添加onchange
f.add(fontCfg, 'y', 0, 500)
  .step(1)
  .onChange((y) => {
    text.update({ y });
  });
添加enum类型
// 默认值{ fontFamily: 'Arial' }
// enum 类型列表: ['PingFang SC', 'fantasy', 'Arial', 'Times', 'Microsoft YaHei']

f.add({ fontFamily: 'Arial' }, 'fontFamily', ['PingFang SC', 'fantasy', 'Arial', 'Times', 'Microsoft YaHei'])
 .onChange((fontFamily) => {
	text.update({ fontFamily });
  });

参考