How to make GUI scene block pointer and key events on main scene?

I’m using a two scene approach to render my GUI without post processing, however rendering the GUI on another scene causes all input events on the main scene to not get blocked.

Here is an example where you can see selecting text is also causing the camera to move:
https://playground.babylonjs.com/#UWS0TS#147

I did read The Babylon GUI | Babylon.js Documentation however my world is quite complex and I would rather not have to add a layerMask to every imported model…

How can I block input events on the main scene if the UI scene blocks them due to the GUI?

depends what you want to block. In regard to the 3D scene , Inputs are assigned to cameras

you can disable/enable various inputs on the camera as required.

I have handled input classes via cameras myself but you do get a manager class I think can do it as well

May be something like this?…
Line 73 to 83. Attach/Detach camera controls on event.

https://playground.babylonjs.com/#UWS0TS#149

That works pretty well. I had to replace pointerUp with pointerEnter to get it to work. Now if there was only a way to watch all elements in the UI at once. I have a lot of GUI elements.

This seems to work pretty well for N number of controls:

https://playground.babylonjs.com/#UWS0TS#151

I’ve noticed a problem when dragging outside of the canvas from the text block, it seems to remain in a selecting state.

Hello, brother, how to solve the problem

Which problem specifically are you looking for help? :slight_smile:

“I’ve noticed a problem when dragging outside of the canvas from the text block, it seems to remain in a selecting state?”

Huh. At first I was going to come up with a solution for this. But now playing with this myself feels more like a bug and any solution I’d give would feel more of a work around. Let me see if I can take a look at that and get some other thoughts.

Just double checking did you need more clarity on the early questions?

Update! Here’s the PR fix for it.

1 Like