Barba.js页面过渡后Three.js滑块畸变效果不显示问题排查

Barba.js是无刷新式的页面切换，它只会替换页面的DOM内容，不会重新执行页面初始化时的JS代码。你的slider.js里的Three.js滑块初始化逻辑大概率只在首次页面加载（比如DOMContentLoaded或window.onload）时跑了一次，从页面1切到页面2时，Barba更新了内容但没触发滑块初始化，所以滑块没渲染出来，和Parcel关系不大，主要是没适配Barba的生命周期。

1. 把滑块初始化封装成独立函数 #

修改slider.js，把Three.js滑块的创建逻辑抽成单独函数，方便后续调用：

// slider.js
// 保存实例引用，方便后续清理
let sliderInstance = null;

export function initSlider() {
  // 先清理旧实例，避免内存泄漏
  if (sliderInstance) {
    sliderInstance.renderer.dispose();
    sliderInstance.scene.dispose();
    window.removeEventListener('scroll', sliderInstance.handleScroll);
    sliderInstance = null;
  }

  // 原有的Three.js滑块初始化代码
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  // ... 剩下的畸变效果、滚动监听、滑块内容渲染等代码

  // 保存实例信息
  const handleScroll = () => {
    // 你的滚动处理逻辑
  };
  sliderInstance = { scene, camera, renderer, handleScroll };

  window.addEventListener('scroll', handleScroll);
}

// 处理直接打开页面2的情况
if (document.querySelector('.slider-container')) {
  initSlider();
}

2. 在Barba切换完成后触发滑块初始化 #

在app.js里，用Barba的afterEnter钩子，判断当前页面是页面2时，调用初始化函数：

// app.js
import { initSlider } from './slider.js';
import './cursor.js'; // 直接引入光标逻辑，让Parcel打包

Barba.init({
  transitions: [
    {
      name: 'page-transition',
      leave(data) {
        // 你的GSAP离开动画代码
        return gsap.to(data.current.container, { opacity: 0, duration: 0.5 });
      },
      enter(data) {
        // 你的GSAP进入动画代码
        return gsap.from(data.next.container, { opacity: 0, duration: 0.5 });
      },
      afterEnter(data) {
        // 通过页面标识判断是否是页面2（比如滑块容器是否存在）
        if (data.next.container.querySelector('.slider-container')) {
          initSlider();
        }
      }
    }
  ]
});

3. 统一JS入口，确保Parcel打包正确 #

两个页面的HTML都只需要引入app.js作为入口，不要单独引入slider.js或cursor.js：

<!-- 页面1和页面2的HTML中都加这行 -->
<script type="module" src="./app.js"></script>

这样Parcel会自动打包所有依赖的模块，避免文件关联问题。

• 每次切换离开页面2时，一定要清理旧的Three.js实例和事件监听，不然多次切换会导致内存泄漏，甚至出现异常。
• 不要依赖DOMContentLoaded这类首次加载事件初始化滑块，Barba切换页面时不会触发这些事件。
• 确保调用initSlider时，页面2的滑块容器已经被Barba插入到DOM中，否则会找不到元素。

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