当前位置：网站首页>dat.GUI

dat.GUI

2022-07-01 22:27:00 【yzhSWJ】

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

原网站

版权声明
本文为[yzhSWJ]所创，转载请带上原文链接，感谢
https://blog.csdn.net/yuzheh521/article/details/125529795

边栏推荐

猜你喜欢

随机推荐