three.js icon indicating copy to clipboard operation
three.js copied to clipboard

OrbitControls: Ensure pointerdown is registered when another element was focused first

Open lukehorvat opened this issue 2 weeks ago • 3 comments

Possibly related to #26735, not sure if it's the same issue.

Description

I've identified a bug in OrbitControls that is easily reproducible in latest Safari (17). Well, I think it's actually a browser bug, but OrbitControls is affected by it.

If you first focus another element and then subsequently click+drag the canvas to rotate/pan the scene, it doesn't work. In Safari it seems no pointerdown event is fired on the first canvas click. Clicking a second time, however, does fire an event:

https://github.com/mrdoob/three.js/assets/1034878/5215a130-caa0-46d4-b434-d6d26de020b0

Quite strange. Even stranger, a mousedown event does get fired on the first canvas click. Just no pointerdown.

I did find a way to fix it though, which is what I'm proposing in this PR. It seems the first pointermove event on canvas click does include the "down" button info, so we can use that to ad-hoc register a quick pointerdown:

https://github.com/mrdoob/three.js/assets/1034878/ed5406eb-6dfd-45b2-ab00-53354908b510

Now I know this should probably be fixed in the browser itself, but I hope you'll consider this fix in OrbitControls. It's quite an annoyance for me, because the apps I'm building use my custom HTML controls and not Three.js' GUI controls (which don't seem to induce this bug for some reason...), so I'm seeing this bug very frequently on Safari.

I've included an example page in the PR that you can use to test my fix out locally. If you approve I'll delete it before merge.

And here are a couple of codepens to demonstrate the bug:

  • https://codepen.io/lukehorvat/pen/vYwXbvE (Canvas, no Three.js)
  • https://codepen.io/lukehorvat/pen/LYoRqgo (Three.js + OrbitControls)

lukehorvat avatar Jun 22 '24 22:06 lukehorvat