触摸设备中iframe内Three.js模型缩放时保持页面不缩放的问题

看起来你遇到的核心问题是浏览器的默认触摸缩放行为干扰了Three.js模型的交互——当你在iframe里缩放模型时，浏览器触发了页面级的缩放，而非仅模型响应。你提到换用PointMaterial时正常，说明常规GLTF模型的交互逻辑里没有正确阻止触摸事件的默认行为，而PointMaterial的案例可能刚好处理了这一点。

下面是具体的解决方案，分几步来实现：

1. 给iframe和容器添加触摸行为控制 #

首先在CSS里给iframe的容器和iframe本身设置touch-action属性，告诉浏览器不要处理这些元素上的触摸缩放行为：

.embed-responsive, .embed-responsive-item {
  touch-action: none; /* 禁用浏览器默认触摸缩放、平移行为 */
}

这个属性会阻止浏览器对该元素触发默认的触摸手势（比如双指缩放、滑动），让Three.js的交互逻辑完全接管这些事件。

2. 在Three.js代码中明确阻止触摸事件的默认行为 #

打开你Three.js模型所在的models/page.html对应的JS文件，找到处理触摸缩放的代码（通常是OrbitControls或者自定义的触摸事件监听），在事件处理函数里添加event.preventDefault()：

比如如果用的是OrbitControls，可以这样配置：

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableZoom = true;

// 监听触摸事件，阻止默认行为
renderer.domElement.addEventListener('touchstart', (e) => {
  e.preventDefault();
}, { passive: false });

renderer.domElement.addEventListener('touchmove', (e) => {
  e.preventDefault();
}, { passive: false });

注意设置{ passive: false }，这样preventDefault()才能生效，因为默认情况下触摸事件的监听器是passive的，无法阻止默认行为。

如果是自定义触摸缩放逻辑，也要在触摸事件（touchstart、touchmove）里加入e.preventDefault()，确保浏览器不会触发页面缩放。

3. 优化iframe的HTML属性 #

你的iframe已经设置了allowfullscreen，可以再添加scrolling="no"确保iframe内部不出现滚动，同时确认没有其他可能触发页面缩放的属性：

<iframe 
  style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:1;" 
  class="embed-responsive-item" 
  src="models/page.html" 
  allowfullscreen
  scrolling="no"
></iframe>

为什么换PointMaterial时正常？ #

大概率是因为PointMaterial对应的模型交互逻辑里，已经默认处理了触摸事件的默认行为，或者模型本身的交互方式（比如点击而非双指缩放）不会触发浏览器的默认缩放手势。而常规GLTF模型的缩放逻辑（比如双指操作）刚好触发了浏览器的默认行为，所以需要手动阻止。

额外检查点 #

• 确保你的Three.js版本是最新的，旧版本的OrbitControls可能对触摸事件的处理有bug。
• 检查页面是否有其他全局的触摸事件监听，比如第三方库的手势事件，可能和Three.js的事件冲突。

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