Setting UI to block raycasts

Help & Support
1

What’s the best way to have screen-space UI elements block raycasts to the 3D game world?

E.g.
I am using a 3D camera and rigidbody.raycastFirst() to detect interactions with 3D objects in the scene.
I have a game HUD that uses this.entity.element.on(“click”, this._someClickMethod, this); to detect clicks on the UI elements/buttons.

However, the player is able to trigger both at the same time if the HUD element and 3D element overlap each other.

I need a way for the UI to block physics raycasts I guess?

2

You can add hover event on Specific Button UI to detect if your mouse is on UI button. There you can set Boolean variable.

And from other side you can decide to turn on or turn off the raycast functionality depending upon the Boolean variable.

Maybe it will help…

3

Thank you for the response. Unfortunately, this is on mobile, so there is no hover recognition.

Best I can think of is that on the touch input being received to simply return and do nothing should it be within certain bounding boxes. However, this would be a hacky solution and wouldn’t be too accurate.

Would be surprised if no-one has faced this issue before: it’s a very common thing to need have an interactive UI in a 3D game…

4

For what it’s worth (in case anyone comes across this), have settled on a solution whereby:

  • A new component sits on any UI that needs to block input to the 3D scene
  • This component listens for this.entity.element.on(pc.EVENT_TOUCHSTART/END, …);
  • This is used to set a flag as to whether the player currently has the input down on a UI element
  • Input on the 3D is ignored if the flag is set
5

yes i am aware about it the mobile touch…
But i did not found any alternative solution.

This is exactly what i want to say…
Good to know it worked for you.