Three.js+React 3D场景中iPhone端iFrame触摸与滚动失效问题

我仔细研究了你的问题和代码，这个iPhone独有的触摸滚动异常在Three.js结合HTML嵌入的场景里并不少见，核心原因大多是iOS的触摸事件处理机制和Three.js的事件捕获逻辑冲突，再加上iframe在3D变换下的兼容性限制。下面给你几个针对性的解决方案，你可以按顺序尝试：

1. 修正Canvas的触摸事件优先级 #

iOS上，Three.js的canvas默认会捕获所有触摸事件，导致iframe无法接收操作信号。你可以在聚焦到iframe（isFocusOnHtml为true）时，动态调整canvas的触摸行为，并阻止Three.js拦截触摸事件：

// 在你的主组件中添加这个useEffect钩子
import { useEffect } from 'react';

useEffect(() => {
  const canvas = document.querySelector('canvas');
  if (!canvas) return;

  const preventTouchPropagation = (e) => {
    if (isFocusOnHtml) e.stopPropagation();
  };

  if (isFocusOnHtml) {
    // 允许canvas传递触摸事件给iframe
    canvas.style.touchAction = 'auto';
    canvas.addEventListener('touchstart', preventTouchPropagation, true);
    canvas.addEventListener('touchmove', preventTouchPropagation, true);
  } else {
    // 恢复Three.js默认的触摸行为
    canvas.style.touchAction = 'touch';
  }

  // 组件卸载或状态变化时清理事件监听
  return () => {
    canvas.removeEventListener('touchstart', preventTouchPropagation, true);
    canvas.removeEventListener('touchmove', preventTouchPropagation, true);
    canvas.style.touchAction = 'touch';
  };
}, [isFocusOnHtml]);

2. 优化iFrame的CSS与事件权限 #

你的现有CSS已经做了基础设置，但可以补充iOS专属的滚动优化，同时动态控制iframe的事件响应权限，避免干扰Three.js场景：

首先更新CSS：

.htmlScreen iframe {
  height: 700px;
  border: none;
  background: #000;
  overflow-y: scroll;
  touch-action: pan-y; /* 明确指定垂直滚动，比touch更精确适配iOS */
  -webkit-overflow-scrolling: touch; /* 启用iOS弹性滚动特性 */
  pointer-events: none; /* 默认禁用，防止干扰Three.js交互 */
}

.htmlScreen.focused iframe {
  pointer-events: auto; /* 仅当聚焦时允许iframe接收触摸事件 */
}

然后修改Monitor组件中Html组件的wrapperClass：

<Html
  transform
  prepend
  wrapperClass={`htmlScreen ${isFocusOnHtml ? 'focused' : ''}`}
  scale={0.35}
  distanceFactor={1.17}
  zIndexRange={[0, 0]}
>

3. 调整Drei Html组件的3D变换设置 #

iOS的WebKit引擎对3D变换后的元素触摸事件映射有兼容性问题，你可以尝试调整Html组件的属性：

• 暂时移除transform属性，改用手动计算的position适配缩放后的位置
• 调整zIndexRange为[1,1]，确保iframe在事件捕获层级的最上层

示例代码：

<Html
  prepend
  wrapperClass={`htmlScreen ${isFocusOnHtml ? 'focused' : ''}`}
  scale={0.35}
  position={[-2.57 * 0.35, 1.8 * 0.35, -0.01 * 0.35]}
  rotation-y={1.565}
  zIndexRange={[1, 1]}
>

4. 兜底方案：触摸事件代理 #

如果上面的方法都无效，可以尝试在iframe的父容器上监听触摸事件，手动转发给iframe内部文档：

import { useRef } from 'react';

// 在Monitor组件中添加ref和事件处理
const iframeRef = useRef(null);

const handleTouchMove = (e) => {
  if (!isFocusOnHtml || !iframeRef.current) return;
  
  const iframeDoc = iframeRef.current.contentDocument || iframeRef.current.contentWindow.document;
  const touchEvent = new TouchEvent('touchmove', {
    touches: e.touches,
    targetTouches: e.targetTouches,
    changedTouches: e.changedTouches
  });
  
  iframeDoc.dispatchEvent(touchEvent);
  e.preventDefault();
};

// 给父div添加onTouchMove监听
<div
  onTouchMove={handleTouchMove}
  onClick={(e) => { if (!isFocusOnHtml) e.preventDefault(); }}
  onPointerEnter={(e) => { if (isFocusOnHtml) setIsPointerOnHtml(true); }}
  onPointerLeave={(e) => { if (isFocusOnHtml) setIsPointerOnHtml(false); }}
>
  <iframe
    ref={iframeRef}
    id="iframe"
    src="https://niltonsf.dev/static"
    title="myStaticWebsite"
    style={{ width: isMobile ? 1200 : 1500 }}
  />
</div>

建议你先尝试前两个方案，它们改动最小且覆盖了最常见的问题场景。iOS的触摸事件处理确实比Android和桌面端更严格，核心是要确保iframe在聚焦时能拿到事件优先级，同时避免Three.js的canvas拦截触摸信号。

内容的提问来源于stack exchange，提问作者Nilton Schumacher F