Cursor locks to rotating the camera on mouse up outside of iframe

Hello,

I’m using an ArcRotateCamera and my whole scene webpage is in an iframe. When I drag to rotate and leave the iframe with the cursor so the mouse up event fires while being outside, babylon thinks it is still rotating when re-entering the iframe. This is rather annoying, because when you click to drag again you don’t rotate, you zoom and pan enormously. This also happens when the mouse up event fires on any overlayed HTML element.
I basically need to detect the mouse up event anywhere in the browser and then tell babylon it’s time to stop rotating. Any ideas or other suggestions?

Interestingly enough this only happened when the path for the source attribute of the iframe was relative. When I tried an absolute version of the same webpage the camera wasn’t locked in rotation mode.

pinging @PolygonalSun for some direction/advice

1 Like

@Regit, by any chance, would you be able to provide any kind of example or code snippet so that I can attempt to repro? I’m gonna try to create an example in the meantime so that I can see if I can see what you’re seeing.

1 Like

I extracted the issue from my project and uploaded it for you to look at here: https://regitgit.github.io/babylonjs-iframe/
Click on the image to open the iframe. Then drag to rotate and move anywhere out of the iframe. When you re-enter the rotating is locked.

This would also happen when you released on the ‘X’-exit button. But I’m currently toggling its pointer events on pointerdown/up. However this only gets checked inside the contentWindow of the iframe, maybe there is a way to check if the click event started on the contentWindow but ended outside of it?

Small update: I’m getting the pointer up event outside of the iframe simply by this:
document.addEventListener('pointerup', function(event) { }

I read about a similar issue in this thread: https://forum.babylonjs.com/t/arccamera-iframe-mouseup-not-triggered/9251
But scene.simulatePointerUp() doesn’t work… Looks like scene.pick(1000, 500) doesn’t work as a parameter. The simulated event then still shows x: 0 y: 0. But even then it should still stop the rotation?

Another approach was using:

var clickEvent = document.createEvent ('MouseEvents');
clickEvent.initEvent ("pointerup", true, true);
canvas.dispatchEvent (clickEvent);

Here the event somewhat works. Looks like its fired at (0, 0), since the model rotates towards there. And you guessed it, the rotation is still locked, that’s probably why it rotates. But in the end the pointer up event doesn’t seem to cancel the rotation lock :confused: .

I want to shift the attention to this. I tested it in another project, same thing. No rotation lock in babylon scenes coming from an absolute path somewhere on the web.
This has to be a bug right?

@PolygonalSun will have a look shortly

Hey @Regit, thanks for the demo! It looks like the pointerup event isn’t being handled. I won’t be able to dig into it much more today but I’ll try to take a closer look at it either tomorrow or Monday.

2 Likes