Touch controls for camera on iPad causing infinite spin

Questions
1

Using touch controls on the iPad on safari for my app works fine initially when I drag to rotate the camera. However it suddenly doesn’t detect the mouse up event? because the camera suddenly goes into an infinite loop/rotation and cannot be stopped by touching/dragging on the screen.

The following is the code used to initialize the camera. Any suggestion would be appreciated.

SceneController.scene.activeCamera.attachControl(SceneController.canvas)
SceneController.camera = SceneController.scene.activeCamera

SceneController.camera.minZ = 0
SceneController.camera.maxZ = 200
SceneController.camera.speed = 0.4
SceneController.camera.checkCollisions = false
SceneController.camera.ellipsoid = new BABYLON.Vector3(1, 1.8, 1)

SceneController.camera.inspectableCustomProperties = [
  {
    label: 'Rotation',
    propertyName: 'rotation',
    type: BABYLON.InspectableType.Vector3
  }
]

SceneController.camera.inputs.removeByType('FreeCameraKeyboardMoveInput')
SceneController.camera.inputs.removeByType('FreeCameraMouseWheelInput')
SceneController.camera.angularSensibility = -2000 // -900
SceneController.camera.touchAngularSensibility = -100000
SceneController.camera.touchMoveSensibility = 0
SceneController.camera.inertia = 0.8
2

Are you able to repro the issue in the playground ?

I remember @Cedric looked into it a while back, are you using 4.2 ?

3

Not an infinite loop but I got camera jittering.
I second the need for a PG :slight_smile:

4

Hi guys, I was successfully able to solve this issue. The following are the steps I performed in case anyone also runs into a similar issue .

Issue: Using a universal camera in BabylonJS using touch in iPad to rotate the camera led to unexpected results and the camera would get stuck in a rotation loop.

Solution: The following are the steps to solve this issue:

  1. Remove the default inputs on the camera and only add mouse input to allow for only movement interactions:
    camera.inputs = new BABYLON.FreeCameraInputsManager(camera)
    camera.inputs.addMouse(true)

  2. After assigning a new input manager and input, attach camera control to the canvas:
    camera.attachControl(canvas)

  3. Add the following tags to your body and canvas DOM elements to ensure no iPad multi touch events cause issues with touch controls:
    touch-action=“none” style=“touch-action: none;”

Hope this helps you guys.

Regards,
Taha

5

Thanks a lot for the feedback @Cedric maybe we should reintegrate some part of this solution in ?

6

This can be some interests for @PolygonalSun as well

2 Likes