关于使用three.js的gui工具出现的bug，当切换到其他没有gui的页面的时候，gui工具还会存在，刷新才会消失，

问题原因：GUI 是独立于 Three.js 的 DOM 元素，路由切换时若未手动清除，会残留于页面中。单页应用（如 Vue/React）的路由切换不会自动清理非框架控制的 DOM 元素。（deepseek给我的回答）

解决方案：

1.在路由切换的钩子（如 Vue 的 beforeDestroy 或 React 的 useEffect 清理函数）中销毁 GUI：他这里给的关于vue的钩子函数是vue2的，我这里写的是vue3的onBeforeUnmount

import { onBeforeUnmount } from 'vue'
//这里gui这个变量有全局声明
onBeforeUnmount(() => {
  if (gui.value) {
    gui.value.destroy(); // 销毁 GUI
    gui.value = null;
  }
})

还有其他的解决方案是deepseek提供的，如下：

在 Three.js 项目中，当使用 GUI 工具（如 `dat.GUI` 或 `lil-gui`）时，如果遇到 **路由切换页面后 GUI 未自动关闭，必须手动刷新页面才能消失** 的问题，通常是因为 GUI 实例未被正确销毁。以下是解决方案：

---

### **问题原因**
1. **GUI 实例未销毁**：  
   GUI 是独立于 Three.js 的 DOM 元素，路由切换时若未手动清除，会残留于页面中。
2. **SPA 路由特性**：  
   单页应用（如 Vue/React）的路由切换不会自动清理非框架控制的 DOM 元素。

---

### **解决方案**

#### **1. 销毁 GUI 实例（通用方法）**
在路由切换的钩子（如 Vue 的 `beforeDestroy` 或 React 的 `useEffect` 清理函数）中销毁 GUI：
```javascript
// 以 dat.GUI 为例
let gui;

function initGUI() {
  gui = new dat.GUI();
  // 添加控件...
}

// 路由离开时销毁
function cleanup() {
  if (gui) {
    gui.destroy(); // 销毁 GUI
    gui = null;
  }
}

// Vue 示例
beforeDestroy() {
  cleanup();
}

// React 示例
useEffect(() => {
  initGUI();
  return () => cleanup(); // 组件卸载时清理
}, []);
```

#### **2. 隐藏 GUI 容器（快速修复）**
如果无法销毁实例，至少隐藏 GUI 的 DOM 元素：
```javascript
function hideGUI() {
  const guiContainer = document.querySelector('.dg.main'); // dat.GUI 的默认类名
  if (guiContainer) guiContainer.style.display = 'none';
}
```

#### **3. 使用 lil-gui 的自动清理（推荐）**
`lil-gui`（现代替代库）支持更友好的销毁：
```javascript
import { GUI } from 'lil-gui';

const gui = new GUI();

// 销毁 GUI
gui.destroy();
```

#### **4. 路由监听（框架集成）**
在路由库（如 Vue Router/React Router）中全局监听路由变化：
```javascript
// Vue Router 示例
router.beforeEach((to, from, next) => {
  const gui = window.gui; // 假设 GUI 实例挂载到全局
  if (gui) gui.destroy();
  next();
});
```

---

### **调试技巧**
1. **检查 DOM 残留**：  
   在开发者工具中查看是否有 `.dg` 或 `.lil-gui` 的 DOM 元素残留。
2. **确保单例模式**：  
   避免重复创建 GUI 实例，全局只保留一个引用。

---

### **完整示例（Vue + lil-gui）**
```javascript
<template>
  <div ref="canvasContainer"></div>
</template>

<script>
import { GUI } from 'lil-gui';

export default {
  data() {
    return {
      gui: null,
      params: { color: '#ff0000' }
    };
  },
  mounted() {
    this.initGUI();
  },
  beforeDestroy() {
    this.cleanup();
  },
  methods: {
    initGUI() {
      this.gui = new GUI();
      this.gui.addColor(this.params, 'color');
    },
    cleanup() {
      if (this.gui) {
        this.gui.destroy();
        this.gui = null;
      }
    }
  }
};
</script>
```

---

### **为什么刷新能解决问题？**
- 刷新页面会强制清空所有 DOM 和 JavaScript 上下文，包括残留的 GUI。  
- **正确做法**应是主动销毁，而非依赖刷新。

通过以上方法，可确保 GUI 在路由切换时正常关闭！