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>

效果图:

相关推荐
一壶浊酒..16 分钟前
ajax局部更新
前端·ajax·okhttp
苏打水com42 分钟前
JavaScript 面试题标准答案模板(对应前文核心考点)
javascript·面试
Wx-bishekaifayuan1 小时前
基于微信小程序的社区图书共享平台设计与实现 计算机毕业设计源码44991
javascript·vue.js·windows·mysql·pycharm·tomcat·php
DoraBigHead1 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
彩旗工作室2 小时前
WordPress 本地开发环境完全指南:从零开始理解 Local by Flywhee
前端·wordpress·网站
iuuia2 小时前
02--CSS基础
前端·css
kyle~2 小时前
Qt---setAttribute设置控件或窗口的内部属性
服务器·前端·c++·qt
FIN66682 小时前
昂瑞微:射频与模拟芯片领域的国产领军者
前端·人工智能·科技·前端框架·智能
苦夏木禾2 小时前
css实现表格中最后一列固定
前端·javascript·css