Barba.js过渡后Three.js网格消失，返回主页无法初始化场景

核心排查方向 #

• DOM元素绑定问题
  Barba.js切换页面时会替换DOM内容，返回主页时你可能仍在使用旧的canvas引用，而非当前DOM中的新canvas。必须在afterEnter钩子中重新获取页面上的canvas元素，再绑定给Three.js渲染器。

• Three.js实例未正确重置
  离开主页时如果没销毁旧的场景、渲染器实例，返回时新创建的实例可能无法抢占资源。要在beforeLeave钩子中清理资源：

  barba.hooks.beforeLeave(() => {
    // 销毁渲染器
    if (renderer) renderer.dispose();
    // 清理场景中所有几何体和材质
    if (scene) {
      scene.traverse(obj => {
        if (obj.geometry) obj.geometry.dispose();
        if (obj.material) obj.material.dispose();
      });
    }
    // 停止渲染循环
    cancelAnimationFrame(animationId);
  });
  

• 渲染循环未重启
  页面离开时如果停掉了渲染循环，返回主页必须重新启动。确保afterEnter中调用渲染循环函数：

  function renderLoop() {
    animationId = requestAnimationFrame(renderLoop);
    renderer.render(scene, camera);
  }
  
  barba.hooks.afterEnter(data => {
    if (data.next.namespace === 'home') {
      initThreeJS();
      addObjects();
      renderLoop();
    }
  });
  

• 网格未加入当前场景
  控制台能检测到网格实例，但画面不显示，大概率是网格加到了旧场景里。addObjects函数要确保使用重新初始化后的scene实例：

  function addObjects() {
    const cube = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({ color: 0x00ff00 }));
    scene.add(cube); // 这里的scene必须是initThreeJS中新创建的实例
  }
  

关键代码调整要点 #

1. 初始化Three.js时，必须从当前DOM获取canvas：

function initThreeJS() {
  const canvas = document.getElementById('three-canvas');
  if (!canvas) return;

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer({ canvas });

  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.position.z = 5;
}

2. 确保Barba钩子只在主页触发初始化逻辑，避免其他页面误执行。

内容的提问来源于stack exchange，提问作者Alexandre PUJOL