如何根据页面滚动到的不同区块切换视频或3D模型屏幕内容

嘿，这个需求其实挺实用的，咱们一步步来搞定它～核心逻辑很明确：监听页面滚动，判断当前用户视线聚焦的区块，然后动态更新3D模型里的屏幕材质。下面是具体的实现步骤和代码示例：

1. 给页面区块做标识 #

先给每个需要切换屏幕的页面区块加上自定义属性，方便后续关联对应的屏幕资源。比如：

<section class="page-section" data-screen-resource="home-screen">
  <!-- 区块内容 -->
</section>
<section class="page-section" data-screen-resource="about-screen">
  <!-- 区块内容 -->
</section>
<section class="page-section" data-screen-resource="projects-screen">
  <!-- 区块内容 -->
</section>

这里的data-screen-resource值要和你提前加载好的资源名称对应（比如和this.resources.items里的键名保持一致）。

2. 用Intersection Observer监听区块可见性 #

比起直接监听scroll事件，Intersection Observer API更高效，它能自动告诉你元素什么时候进入/离开视口。咱们用它来跟踪当前活跃的区块：

// 获取所有需要监听的页面区块
const sections = document.querySelectorAll('.page-section');

// 配置Observer参数
const observerOptions = {
  root: null, // 以浏览器视口作为检测容器
  rootMargin: '0px',
  threshold: 0.5 // 当区块50%可见时触发切换逻辑
};

// 保存当前活跃区块，避免重复触发切换
let currentActiveSection = null;

const observerCallback = (entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 更新当前活跃区块
      currentActiveSection = entry.target;
      // 调用屏幕切换方法
      this.updateComputerScreen(currentActiveSection.dataset.screenResource);
    } else if (entry.target === currentActiveSection) {
      // 如果当前活跃区块离开视口，可在这里处理视频暂停等逻辑
      const resource = this.resources.items[entry.target.dataset.screenResource];
      if (resource instanceof HTMLVideoElement) {
        resource.pause();
      }
    }
  });
};

// 初始化Observer并开始监听所有区块
const sectionObserver = new IntersectionObserver(observerCallback, observerOptions);
sections.forEach(section => sectionObserver.observe(section));

3. 实现3D屏幕内容切换逻辑 #

把你原来的初始化代码改成动态切换的方法，还要注意处理图片/视频的差异，以及内存泄漏问题：

// 提前缓存屏幕网格对象，避免每次切换都重新遍历模型
let computerScreenMesh = null;

// 在模型加载完成后，先找到对应的屏幕网格
init() {
  // ... 你的其他初始化代码
  this.locateComputerScreenMesh();
}

locateComputerScreenMesh() {
  const traverseMesh = (mesh) => {
    if (mesh.name === "Computer") {
      computerScreenMesh = mesh.children[1];
      return;
    }
    mesh.children.forEach(child => traverseMesh(child));
  };
  // 假设你的3D场景根节点是this.scene
  this.scene.traverse(traverseMesh);
}

// 核心切换方法
updateComputerScreen(resourceName) {
  if (!computerScreenMesh) return;

  // 销毁旧贴图，避免内存泄漏
  if (computerScreenMesh.material.map) {
    computerScreenMesh.material.map.dispose();
  }

  let newTexture;
  const resource = this.resources.items[resourceName];

  // 根据资源类型创建对应纹理
  if (resource instanceof HTMLImageElement) {
    newTexture = new THREE.Texture(resource);
    newTexture.needsUpdate = true;
  } else if (resource instanceof HTMLVideoElement) {
    newTexture = new THREE.VideoTexture(resource);
    resource.loop = true;
    resource.play();
  }

  // 更新屏幕材质
  computerScreenMesh.material = new THREE.MeshBasicMaterial({
    map: newTexture,
    // 保留你需要的材质属性，比如透明、双面渲染等
    transparent: true,
    side: THREE.DoubleSide
  });
}

4. 额外注意事项 #

• 资源预加载：确保所有要切换的图片、视频都提前加载完成，避免切换时出现空白。可以用Three.js的LoadingManager统一管理资源加载状态。
• 性能优化：不要在监听回调里做复杂计算或DOM操作，保持逻辑轻量化。
• 视频适配：如果用视频作为屏幕内容，记得调整纹理的repeat和offset属性，确保视频在屏幕上显示正常。

这样就能实现滚动到不同区块时自动切换3D模型的屏幕内容啦～

备注：内容来源于stack exchange，提问作者Yashraj Tarte