Scene.onPointerDown and GUI

Questions
1

I need to detect a mouse click to disable a hint. I set a bool in scene.onPointerDown, but it doesn’t get fired if I click on a GUI element. What is the best way around it?

2

adding @msDestiny14

1 Like
3

You can disable a GUI by isEnabled = false or isHitTestVisible = false depending on what you need. :slight_smile:

1 Like
4

But maybe there’s a way to detect the click even when it’s on gui?

5

each ui element has a click callback, would that work in your case?

1 Like
6

Yes, of course. I’m not sure what your issue is. Except when reading your post, you would actually not set the pointer down event/listener/observable on your scene. You would set it on a pickable object/mesh, a gui element or (more likely and more often) a control.

In the end, you would have something like that on your control (2d or 3d gui)

            btn.pointerDownAnimation = () => {
                myhint.isVisible = false;
            }

As @RaananW says you can also use a callback on the event (if the button/control is not intended to directly act on the hint visibility but the action would take place only later on (relying on the callback of the click). Alternatively, you can also set a state (variable) for the button click and you can use this variable in your ‘hide my hint’ function.

Something like that:
_hint = 0;
btn.onPointerUpObservable.add(() => {
_hint = 1;
changeHint();
});

1 Like
7

I think I should have started with this. So here’s the page that I’m talking about. If you click on any of the GUI elements - the circle with the hand doesn’t disappear. If you click anywhere else - it does. The hiding of the hand is done in scene.onPointerDown.

So anyway, I don’t understand, why the GUI prevents scene.onPointerDown from being fired? It’s logical that any clicks inside the scene should be triggered, no?

8

You may use click event.

9

It should not prevent it from being fired, but there will be no pick info. The GUI is being directly drawn to the texture and does not consist of meshes.

This is a quick demo - Simple GUI in fullscreen mode | Babylon.js Playground (babylonjs.com)

Try pressing the upper button. You will see that the regular picking (scene pointer down) returns hit: false, but the button’s event is still being triggered.

That’s probably an automated function that is added to each added GUI element. Or they are not using the GUI elements but something else altogether.

1 Like