Universal camera on mouse up

[gamedev44]

I usually use a document on mouse up listener when implementing drag and drop, in case the user releases the mouse outside of the canvas.

I find that the universal camera misses on mouseup even within the canvas.

How do implement a document on mouse up listener  with the universal camera, what do I call from the listener?

[Guest]

well this should not be the case. The UniversalCamera is using scene.onPointerObservable which in turn is using document to listen to mouse up

can you repro?

[Wingnut]

Hi guys.  I made (adjusted) a little playground:  https://www.babylonjs-playground.com/#KWJPDC#3

Watch console while clicking sphere.

I don't see any problems.  Universal cam... I got good actionManager events, I got good DOM events, it all seems okay.  (but I'm not always sure what "okay" means - forever noob that I am). 

Notice that the DOM pointerUp event.defaultPrevented = true.  I don't know if THAT would cause any problems for anyone, but I thought I would "point" it out.   

I hope this helps.   PS:  Scenes without lights (like above playground), which instead use emissive on all scene materials, are a bit unusual, but still good fun.

[gamedev44]

Seems that there are two reasons

1. I have babylon in an iframe - so the document listener doesn't include the parent

2. I am using babylon gui buttons and the mouse up isn't captured when I release over a button

[gamedev44]

all my buttons have this:

    button_center.onPointerUpObservable.add(function (event) {
        button_ui_up();
    });

Is there a call I can make to tell the camera the mouse is up in there?

[gamedev44]

Here is a the button fix which is a little backwards..

1. By default isPointerBlocker is set to true which  lets the camera keep rotating with the mouse on a mouse up event over a button. That leaves the camera in a strange state where it can start to zoom in.

2. isPointerBlocker set to true doesn't stop mouse events from reaching clickable meshes, so I had already distinguished between button mousedown and mouse up events with code to prevent my clickable meshes reacting to clicks on the button above. I did this by setting a boolean "button_pressed" to true onPointerDownObservable and "button_pressed" to false onPointerUpObservable so that my general onpointerdown function could reject picking meshes if button_pressed is true.

So I can then set isPointerBlockerto false because I'm not using it and get the camera to listen to onmouseup over the GUI buttons.

 

[gamedev44]

The iframe is more difficult.

1. This function does not fire when the camera is being moved with the mouse down out of the iframe:

window.onmouseout = function () {
    console.log("out");

}

2. I don't know what function to call to simulate a mouseup event to the camera, when the mouse leaves the iframe

[Wingnut]

Hi again.  Hey, good info-gathering/reporting, thx!

You should probably try canvas.onMouseOut or whatever.

There has been other forum threads about mouse remaining in "drag mode" after it exits the canvas area.  But I can't remember the fix.

Be sure to search the forum for 'iframe' and maybe even 'pointerLock' (because a mouse that gets stuck in drag-mode... after it accidentally is dragged off-canvas... is SIMILAR TO pointerLock).  It's NOT a pointerLock-based problem, though.

iFrames are strange.  They are "isolated"... in a rather tight security sandbox.   There are 17 returns when doing playground search for 'iframe'.  Might be something to learn, there.

Perhaps... don't use iframes?  *shrug*  Anyway, take a look, at our docs... https://doc.babylonjs.com/how_to/gui

See the little "eyeballs"?  Click on those, and a BJS scene "pops-open", and they don't suffer-from "accidentally drag-camera-pointer off-canvas" problems.  BUT, they DO allow camera dragging even when the pointer exits the canvas area.  SO, maybe not the correct solve, yet.

Issue review:  DOM-event for canvas onPointerOut/onMouseOut... NOT seen triggering (so far - needs further tests?)... if pointer leaves canvas while dragging.  buttonUP while pointer is off-canvas... not seen by DOM, either.  Ok, stay tuned for better comments from wiser people than I. 

[gamedev44]

Hi, Thanks

I found the fix by combining document.onmouseout with another thread here that describes how to test if the mouse is still in the document using coordinates, which covers the situation when the pointer is down while dragging the camera onmouseout.