score:1

Accepted answer

As you say, touch devices don't expose the mousemove but rather a touchmove event. Once you tested for touchmove you also have to consider that the screen coordinates are no direct child of the event's sourceEvent object but properties of the event touches object properties.

Here's a working example that will let your users drag the globe on mobile. The key piece is in the getPosition function:

function getPostions(e) {
  let x;
  let y;

  // Ringfencing, in case type is not defined.
  if (!e) return [0, 0];

  // Distinguish between desktop and touch.
  if (e.type === "mousemove") {
    x = e.screenX;
    y = e.screenY;
  } else if (e.type === "touchmove") {
    x = e.changedTouches[0].screenX;
    y = e.changedTouches[0].screenY;
  }

  return [x, y];
}

Depending on the <event>.type exposed (either mousemove or touchmove) you retrieve the screen coordinates either directly from the event object or as nested properties from the first <event>.changedTouches property.

However, zoom is trickier and not implemented in above example.

For a more elegant overall solution (also solving the Gimbal lock issue with 2D globe rotation) please see this versor zooming implementation.


Related Query

More Query from same tag