5.three.js GUI的使用

引入依赖

import { GUI } from 'three/examples/jsm/libs/dat.gui.module'

初始化GUI实例

gui = new GUI()

生成添加物体等操作的方法

export default class guiAction {    scene:any    speed:number=0.01    constructor(scene:any){        this.scene=scene    }
    addcube = () => {      const cubeModel = new randomCube(this.scene.children.length)      this.scene.add(cubeModel);    }.....

生成上面class类的实例

gui.addFolder可以对菜单进行分类。.name可以重命名，.remember可以存储当前参数

gui.domElement.style可以修改GUI 的样式

const GuiControls:any=new guiAction(scene)
const initGUI = () => {    let guigroup1= gui.addFolder('model')    guigroup1.add(GuiControls, 'addline').name('添加线框');    guigroup1.add(GuiControls, 'addfont').name('添加文字');    guigroup1.add(GuiControls, 'addplane').name('添加平面');    guigroup1.add(GuiControls, 'addcube').name('添加立方体');    guigroup1.add(GuiControls, 'removecube').name('删除立方体');    let guigroup2= gui.addFolder('params')    guigroup2.add(GuiControls, 'speed',0,0.05).name('旋转速度');    gui.remember(controls);  }