dat.GUI 是一个轻量级的图形用户界面库（GUI 组件），使用这个库可以很容易地创建出能够改变代码变量的界面组件。
使用步骤
（1）首先在页面的 <head> 标签中添加这个库。
<script type="text/javascript" src="../libs/dat.gui.js"></script>
（2）定义一个 JavaScript 对象（这里假设叫做 controls），该对象将保存希望通过 dat.GUI 改变的属性。
var controls = new function () {
this.rotationSpeed = 0.02;
//......
};
（3）接下来需要将这个 JavaScript 对象传递给 dat.gui 对象，并设置各个属性的取值范围。
var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed', 0, 0.5); //......
（4）最后当用户对 dat.GUI 控件进行操作时，controls 里的属性值也会同步修改。我们在程序中直接引用这个属性值就好了。
demo
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++初始化gui++++++++++++++++++++++++++++++++++++++++++++
var gui = new dat.GUI();
gui.add(cube.position, "x")
.min(0)
.max(5)
.step(0.01)
.name("移动x轴坐标")
.onChange(value => {
console.log('被修改后的值:', value)
})
.onFinishChange(value => {
console.log('完全停下出发', value)
})
//+++++++++++++++++修改物体颜色++++++++++++++
const params = {
color: '#ffff00',
fn: () => {
//让物体运动起来
gsap.to(cube.position, { x: 5, duration: 5, yoyo: true, repeat: -1 })
}
}
gui.addColor(params, "color")
.onChange(value => {
console.log('被修改后的值:', value)
cube.material.color.set(value)
})
//+++++++++++++++++++++是否显示 选项框++++++++++++++++
gui.add(cube, "visible").name('是否显示')
//+++++++++++设置按钮触发事件++++++++++++++++++++++++++
gui.add(params, 'fn').name('点击立方体运动')
//+++++++++++++++++把配置放在某一个文件夹下+++++++++++++++++++++
var folder = gui.addFolder("设置立方体")//文件夹名
//把设置都放在文件夹下面
folder.add(cube.material, 'wireframe')//只显示线框
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
