OnPointerOutTrigger doesn't trigger if div in front of canvas

Questions
1

Hi all,

I’m working on a project which has a div in front of my render canvas.

I’m using the actionmanager to detect some onpointerovertrigger and OnPointerOutTrigger events which works great.
The problem is that when I’m over the trigger object but slides my mouse on the div (which is over my canvas with a position absolute and high z-index) then the onpointerouttrigger doesn’t trigger.
Is that normal? is there a way to force the onpointerouttrigger to trigger when the canvas loses focus or when I detect a mouseover my div?

I created a playground based on the onpointerovertrigger example. I added a div in front of the canvas.
https://playground.babylonjs.com/#J19GYK#348
Rotate the perspective so that one of the objects line up with the red div, then move your mouse over the 3d object to trigger onpointerover and slide your mouse over the red div. You’ll see that the 3d object stays highlighted.

image
image1357×1383 80.7 KB

I hope that this makes sense. Let me know if you have any questions.

Thanks!!

Chris

1 Like
2

I think you need to let the canvas listen the mouse out event

3

Add pointer-events: none to the div styling:

https://playground.babylonjs.com/#J19GYK#349

3 Likes
4

Thanks Inteja for your input.

I did think about the pointer events none but unfortunately it doesn’t resolve my problem.

Instead of firing the onpointerouttrigger when you go over the div, it just ignores the div which is not the behavior I was looking for.

In your playground example, when you go from the object to the red div, nothing happens since the red div mouse events are ignored.
I need for the object to return to its original state as soon as the mouse goes over the red div. I tried to do that by storing the object when onpointerover is triggered, then putting a mouse over event on the red div and changing the properties of the previously stored object when the red div mouseover is triggered. This works fine one time but since the onpointerout was not triggered from the Babylonjs actionmanager, if I go back to my object from the red div, then the onpointerover event of the object is not triggered again since I think the actionmanager hasn’t registered that the mouse had left the object to begin with.

So with my technique, I can get the object to change state inpointerover (like in the playground currently). Then when i move my mouse to the red div, my object goes back to its original state which is great, but if I go back to the object from the red div, nothing happens when I would need the onpointerover of the object to trigger again.

This is why I was hoping to be able to store the action manager onpointerout event of my object and trigger it manually when a mouse over the red div is detected. Is that possible?

Let me know if you have any questions.

Thanks

5

I believe you can use flags. Enable the events on the div and set flags.div to true or false:

const flags = {}

div.onmouseenter = () => {
  flags.div = true
}
div.onmouseleave = () => {
  flags.div = false
}

Now set flags.mesh to true of false.

mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOutTrigger, flags, "mesh", false));
mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOverTrigger, flags, "mesh", true));

Now you can:

scene.registerBeforeRender(function () {
  if (flags.div && flags.mesh) {
    // your code
  }

  // or
  if (!flags.div && flags.mesh) {
  //
  }

// etc
})

Is this what you are looking for?

5 Likes
6

Sorry I just realized that I did not reply to you but that worked great.

Thanks for your help!

5 Likes
7

No problem :vulcan_salute:

1 Like