[Question]: Disable ray through object

[JenniferFalkenstein]

Hi there,

I have a Plane and a Cube (and light). The Cube is placed behind the Plane and is wrapped within an <Interact /> Element, while the Plane doesn't do anything.
Every time the Cube gets selected it changes the color of the light into another color.

Now I noticed that even if the Plane is in front of the Cube, the ray still goes through the Plane and therefore is able to select the Cube behind, which is not what I want. The Plane should actually block the ray, so the player won't be able to click the Cube behind.

Is there some kind of prop I have to set or is there another way to accomplish this? 😄

[saitonakamura]

@JenniferFalkenstein events are triggered on first interactive target by default

react-xr/src/Interactions.tsx

Lines 68 to 70 in 6a16dfa

	// Otherwise, filter to first hit
	const hit = intersections.find((i) => i?.object)
	if (hit) intersections = [hit]

. Another option is to provide custom events.filter function

So to block the Cube you'd either need to

• wrap Plane in Interactive component
• add event handlers to Plane via useInteraction
• provide your own logic via events.filter