Jump to content

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?

Link to comment
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.

Link to comment
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.


Link to comment
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 () {


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

Link to comment
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.  :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...