Javscript - Three.js 禁用移动设备上的平移？

Question

所以我正在使用 Three.js 制作一个 3D 项目。在我的笔记本电脑上一切都按预期工作。我使用 OrbitControls 来允许相机移动，但我禁用了右键平移，因为我希望相机仅旋转。当切换到移动设备（iPhone）时，我可以使用两根手指移动相机（而不是旋转）。有没有办法在移动设备上禁用此行为？ 我的 OrbitControls：

this.controls = new OrbitControls(this.camera, this.renderer.domElement)
this.controls.enableDamping = true
this.controls.maxPolarAngle = Math.PI * 0.45
this.controls.mouseButtons = {
  LEFT: THREE.MOUSE.ROTATE,
  MIDDLE: THREE.MOUSE.DOLLY,
  RIGHT: ''
}

更新功能：

_RAF() {
    requestAnimationFrame(() => {
      this.water.material.uniforms[ 'time' ].value += 1.0 / 60.0
      this.controls.maxDistance = 10000.0
      this.controls.minDistance = 10.0
      this.controls.update()
      this.camera.updateProjectionMatrix()
      this.renderer.render(this.scene, this.camera)
      this._RAF()
    })
  }

Answer 1

您似乎没有禁用平移，而只是更改控件使用的鼠标操作。

要禁用/启用平移，您应该使用 enablePan。

现在，您只想在移动设备中禁用平移，因此我们可以选择一个断点来有条件地启用/禁用平移：

this.controls.updatePanning = () => {
  const minWidth = 780 // Your min breakpoint for enabling pan.
  if (window.innerWidth >= minWidth ) {
    this.controls.enablePan = true
  } else {
    this.controls.enablePan = false
  }
}

然后，在您的更新循环中，只需调用上述函数：

_RAF() {
    requestAnimationFrame(() => {
      this.water.material.uniforms[ 'time' ].value += 1.0 / 60.0
      this.controls.maxDistance = 10000.0
      this.controls.minDistance = 10.0
      this.controls.updatePanning()
      this.controls.update()
      this.camera.updateProjectionMatrix()
      this.renderer.render(this.scene, this.camera)
      this._RAF()
    })
  }

您可以这样做在几个方面。例如：您只能执行此函数一次，而不是每一帧。