1️⃣5️⃣three.js_GUI辅助调试器

15、GUI辅助调试器

• 3D虚拟工厂在线体验

• GUI辅助调试器将原本需要修改代码调整参数并刷新页面的操作，简化为直接在GUI中实时调整，实现所见即所得的效果。

• 导入GUI 库

  //引入GUI辅助调试器
  import { GUI } from 'three/addons/libs/lil-gui.module.min.js'
  

• 创建GUI辅助调试器对象

  const gui = new GUI() // 实例化一个gui对象
  gui.domElement.style.right = '0px' //靠右
  gui.domElement.style.width = '300px' //宽度
  

• 修改 JavaScript 对象tempPosition的参数

   const tempPosition = {
   x: 30,
   y: 60,
   z: 50,
   };
   // gui界面上增加交互界面，改变tempPosition对应属性
   gui.add(tempPosition, 'x', 0, 100);
   gui.add(tempPosition, 'y', 0, 100);
   gui.add(tempPosition, 'z', 0, 100);
  

  ✅执行结果：
  

• 当前修改的tempPosition作为中间变量的方式会同步更新项目中多处引用，这种间接操作不够直观。

• 我们将改为直接绑定大树。

      //先定位大树1，并克隆、移动、加入场景
      const tempScene = scene.children.find((t) => t.name == 'Scene')
   	const tempTree = tempScene.children.find((t) => t.name == '树')
   	const tempBigTree = tempTree.children.find((t) => t.name == '大树1')
   	const newTree = tempBigTree.clone()
   	newTree.translateX(100)
   	newTree.translateZ(50)
   	tempTree.add(newTree)
  
   	// 位置分组
   	const positionFolder = gui.addFolder('位置');
   	positionFolder.add(newTree.position, 'x', -500, 500).name('X坐标');
   	positionFolder.add(newTree.position, 'y', -10, 100).name('Y坐标');
   	positionFolder.add(newTree.position, 'z', -100, 100).name('Z坐标');
   	positionFolder.open(); // 默认展开
  
   	// 缩放分组
   	const scaleFolder = gui.addFolder('缩放');
   	scaleFolder.add(newTree.scale, 'x', 0.1, 3).name('X轴').step(0.1);
   	scaleFolder.add(newTree.scale, 'y', 0.1, 3).name('Y轴').step(0.1);
   	scaleFolder.add(newTree.scale, 'z', 0.1, 3).name('Z轴').step(0.1);
  
   	// 颜色控制
   	const colorParams = {color: `#${newTree.children[0].material.color.getHexString()}`};
   	const appearanceFolder = gui.addFolder('外观');
   	appearanceFolder.addColor(colorParams, 'color').name('树叶颜色').onChange((value) => {newTree.children[0].material.color.set(value);});
   	appearanceFolder.add(newTree.children[0].material, 'wireframe').name('线框模式');
   	appearanceFolder.add(newTree.children[0].material, 'transparent').name('透明');
   	appearanceFolder.add(newTree.children[0].material, 'opacity', 0, 1).name('透明度').step(0.1);
  
   	// 旋转控制
   	const rotationFolder = gui.addFolder('旋转');
   	rotationFolder.add(newTree.rotation, 'y', 0, Math.PI * 2).name('Y轴旋转').step(0.1);
     
   	// 添加重置按钮
   	const resetControls = {
      reset: function() {
      newTree.position.set(0, 0, 0);
      newTree.scale.set(1, 1, 1);
      newTree.rotation.set(0, 0, 0);
      newTree.children[0].material.color.set(0x00ff00); // 默认绿色 
      gui.updateDisplay();// 更新 GUI 控件
      }
      };
  
     gui.add(resetControls, 'reset').name('重置所有设置');
  

  ✅执行结果：

  

• 这里将参数分为四组：位置、缩放、颜色和旋转。每组包含一个或多个控制，调整这些控制时，大树的形态会实时更新，无需修改代码，直接在 GUI 中即可完成调整。

• 点击【专栏目录】查看专栏其他内容。