dat.GUi入门

dat.Ui入门

---

1.GUI

一个轻量型的JavaScript库，他能提供便捷的方式，让你去修改或者操作js中的变量和函数。

2.操作

yarn add dat.gui   ||  yarn add @types/dat.gui  / /安装

3.导入

import * as dat from 'dat.gui';

4.使用

  const gui = new dat.GUI({}) //创建GUI实例
  // 创建实例的时候 new dat.GUI(params)

Param	Type	Default	Description
[params]	Object
[params.name]	String		给生成的GUI的名字
[params.load]	Object		一个表示保存GUi状态的的json对象
[params.parent]	dat.gui.GUI		嵌套gui
[params.autoPlace]	Boolean	true
[params.hideable]	Boolean	true	是否能够隐藏面板，如果为true的状态的话，键盘按h就可以重新呼唤出来
[params.closed]	Boolean	false	如果为true，面板初始化就是关闭的
[params.closeOnTop]	Boolean	false	如果为true，面板关闭按钮在正上方

在这个时候，我们的面板就生成成功，但是并没有能够调整的东西

​ 5.生成面板之后我们gui的实例上有哪些方面能够提供给我们来操作gui面板，并且在上面添加各种样式呢？

new GUI([params])
.domElement : DOMElement //gui实例的dom节点
.parent : dat.gui.GUI // 我们创建new dat.GUI({parent:other GUI}),如果有嵌套在别的GUI里，这里可以获取父gui的实例
.autoPlace : Boolean 
.closeOnTop : Boolean //关闭面板按钮的位置是否在上面
.preset : String
.width : Number //GUI面板宽度
.name : String  //GUI的名字
.closed : Boolean //GUI是否关闭
.load : Object 
.useLocalStorage : Boolean
.add(object, property, [min], [max], [step]) ⇒ Controller //在GUI面板上添加操作的
@object  要操作的对象
@property 需要操作的对象中的属性
@min 最小值 
@max 最大值
@step 每次拖动滚动条的步幅，就是一次拖动增加多少，默认是1
@Controller 操作数据之后能够调用的api
.addColor(object, property) ⇒ Controller //在GUI面板上增加拾色器
.remove(controller) //删除控制器 就是我们上面增加的
.destroy()  
.addFolder(name) ⇒ dat.gui.GUI //增加GUI上文件夹的面板，
.removeFolder(folder) //删除文件夹
.open() 
.close()
.hide()
.show()
.getRoot() ⇒ dat.gui.GUI
.getSaveObject() ⇒ Object

开始使用

const gui = new dat.GUI({})

1.假如我们有个需要设置的对象

const obj = {
 myBoolean: true,
 myString: 'lil-gui',
 myNumber: 1,
 myFunction: function () {
   alert('hi')
 }
}

2.我现在想在面板上面去设置我这个对象中的每个值，拖过输入，拖动，方式

 gui.add(obj, 'myBoolean').onChange((e) => { console.log(e) }) // 单选
 gui.add(obj, 'myString').onChange((e) => { console.log(e) })  // 文本
 gui.add(obj, 'myNumber').onChange((e) => { console.log(e) })  // 数字
 gui.add(obj, 'myFunction').onChange((e) => { console.log(e) })  // 按钮
.add(object, property, [min], [max], [step]) ⇒ Controller //在GUI面板上添加操作的
@object  要操作的对象
@property 需要操作的对象中的属性
@min 最小值 
@max 最大值
@step 每次拖动滚动条的步幅，就是一次拖动增加多少，默认是1
@Controller 操作数据之后能够调用的api

GUI会根据我们需要操作对象值的类型来自动推导出面板设置的样子

.add(要操作的对象，要操作对象的属性).onchange() 在面板上操作之后调用的函数，里面获取到改变之后的值。

布尔值自动识别为chenckbox，字符串类型的属性设置为输入框， 数字类型的则为数字框

3.在gui面板上添加颜色

 const palette = {
   color1: '#FF0000', // CSS string
   color2: [0, 128, 255], // RGB array 
   color3: [0, 128, 255, 0.3], // RGB with alpha
   color4: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
 };
 gui.addColor(palette, 'color1')  //
 gui.addColor(palette, 'color2');
 gui.addColor(palette, 'color3');
 gui.addColor(palette, 'color4');
颜色类型的值GUI会自动推导，第一个推导为拾色器

4.创建文件夹

说是文件夹，其实是一个折叠面板类似的东西

 function updateCamera() {
   camera.updateProjectionMatrix()
 } 
const folder = gui.addFolder('控制摄像机视角  的文件夹') 
 folder.add(camera, 'fov', 1, 180).onChange(updateCamera)
 folder.add(camera, 'near', 1, 200).onChange(updateCamera)
 folder.add(camera, 'far', 1, 200).onChange(updateCamera)

效果