dat.gui图形用户页面

乔冠宇

于 2024-06-10 23:53:42 发布

阅读量524

点赞数 6

分类专栏：前端文章标签：前端 javascript

本文链接：https://blog.csdn.net/2301_77523019/article/details/139579426

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

一、导入

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

二、控制器

<!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>

效果图：