切换页面时如何更新Three.js画布？重载页面遇路由异常

核心问题分析 #

你遇到的情况是单页应用（SPA）路由切换时，旧的Three.js场景、渲染器、画布实例未被销毁清理，新页面的Three.js脚本执行时要么复用了旧画布，要么没能正确初始化新实例。而window.location.reload()会触发整页重载，SPA的路由机制会将重载请求重定向到根路径，导致回到/。

具体解决步骤 #

1. 销毁旧的Three.js实例（关键） #

在路由离开当前页面时，必须彻底清理Three.js相关资源，避免内存泄漏和画布冲突：

• 移除渲染器绑定的DOM元素
• 销毁场景内所有几何体、材质、纹理
• 取消动画循环
• 清空实例引用

示例代码：

// 页面离开时执行的清理函数
function cleanThreeJS() {
  // 取消动画循环
  if (window.threeAnimationId) {
    cancelAnimationFrame(window.threeAnimationId);
  }
  // 遍历销毁场景内所有资源
  if (window.threeScene) {
    window.threeScene.traverse((obj) => {
      if (obj.geometry) obj.geometry.dispose();
      if (obj.material) {
        Array.isArray(obj.material) 
          ? obj.material.forEach(m => m.dispose()) 
          : obj.material.dispose();
      }
      if (obj.texture) obj.texture.dispose();
    });
  }
  // 移除画布元素
  if (window.threeRenderer?.domElement) {
    window.threeRenderer.domElement.remove();
  }
  // 清空全局引用
  window.threeScene = null;
  window.threeRenderer = null;
  window.threeCamera = null;
}

2. 路由切换完成后初始化新实例 #

根据你使用的路由框架，在页面挂载完成的生命周期钩子中执行新页面的Three.js初始化：

• React：在useEffect回调中初始化，返回清理函数调用cleanThreeJS
• Vue：在onMounted中初始化，onUnmounted中执行清理
• 原生JS路由：监听路由变化事件，先清理旧实例，再初始化新实例

3. 避免使用window.location.reload() #

SPA的核心是无刷新切换，强制重载会破坏路由逻辑。如果必须重载（不推荐），可以指定当前页面路径：

// 强制重载当前页面，不会跳回根路径
window.location.href = window.location.pathname;

4. 确保画布元素唯一 #

每个页面的Three.js画布使用唯一ID，初始化渲染器时指定对应DOM元素，避免复用旧画布：

// 新页面的画布元素
const canvas = document.getElementById('page2-three-canvas');
const renderer = new THREE.WebGLRenderer({ canvas });

额外注意事项 #

• 检查是否有全局挂载的Three.js实例（比如window对象上的引用），导致新页面脚本无法覆盖旧实例
• 若使用模块化Three.js，确保每个页面的脚本是独立模块，避免变量污染

内容的提问来源于stack exchange，提问作者defrost.