THREE.js学习笔记7——Debug UI

这小节学习的是如何构建Debug UI
对于一些具有创造性的项目，可能会有很多个变量，Debug UI可以让开发人员，设计师，甚至是客户都能轻松调整这些变量
安装lil-gui，直接npm install lil-gui
大部分的参数调整，都可以通过gui.add()来添加，gui.add()含有两个参数，第一个是需要修改的物体的属性，第二个是需要修改这个物体的属性中的哪个值。同时，只能修改属于这个物体的属性的某个值
第3，4，5个参数分别是最小值，最大值和幅度

import GUI from 'lil-gui';
const gui = new GUI()
//这样只能输入数字去控制，不是很方便
gui.add(cube.position, 'y')
//像这样多放入几个参数，就会有可拖拽的控制条了
gui.add(cube.position, 'x', -2, 2, 0.01)
//也可以这样写
gui.add(cube.position, 'z').min(-2).max(2).step(0.01)

lil-gui将检测您想要调整什么类型的属性并使用对应接口，写一个范围，就会有可拖拽的控制条，写一个布尔类型的，就会出现复选框

//是否可见
gui.add(cube, 'visible')
//是否为线框模式
gui.add(material, 'wireframe')

修改颜色，需要使用.addColor()，因为颜色不是一个字符串，也不是一个布尔值或者数字，它是一个Three.js中Color类

gui.addColor(material, 'color')
//同时可以绑定onchang事件来获取确切的值
gui.addColor(material, "color").onChange((value) => {
  console.log(value.getHexString());
});

//确保在gui上获取的颜色和材质中的颜色一致
const debugObject = {};
debugObject.color = "#fff";
gui.addColor(debugObject, "color").onChange((value) => {
  material.color.set(debugObject.color);
});

同时也可以绑定函数，通过点击按钮触发事件

debugObject.spin = () => {
  gsap.to(cube.rotation, { duration: 1, y: cube.rotation.y + Math.PI * 2 });
};
gui.add(debugObject, "spin").name("旋转一周");

但是，如果想要修改像widthSegments(宽度细分数)这样的值时，直接绑定就会出错，因为像widthSegments这样的参数，在渲染方块时，只会执行一次。所以，在修改细分数时，将旧的模型销毁，重新渲染一个新的模型

debugObject.segments = 1;
gui.add(debugObject, "segments", 1, 20, 1).onChange((e) => {
  //在创建新的方块之前，需要将旧的方块销毁，不然会导致内存泄漏
  cube.geometry.dispose();
  cube.geometry = new THREE.BoxGeometry(
    1,
    1,
    1,
    debugObject.segments,
    debugObject.segments,
    debugObject.segments
  );
});
//为了性能考虑，可以当变化停止时，在触发函数
gui.add(debugObject, "segments", 1, 20, 1).onFinishChange((e) => {
  cube.geometry.dispose();
  cube.geometry = new THREE.BoxGeometry(
    1,
    1,
    1,
    debugObject.segments,
    debugObject.segments,
    debugObject.segments
  );
});

当我们在调试窗口有很多调整项时，我们可以使用addFolder()来管理所有的调整项，同样，通过addFolder()新添加的文件夹，可以通过.add()方法像其中添加调整项

const cubeTweakes = gui.addFolder("Awesome cube");
cubeTweakes.add(debugObject, "spin").name("旋转一周");

同时在创建gui实例化的对象时，我们可以向其中添加更多的参数

const gui = new GUI({
  width: 500,//调试窗口的宽度
  title: "调试窗口",//名字
  closeFolders: true,//折叠所有子文件
});
gui.close();//折叠主文件
gui.hide();//隐藏主文件
//如果要使用键盘切换显隐，只需要给键盘绑定事件即可
addEventListener("keydown", (e) => {
  if (e.key == "h") {
    gui.show(gui._hidden);
  }
});