在页面添加模型后，如果需要页面中的模型展现出不同的位置、形态或颜色，初学者可能只会去一行一行的修改对应的属性和代码，这样工作效率不仅低，对于初学者来说学习效率也不高，所以今天介绍一下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(*≧▽≦)ツ┏━┓
