文章目录安装和引入包使用先定义GUI对象添加按钮添加滑块添加自定义折叠框 和 值变化事件bool类型勾选框颜色选择框枚举选择安装和引入包安装包npm i lil-gui引入包importGUIfromlil-gui;使用所有都是直接写在main.js下先定义GUI对象//定义一个gui对象constguinewGUI();添加按钮//定义一个对象对象里有两个键值对 值是两个匿名函数leteventObj{Fullscreen:function(){//全屏document.body.requestFullscreen();},ExitFullscreen:function(){document.exitFullscreen();}}//添加按钮 会自动识别属性的值是不是函数如果是会自动创建按钮gui.add(eventObj,Fullscreen).name(全屏);//不写name会默认用事件名当namegui.add(eventObj,ExitFullscreen).name(退出全屏);添加滑块//添加滑块 控制立方体的位置 -5到5是滑块的范围gui.add(cube.position,x,-5,5).name(平滑设置立方体x轴位置);//添加有固定步长的滑块gui.add(cube.position,x).min(-5).max(5).step(1).name(固定步长设置立方体的x轴位置);添加自定义折叠框 和 值变化事件letfoldergui.addFolder(固定步长设置位置)folder.add(cube.position,x).min(-5).max(5).step(1).name(固定步长设置立方体的x轴位置).onChange(v{console.log(v)});//值改变后立刻打印folder.add(cube.position,y).min(-5).max(5).step(1).name(固定步长设置立方体的y轴位置).onFinishChange(v{console.log(v)});//完成拖动后再打印folder.add(cube.position,z).min(-5).max(5).step(1).name(固定步长设置立方体的z轴位置);bool类型勾选框gui.add(material_red,wireframe).name(父物体线框模式).setValue(false);//使用setvalue来设置默认值wireframe是materal的一个属性设置是否以线框模式显示material_red.wireframetrue;颜色选择框//先定义一个颜色letcolorParams{cubeColor:#0000ff}//将选择框加入guigui.addColor(colorParams,cubeColor).name(立方体颜色).onChange(v{cube.material.color.set(v);});枚举选择gui.add(THREE.ColorManagement,workingColorSpace,{Linear:THREE.LinearSRGBColorSpace,SRGB:THREE.SRGBColorSpace,}).name(工作色彩空间).onChange((){material.needsUpdatetrue;});