当前位置：首页 > news >正文

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

news 来源：原创 2025/4/23 9:25:57

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('重置所有设置');