three.js的Gui面板使用方法

在页面添加模型后，如果需要页面中的模型展现出不同的位置、形态或颜色，初学者可能只会去一行一行的修改对应的属性和代码，这样工作效率不仅低，对于初学者来说学习效率也不高，所以今天介绍一下three.js中内置的Gui面板，以方便初学者进行开发和学习。

一、首先导入lil.gui

import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";

可在node_modules中找到

二、创建GUI

// 创建GUI
const gui = new GUI();

三、创建事件对象

let eventObj = {
    Fullscreen: function(){
         // 全屏
        document.body.requestFullscreen();
        console.log("全屏");
    },
    ExitFullscreen: function(){
         // 退出全屏
        document.exitFullscreen();
        console.log("退出全屏");
    }
}

这里我定义了两个按钮事件，分别是全屏和退出全屏

四、为GUI添加按钮（事件）

ui.add(eventObj,"Fullscreen").name("全屏")
gui.add(eventObj,"ExitFullscreen").name("退出全屏")

效果如下：

除此之外，如果想将其打包进下拉列表中，可以使用addFolder

let folder = gui.addFolder("立方体位置")
// gui.add(cube.position,"x", -5,5).name("x轴")
folder.add(cube.position,"x").min(-10).max(10).step(0.5).name("x轴的位置").onChange((val)=>{//onChange类似事件监听，这是一个回调
    console.log("x轴的位置:", val);
})
folder.add(cube.position,"y").min(-10).max(10).step(0.5).name("y轴的位置").onFinishChange((val)=>{//onFinshChang为出触发完毕后触发回调
    console.log("y轴的位置", val);
})
folder.add(cube.position,"z").min(-10).max(10).step(0.5).name("z轴的位置")

效果如下：

以上就是使用three.js的GUI面板的方法 o(*≧▽≦)ツ┏━┓