vue3配合three页面跳转

### Vue3 中集成 Three.js 并实现页面路由切换

在 Vue3 项目中集成了 Three.js 后，为了确保页面之间的平滑过渡以及资源的有效管理，在进行页面跳转时需要注意特定事项。

#### 使用 `keep-alive` 组件缓存 Three.js 场景

为了避免每次进入含有 Three.js 的页面重新初始化场景带来的性能损耗，可以利用 `<keep-alive>` 来缓存这些组件实例。这有助于减少不必要的渲染开销并提高用户体验[^2]：

<template>
  <div id="app">
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, markRaw } from 'vue';
// 假设 threeScene 是一个异步加载的组件
const threeScene = markRaw(defineAsyncComponent(() => import('./components/ThreeScene.vue')));
</script>

当离开当前页面时，应当妥善处理 Three.js 资源以防止内存泄漏。具体做法是在组件销毁前清理掉不再使用的几何体和材质对象，从而允许浏览器执行垃圾回收操作[^3]:

export default {
  data() {
    return {
      scene: null,
      renderer: null,
      camera: null,
      objects: []
    };
  },
  methods: {
    disposeResources() {
      this.objects.forEach((obj) => {
        if (obj.geometry) obj.geometry.dispose();
        if (obj.material && Array.isArray(obj.material)) {
          obj.material.forEach(mtl => mtl.dispose());
        } else if (obj.material) {
          obj.material.dispose();
        }
      });
      
      while(this.scene.children.length){
        this.scene.remove(this.scene.children[0]);
      }

      this.renderer.forceContextLoss(); // 清除 WebGL 上下文
      this.renderer.domElement.width = 0;
      this.renderer.domElement.height = 0;
      this.renderer.dispose();

      URL.revokeObjectURL(this.textureLoader.path); // 如果有自定义纹理路径的话
    }
  },
  beforeDestroy() {
    this.disposeResources();
  }
}

通过上述方式可以在保持良好性能的同时有效解决由于不当管理引起的内存占用过高问题。对于复杂的应用程序来说，合理规划资源管理和生命周期钩子函数至关重要。