• dat.GUI

    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

    1. //+++++++++++++++++++++++++++++++++++++++++++++++++++++++初始化gui++++++++++++++++++++++++++++++++++++++++++++
    2. var gui = new dat.GUI();
    3. gui.add(cube.position, "x")
    4.   .min(0)
    5.   .max(5)
    6.   .step(0.01)
    7.   .name("移动x轴坐标")
    8.   .onChange(value => {
    9.     console.log('被修改后的值:', value)
    10.   })
    11.   .onFinishChange(value => {
    12.     console.log('完全停下出发', value)
    13.  
    14.   })
    15. //+++++++++++++++++修改物体颜色++++++++++++++
    16. const params = {
    17.   color: '#ffff00',
    18.   fn: () => {
    19.     //让物体运动起来
    20.     gsap.to(cube.position, { x: 5, duration: 5, yoyo: true, repeat: -1 })
    21.   }
    22. }
    23. gui.addColor(params, "color")
    24.   .onChange(value => {
    25.     console.log('被修改后的值:', value)
    26.     cube.material.color.set(value)
    27.   })
    28. //+++++++++++++++++++++是否显示 选项框++++++++++++++++
    29. gui.add(cube, "visible").name('是否显示')
    30. //+++++++++++设置按钮触发事件++++++++++++++++++++++++++
    31. gui.add(params, 'fn').name('点击立方体运动')
    32. //+++++++++++++++++把配置放在某一个文件夹下+++++++++++++++++++++
    33. var folder = gui.addFolder("设置立方体")//文件夹名
    34. //把设置都放在文件夹下面
    35. folder.add(cube.material, 'wireframe')//只显示线框

  • 相关阅读:
    Nano 编辑器中，怎样保存和退出
    Java.lang.Class类 getAnnotation方法有什么功能呢？
    学习笔记——网络管理与运维——概述（背景）
    java 实现删除单链表中所有指定的结点以及如何清空单链表
    Golang gorm 一对一关系
    elasticSearch配置
    USB电路详细设计
    c++设计模式：单例模式
    痞子衡嵌入式：JLink命令行以及JFlash对于下载算法的作用地址范围认定
    java 数组转list
  • 原文地址：https://blog.csdn.net/yuzheh521/article/details/125529795