How to allow raycasts through a full‑screen Overlay UI Frame in Studio?

🧑‍💻 Technical Support
1

Hey everyone,

In Niantic Studio I have a full‑screen UI Frame Overlay that’s completely transparent except for a few buttons inside of it. Unfortunately, this Frame is blocking my ecs.input.SCREEN_TOUCH_START raycast events, which I’m using to place objects on the ground in AR.

In the Cloud Editor I’d normally just add

pointer-events: none;

to the overlay’s <div> so clicks pass through—but in Studio I can’t find an equivalent.

Has anyone solved this? What’s the best way in Niantic Studio to let touch events “pierce” an overlay UI?

Thanks in advance!

1 Like
2

I’m needing a similar solution. This was working but as of today my objects are getting tossed into the top left corner.

    const showUI = () => ecs.Ui.set(world, eid, {display: 'flex'})
    const hideUI = () => ecs.Ui.set(world, eid, {display: 'none'})

So now I’ve added an opacity to hide my images fully but they are blocking taps on other UI.

    const showUI = () => ecs.Ui.set(world, eid, {display: 'flex', opacity: 1})
    const hideUI = () => ecs.Ui.set(world, eid, {display: 'none', opacity: 0})

Did you end up finding a solution?