Touch Events and Keyboard Mouse Events

CesiumJS
1

I would like to know if it’s possible to modify the default touch events in Cesium without affecting the existing mouse and keyboard interactions. Specifically, I’m looking to:

  • Swap the default touch controls so that two-finger gestures handle panning instead of one-finger drag.
  • Use one-finger drag to control tilt instead of the usual two-finger pinch or tilt.

I’ve explored modifying rotateEventTypes and tiltEventTypes in screenSpaceCameraController and tested custom handlers using ScreenSpaceEventHandler, but I’m encountering issues where changes to touch events inadvertently interfere with mouse and keyboard interactions.

Is there a way to achieve this functionality without altering or disabling mouse and keyboard controls? If there are any best practices or additional configurations I might have missed, I’d appreciate your guidance.

2

Hello @Amilissa_Araneta
I hope this code will help you.

var viewer = new Cesium.Viewer("cesiumContainer", {
  terrainProvider: await Cesium.createWorldTerrainAsync(),
  sceneMode: Cesium.SceneMode.SCENE3D,
});

viewer.scene.screenSpaceCameraController.enableRotate = false;
viewer.scene.screenSpaceCameraController.enableTilt = false;
viewer.scene.screenSpaceCameraController.enableLook = false;

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

var lastTouchPosition = null;
var lastTwoTouchPositions = null;

handler.setInputAction(function (movement) {
  if (movement.position) {
    if (lastTouchPosition) {
      var deltaY = movement.position.y - lastTouchPosition.y;
      viewer.scene.camera.rotateUp(Cesium.Math.toRadians(deltaY * 0.1));
    }
    lastTouchPosition = movement.position;
  }
}, Cesium.ScreenSpaceEventType.PINCH_START);

handler.setInputAction(function (movement) {
  lastTouchPosition = movement.position;
}, Cesium.ScreenSpaceEventType.PINCH_END);

handler.setInputAction(function (movement) {
  if (movement.positions && movement.positions.length === 2) {
    if (lastTwoTouchPositions) {
      var deltaX =
        movement.positions[0].x - lastTwoTouchPositions[0].x +
        (movement.positions[1].x - lastTwoTouchPositions[1].x);
      var deltaY =
        movement.positions[0].y - lastTwoTouchPositions[0].y +
        (movement.positions[1].y - lastTwoTouchPositions[1].y);

      viewer.scene.camera.moveRight(-deltaX * 0.01);
      viewer.scene.camera.moveUp(deltaY * 0.01);
    }
    lastTwoTouchPositions = movement.positions;
  }
}, Cesium.ScreenSpaceEventType.PINCH_MOVE);

handler.setInputAction(function (movement) {
  lastTwoTouchPositions = movement.positions;
}, Cesium.ScreenSpaceEventType.PINCH_END);

handler.setInputAction(function () {
  lastTouchPosition = null;
  lastTwoTouchPositions = null;
}, Cesium.ScreenSpaceEventType.PINCH_END);

Sandcastle link here: