携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情 >
Google员工创建了名为dat.GUI的库,用这个库可以很容易的创建出能够改变代码变量的界面组件,本文将从安装至实际使用进行说明。 Api文档链接在这里
step 1 下载安装
// 命令安装
npm install --save dat.gui
// 直接引用线上资源安装
<script src="https://cdn.bootcdn.net/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
step 2 引入/初始化
const dat = require('dat.gui');
// ES6
import * as dat from 'dat.gui';
// 声明
const gui = new dat.GUI();
step 3 正式使用
// 声明一个对象存储gui绑定的变量
const testObj ={color:'#fff',x:2}
// 创建一个我们所需要的gui
const gui = new dat.GUI(param);
// param为对象，其中可以包含的key值及含义见表格
// 添加普通控制器
gui.add(testObj,'x',0,100,1)
// testObj-对象
// 'x'-对应的属性
// 0 - 最小值（Number）
// 100 - 最大值（Number）
//1 - 每一步的大小（Number）
// 添加颜色控制-直接就出来色盘了
gui.addColor(testObj,'color')
// 打组 当我们的属性过多时，我们需要把一些不常用的属性折叠起来
let list = gui.addFolder('list的标题');
// 在list下添加子项
list.add(testObj, "x", 5, 175, 1);
// 默认list是关闭的，我们给他展开 (效果见图一)
list.open()
// 添加选中与非选中的切换框(true/false)
gui.add(cube,'visible')
图一
param参数常用属性解释[Object]
| 名称 | 类型 | 说明 |
|---|---|---|
| name | String | Gui的名称 |
| width | Number | Gui的宽度 |
| closed | Boolean | 是否折叠（默认为false） |
| closeOnTop | Boolean | 关闭按钮是否在顶部（默认为false） |
| hideable | Boolean | 是否采用h键进行显示隐藏的切换操作（默认为true），着实是隐藏小彩蛋了 |
修改gui的样式
// 通过gui.domElement获取gui的dom元素
// 如果需要在js里面修改的话直接使用dom的相关api就可以进行操作了，如果样式比较多，可以为dom绑定id
gui.domElement.id =`自定义id名`
console.error(gui.domElement)
// 添加回调
gui.addColor(colorObject,'color')
.onChange((newColor)=>{
cube.material.color.set(newColor)
})
// 绑定点击事件
let param= {running:()=>{ console.log('running') }) }}
gui.add(param,'running')
dat.GUI在三维场景中的实现
如果有哪里描述不准确或者有问题,欢迎大佬指正!
(≖ᴗ≖)✧
