Click event and orbit control does not work on mobile

[oneWaveAdrian]

When I open my app on a mobile phone, the @click event does not get triggered, when Orbit Controls is active. It seems as if Orbit Controls takes over the input events.

Example: https://apricot-neighborly-century.glitch.me

Code: https://glitch.com/edit/#!/apricot-neighborly-century

Tested on:

• Android

  • Firefox
  • Chrome

• MacOS

  • Edge Browser (mobile compatibility Mode)

[akorajac]

Same issue, here is my work around for the click.

First adding touchstart event listener to the canvas:

const orbitCtrl = this.$refs.renderer.three.orbitCtrl;
orbitCtrl.domElement.addEventListener("touchstart", this.onTouchDown);

Then getting the mouse x,y and the camera.

onTouchDown(event) {
      const { camera } = this.$refs.renderer.three;
      const mouse = { x: 0, y: 0 };
      mouse.x = +(event.targetTouches[0].pageX / window.innerWidth) * 2 + -1;
      mouse.y = -(event.targetTouches[0].pageY / window.innerHeight) * 2 + 1;

//something to do
    },

Or better, using touchend if you want to be able to catch the camera change event and prevent the click. Add touchend event listener and instead of targetTouches use changedTouches to get the X and Y.

[oneWaveAdrian]

Does not seem to work... I do need a way of using the existing @click events, otherwise this would not be in the Syntax of Vue/Trois. And creating a different set of functions just for mobile use seems not right imho.

[oneWaveAdrian]

@klevron @SaFrMo do you have thoughts regarding this topic? It is quite important for a project of mine which is not mobile compatible at all right now.

[SaFrMo]

@oneWaveAdrian The most luck I've had with overriding OrbitControl functionality like this is either (a) including a customized version of the OrbitControls source with the extra functionality removed, or by (b) writing mobile-only code like @akc4 suggested.

Either way is definitely uglier than I'd prefer but that feels like a trade-off for how generally useful OrbitControls are. Sorry that no Trois-specific response comes to mind! I won't have space to look into any Trois fixes for this in the coming weeks but other PRs/suggestions are welcome. Any other thoughts @klevron ?

[klevron]

https://discourse.threejs.org/t/mouseup-event-does-not-work-along-with-orbitcontrols/20432

[klevron]

I don't know if we should handle this in troisjs for the moment. And It is possible to use a custom OrbitControls.

But I already planned to use https://developer.mozilla.org/docs/Web/API/Pointer_events in v0.4