Question about onClick event and layers relation

[vicrsp]

Hi all, in my application I have created some basic components (rectangles, polygons, etc) using react-three-fiber. They all have a border as children, which was created based on Three's fatline example. Each component type has its own layer and the User should be able to manually enable/disable them through some buttons in a menu.

As I understood from this issue, children don't inherit the layer from their parents, such that I have to traverse them and assign the proper layer to the borders manually. This is done like this:

myComponent.traverse((x: Object3D) => {
    x.layers.set(layerId)
})

This works fine, but if I add an onClick event to the base component, clicking it does not work. A solution I found for the clicking issue was to:

myComponent.traverse((x: Object3D) => {
    x.layers.enable(layerId)
})

However, this causes the border to continue to be displayed, even though the parent component layer is disabled. I believe this happens because the border also belongs to Three's default layer, which is always enabled.

I need to dig deeper on how I am handling layers on my app, but I wanted to try to understand the relation between layers and the raycasting rule used to handle the events. This was not clear for me using the documentation, does anyone have some directions?

Here is a live example of the problem: https://codesandbox.io/s/issue-with-layers-and-click-event-dpy5l

[vicrsp]

In case anyone bumps into this: it is also necessary to enable the layers in the raycaster object, since it will only consider layer one as default. Just change this in the sandbox code above:

const { camera, raycaster } = useThree()
useEffect(() => {
    if (layerEnabled) { 
         camera.layers.enable(layerId)
         raycaster.layers.enable(layerId)
    }
    else { 
         camera.layers.disable(layerId)
         raycaster.layers.disable(layerId)
   }
  }, [layerEnabled, layerId, camera.layers, raycaster])