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>

效果图:

相关推荐
呆呆的心几秒前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟几秒前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
小old弟1 分钟前
用Sass循环实现炫彩文字跑马灯效果
前端
code_YuJun1 分钟前
Promise 基础使用
前端·javascript·promise
Codebee2 分钟前
OneCode自主UI设计体系:架构解析与核心实现
前端·javascript·前端框架
GIS之路5 分钟前
GIS 空间关系:九交模型
前端
邢同学爱折腾6 分钟前
当前端轮播图遇上Electron: 变身一款丝滑的 图片查看器
javascript·electron
xiguolangzi12 分钟前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
用户68238060322514 分钟前
前端会用到的数据结构--堆(HEAP)
前端
莫空000014 分钟前
深入理解JavaScript的Reflect API:从原理到实践
前端·面试