如何在父级IFRAME离屏时停止THREE.js的animate()函数？

嘿，这个需求我刚好有思路，咱们一步步来解决！

核心目标是在THREE.js脚本内部检测父页面中id为3D的iframe是否处于视口内，根据这个状态决定是否执行render()或动画逻辑。因为要把代码写在THREE.js脚本里，我们可以通过window.parent访问父页面的DOM，再结合浏览器的视口检测API来实现。

最优方案：使用Intersection Observer API #

这是浏览器原生的高效API，专门用来检测元素是否进入/离开视口，性能比滚动事件监听好很多，代码也更简洁。

完整代码示例（写在THREE.js脚本中） #

// 初始化THREE.js场景、相机、渲染器的代码...
let scene, camera, renderer;
function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  // 添加你的3D内容...
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
  camera.position.z = 5;
}

// 标记iframe是否在视口内
let isIframeVisible = true;

// 获取父页面的iframe元素
const iframeElement = window.parent.document.getElementById('3D');

// 创建Intersection Observer监听iframe的可见性
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 更新可见状态：当iframe有10%以上进入视口时标记为可见
    isIframeVisible = entry.isIntersecting;
    
    // 可选：如果需要极致性能，完全不可见时可以取消动画帧，可见时重启
    // if (!isIframeVisible) cancelAnimationFrame(animationId);
    // else animationId = requestAnimationFrame(animate);
  });
}, { threshold: 0.1 }); // threshold可以调整，0表示只要有像素进入就触发，1表示完全进入才触发

// 开始监听iframe
observer.observe(iframeElement);

// 动画循环
function animate() {
  const animationId = requestAnimationFrame(animate);

  // 如果iframe不在视口内，直接跳过渲染和动画更新
  if (!isIframeVisible) {
    return;
  }

  // 这里写你的3D场景更新逻辑（比如物体旋转、动画等）
  scene.children[0].rotation.x += 0.01;
  scene.children[0].rotation.y += 0.01;

  // 执行渲染
  renderer.render(scene, camera);
}

// 初始化并启动动画
init();
animate();

备选方案：滚动/Resize事件监听（兼容旧浏览器） #

如果需要兼容不支持Intersection Observer的旧浏览器，可以用滚动和窗口大小变化事件来手动检测iframe是否在视口内：

代码示例 #

// 初始化THREE.js场景的代码和上面一样...

let isIframeVisible = true;
const iframeElement = window.parent.document.getElementById('3D');

// 检测元素是否在视口内的工具函数
function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  const parentViewport = {
    width: window.parent.innerWidth || window.parent.document.documentElement.clientWidth,
    height: window.parent.innerHeight || window.parent.document.documentElement.clientHeight
  };
  
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= parentViewport.height &&
    rect.right <= parentViewport.width
  );
}

// 初始化时更新可见状态
isIframeVisible = isElementInViewport(iframeElement);

// 监听父页面的滚动事件
window.parent.addEventListener('scroll', () => {
  isIframeVisible = isElementInViewport(iframeElement);
});

// 监听父页面的窗口大小变化事件
window.parent.addEventListener('resize', () => {
  isIframeVisible = isElementInViewport(iframeElement);
});

// 动画循环和上面一样，判断isIframeVisible后再执行渲染
function animate() {
  requestAnimationFrame(animate);
  
  if (!isIframeVisible) return;
  
  // 更新场景...
  scene.children[0].rotation.x += 0.01;
  scene.children[0].rotation.y += 0.01;
  
  renderer.render(scene, camera);
}

init();
animate();

关键注意事项 #

• 同域限制：确保iframe和父页面属于同一个域名（协议、域名、端口都一致），否则浏览器的跨域安全策略会阻止你访问父页面的DOM元素。
• 性能优化：如果iframe长时间不可见，除了跳过渲染，还可以考虑暂停一些资源消耗大的逻辑（比如粒子系统、复杂的物理模拟），进一步节省性能。
• 阈值调整：Intersection Observer的threshold参数可以根据你的需求调整，比如设置为0.5表示当iframe有一半进入视口时才开始渲染。

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