How to stop mousedown sticking when moving out of canvas?

[ozRocker]

This is a common problem and I've searched all over the internet for a solution but haven't found one that works with Babylon.js

If you click down on a canvas then move off the canvas and release the mouse button, then move back to the canvas it seems to be stuck on "down".  The camera is moving even though you've let go of the mouse button.

I've noticed that this doesn't happen with the Babylon.js playground.  You can control the camera even after the mouse moves out of the canvas, and once you let go it will release it on the canvas.  Does anyone know how to do this?  I read somewhere about using setCapture on the canvas but that function doesn't exist on Chrome.

[aWeirdo]

Hey @ozRocker 

you can capture the mouse going off your scene/canvas with javascript and "mantually" reset the mouse.

window.addEventListener("mouseout", function () {
  //reset mouse
});

i can't remember the rest off the top of my head sorry, you'll have to google that

 

Edit:

take note that this specific code using window, will only work if your canvas fills your entire webpage and/or the mouse is moved away from it, e.g. to the bookmark/url/etc.. areas of a browser or the toolbar of a OS.

[ozRocker]

Yeh, that's where my problem is.  I don't know how to reset it.  I've checked everywhere :/

 

[aWeirdo]

Do you have a live demo where the problem can be seen/replicated?

[ozRocker]

Hm..I just noticed that the problem doesn't appear when I'm using Babylon.2.3.  Its only with Babylon.2.4

[aWeirdo]

That's odd, which browser are you using if i may ask?

and if it's chrome or firefox, try again with 2.4 using edge if you have it installed and see if it still occurs.

2.4 seems to have a few bugs yet to be fixed when it comes to chrome, firefox & pointer events.

[ozRocker]

I'm using Chrome.  I tried out Firefox and the problem exists there too, but in IE it works fine.

[GameMonetize]

Hey I cannot reproduce the issue on Chrome (With the Playground).

[ozRocker]

I've recreated it here: http://www.punkoffice.com/mousetest/

The code is straight from the default Playground scene.

If you drag the mouse out of the canvas to the left or the right and let go of the button, it remains stuck down over the canvas, so if you return to the canvas the camera will move even though no buttons are pressed.

[ozRocker]

I fixed it!  I was using hand-1.3.8.js.  I switched to pep.0.4.1.js and now it works just like in the playground.

[ozRocker]

Hmm...touch doesn't work on iPhone/iPads with PEP.  I can't move my camera around anymore

[GameMonetize]

did you add the touch-action on the canvas (https://github.com/jquery/PEP#touch-action) ?