Interactive elements reporting intersections outside of children

[richardanaya]

I have a scene with multiple Interactive tags, and they seem to be reporting intersections for elements outside of children of the individual tag. This makes it pretty difficult for me to to interactions with objects that aren't necessarily in the foreground of my scene.

[richardanaya]

What I do as a work around right now is create a component called

function SemiInteractive(props: { interactable: boolean } & InteractiveProps) {
  if (props.interactable) {
    return <Interactive {...props}>{props.children}</Interactive>;
  }
  return <>{props.children}</>;
}

That turns on and off interactive component to prevent it from stealing access.

[saitonakamura]

@richardanaya could you provide a small repro of illustrating this behaviour? I'm struggling to wrap my head around it and events code is pretty tricky to get right

[richardanaya]

Sure thing, let me think about this a bit more

[bbohlender]

Interactions in react-three/xr v6 now work just like in the whole react-three ecosystem, which means that the pointer-events concept is used. Here's a tutorial that gives an overview what is possible with the new interactions system. For your use case, you can new use the pointerEvents (none/listener/auto) property on all objects to disable and re-enable pointer events.