dat.GUI

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

GitHub 主页：GitHub - dataarts/dat.gui: Lightweight controller library for JavaScript.

使用步骤

（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')//只显示线框

相关阅读:
从传统云架构到云原生生态体系架构的演进
对于双列集合map的学习
Unity-2D像素晶格化消融
SpringCloud - Spring Cloud Alibaba 之 Gateway 集成Sentinel （十一）
【Android进阶】14、顶部应用栏
整理SpringBoot整合MyBatisPlus+Dubbo问题解决方法
vue大型电商项目尚品汇（后台篇）day03
halcon 区域Region(HObject)的传输
驱动开发：通过PIPE管道与内核层通信
【C语言刷LeetCode】1371. 每个元音包含偶数次的最长子字符串(M)

原文地址：https://blog.csdn.net/yuzheh521/article/details/125529795