Three.js - 图形界面工具（lil-gui）（四）

「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」

lil-gui

• 为了能够快速地搭建three.js的交互UI，社区就出现了各种UI 库，其中lil-gui 是 three.js社区中非常流行的 UI 库。选择它是因为语法简单，上手快。
• 主要作用，获取一个对象和该对象上的属性名，并根据属性的类型自动生成一个界面组件来操作该属性。
• 使用它后，我们可以通过界面组件来控制场景中的物体，提高调试效率。

开始使用

• 本节使用的代码是在上一节的基础上修改。
• lil-gui常用的方法：

1. .add() 将控制器添加到GUI，使用typeof运算符推断控制器类型。
2. .addColor() 将颜色控制器添加到GUI。
3. .addFolder() 以层级的形式创建一个新的GUI。

简单示例

• 使用非常简单，引入控件。实例化GUI后，通过.add()传入要修改的对象，和对象中要修改的属性名。
• 它能自动生成对应的界面组件，修改界面组件的值，实时同步到对象中。

import { GUI } from 'https://threejsfundamentals.org/threejs/../3rdparty/dat.gui.module.js'

const obj = {
    myBoolean: true,
    myString: 'lil-gui',
    myNumber: 1,
    myFunction: function () {
      alert('hi')
    }
}
const gui = new GUI()
gui.add(obj, 'myBoolean') // 单选
gui.add(obj, 'myString') // 文本
gui.add(obj, 'myNumber') // 数字
gui.add(obj, 'myFunction') // 按钮

正式使用

• 在上一节中我们的辅助相机是固定，下面我们就来通过界面组件来修改辅助相机。
• 修改相机矩阵属性。这里使用.onChange()在值修改后调用回调函数，因为相机矩阵修改需要调用.updateProjectionMatrix()才会生效。

    import { GUI } from 'https://threejsfundamentals.org/threejs/../3rdparty/dat.gui.module.js'
    ...
    // 辅助相机
    ...
    function updateCamera() {
        camera1.updateProjectionMatrix()
    }
    const gui = new GUI()
    gui.add(camera1, 'fov', 1, 180).onChange(updateCamera)
    gui.add(camera1, 'near', 1, 200).onChange(updateCamera)
    gui.add(camera1, 'far', 1, 200).onChange(updateCamera)
    ...

• 修改全局相机位置。.position是一个Vector3()不能直接传入。我们需要自定义一个对象来操作他。

      class PositionGUI {
        constructor(obj, name) {
          this.obj = obj
          this.name = name
        }
        get modify() {
          return this.obj[this.name]
        }
        set modify(v) {
          this.obj[this.name] = v
        }
      }
      const folder = gui.addFolder('全局Position')
      folder.add(new PositionGUI(camera.position, 'x'), 'modify', 0, 200).name('x')
      folder.add(new PositionGUI(camera.position, 'y'), 'modify', 0, 200).name('y')
      folder.add(new PositionGUI(camera.position, 'z'), 'modify', 0, 200).name('z')

• 创建一个新对象，修改属性的get、set方法。在方法中我们就可以修改其他对象来完成操作。

总结

上面只是把常用的方式简单做了简述，详细的需要在官网中去了解。在three.js的社区中，有很多好用的控件不需要你全部理解，只需要知道有什么控件，是做什么用的。在以后的开发中会减轻很多工作量。