Javascript

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

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

为了 disable/enable 平移，您应该使用 enablePan。

现在，您只想在移动设备中禁用平移，因此我们可以选择 break-point 进行有条件的 enable/disable 平移：

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()
    })
  }

您可以通过多种方式解决这个问题。例如：您只能执行此功能一次，而不是每一帧。

Javascript - Three.js 在移动设备上禁用平移？

Javscript - Three.js Disable panning on mobile devices?

mobile

three.js