three.js中dat.gui.js的使用

dat.GUI是一个轻量级的图形用户界面库，使用这个库可以很容易地创建出能够改变代码变量的界面组件。

一.使用方法

1、使用script标签添加dat.gui.js库

<script src="./js/dat.gui.js"></script>

2、定义一个对象，用来存储需要改变的属性

GUI={
   }

3、将上一步定义的对象传给dat.gui对象

var datGUI=new dat.GUI();
datGUI.add(GUI,"GUI中的对象名",取值范围);

二.控件类型

1、数字类型

var GUI={
   
	rotationSpeed:0.2
}
var gui=new dat.GUI();
gui.add(GUI,"rotationSpeed");   //当没有设置限制条件时，显示为一个输入框
gui.add(GUI,"rotationSpeed",0,1);    //当设置了最大值和最小值范围时，显示为slider滑块组件，右侧依旧是一个输入框

//单独设置最大值或最小值时，显示为一个输入框
gui.add(GUI, 'rotationSpeedX')