2D Layer isPointerBlocker exception?

Questions
1

I have a 2d layer with a rectangle label, clicking on the rectangle triggers an event so I set isPointerBlocker = true on the rectangle. This is preventing the mousewheel to zoom when the cursor is over the label, is there a way to ignore the mousewheel but respond to clicks?

1 Like
2

Let me add @msDestiny14 who is taking great care of the Babylon GUI

1 Like
3

Hey there @ambidexterich

Would it be possible to get a PG of your example? I have some hunches but I just want to take a look at your environment set up to be super sure and give the best possible solution!

4

I will give it a try, it might be difficult because but I will see if I can create a simplified version

1 Like
5

I threw together roughly what I am doing.

https://playground.babylonjs.com/#9UD075#2

I want the mouse wheel to zoom because I might have a lot of meshes so labels can take a lot of room when zoomed out.

Thanks!

6

Do you want to be able to click on the label though? For example. If your mouse is over the label should you be able to rotate the camera or no?

Edit: Ah I see what you want. Let me look into it more. :slight_smile:

7

In my example clicking on the label console logs some text but in my specific use case holding mouse down and rotating isn’t of importance but mousewheel zooming is.

Edit: I just saw your edit

1 Like
8

Alrighty!

So this is a special case because you are using the defaulted behavior for zooming with the camera. Now you have an interesting conflict. You want to ignore the pointer so you can do the zoom…but you DO want the pointer to be able to interact with the label anyways! :joy:

What you need is some custom behavior for your label. :slight_smile: https://playground.babylonjs.com/#9UD075#3

In this case while the pointer clicking events will not work with

pointerBlocker = false.

We can still use the onPointerEnterObservable and onPointerOutObservable (line 99 and line 104). We will use these to detect when the mouse is inside the GUI’s hit box. Then we will create a scene onPointerObservable. This will be for whenever we click on the scene. In this we will check if we our inside our GUI based on the flags we set earlier.

scene.onPointerObservable.add( () => {
   if(hoveredOver) {
      console.log("I am clicking!");
   } 
}, BABYLON.PointerEventTypes.POINTERDOWN);

Let me know if you have any questions for this implementation.

4 Likes
9

Thanks for the help! I will have to play around with the solution because there are multiple labels that need to pass data to the observable to do the appropriate action

2 Likes