当前位置: 首页> 教育> 大学 > dat.gui图形用户页面

dat.gui图形用户页面

时间:2025/7/9 11:47:10来源:https://blog.csdn.net/2301_77523019/article/details/139579426 浏览次数: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>

效果图:

关键字:dat.gui图形用户页面

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: