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>

效果图:

相关推荐
番茄小酱001几秒前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼92119 分钟前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂21 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石30 分钟前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程31 分钟前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫1 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
落魄小二1 小时前
el-table 表格索引不展示问题
javascript·vue.js·elementui
y5236481 小时前
Javascript监控元素样式变化
开发语言·javascript·ecmascript
Justinc.1 小时前
CSS3新增边框属性(五)
前端·css·css3