企业官网建设流程全解析

安装和引入包

安装包

npm i lil-gui

引入包

importGUIfrom"lil-gui";

使用

所有都是直接写在main.js下

先定义GUI对象

//定义一个gui对象constgui=newGUI();

添加按钮

//定义一个对象，对象里有两个键值对， 值是两个匿名函数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轴位置");

添加自定义折叠框 和 值变化事件

letfolder=gui.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.wireframe=true;

颜色选择框

//先定义一个颜色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.needsUpdate=true;});