移动端THREE.js中OrbitControls无法使用问题求助

可能的原因及修复方案 #

• 拦截页面默认触摸行为
  移动端默认的页面滚动、缩放行为会干扰OrbitControls的触摸事件处理，给渲染器DOM元素添加监听阻止默认行为：

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

  注意{ passive: false }是必要配置，否则部分浏览器无法生效。

• 确保版本匹配
  不同版本的THREE.js和OrbitControls可能存在兼容性问题，务必使用对应版本的官方OrbitControls（比如从three/examples/jsm/controls/OrbitControls引入，而非旧版的js/controls/OrbitControls）。

• 简化触摸配置测试
  先注释自定义触摸配置，用默认设置验证基础功能是否正常：

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.enabled = true;
  // 先注释以下配置，测试默认触摸行为
  // controls.touches.ONE = THREE.TOUCH.PAN;
  // controls.touches.TWO = THREE.TOUCH.DOLLY_ROTATE;
  

  若默认配置生效，再逐步调整到目标触摸行为。

• 检查DOM元素状态
  确认渲染器DOM元素在移动端有正确尺寸（比如设置width: 100%; height: 100vh;），且未被其他元素遮挡（可通过浏览器开发者工具检查层级）。

• 适配设备像素比
  移动端设备像素比可能影响交互精度，给渲染器设置正确的像素比：

  renderer.setPixelRatio(window.devicePixelRatio);
  

验证步骤 #

1. 注释自定义触摸配置，测试移动端基础控制功能是否生效；
2. 添加触摸事件拦截，排除页面默认行为干扰；
3. 查看控制台报错，排查版本兼容或语法问题。

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