dat.gui图形用户页面

一、导入

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();

二、控制器

html 复制代码
<!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>

效果图:

相关推荐
Zz_waiting.2 小时前
Javaweb 14.4 Vue3 视图渲染技术
前端·javascript·vue.js
前端开发爱好者2 小时前
一键 i18n 国际化神库!适配 Vue、React!
前端·javascript·vue.js
前端开发爱好者2 小时前
Vite 移动端调试利器!开发效率飙升 300%!
前端·javascript·vue.js
BillKu3 小时前
容器元素的滚动条回到顶部
前端·javascript·vue.js
weixin_423391933 小时前
React 19 全面解析:颠覆性的新特性与实战指南
前端·javascript·react.js
weixin_423391933 小时前
React Hooks 钩子
前端·javascript·react.js
CUGGZ3 小时前
第三代 React,怎么玩?
前端·javascript·react.js
星哥说事3 小时前
狂揽82.7k的star,这款开源可视化神器,轻松创建流程图和图表
前端
硅基宙宇AIGC3 小时前
阿里Qoder重磅登场:AI编程平台新王者,程序员的饭碗要换了吗?
前端
影i3 小时前
跨域登录 / Token 共享 踩坑记录
前端