Sign in to follow this  
gamedev44

Universal camera on mouse up

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.  :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.