Use <PivotControls> with <ContactShadows> enabled

[TimKraemer]

Hi,

I want to use <PivotControls> in a scene with <ContactShadows> enabled. Unfortunately this results in an ugly shadow-box:

If I put my <PivotControls> onto another layer and therefor hide it from the <ContactShadows> camera it will look like I want it, however I can't interact with the <PivotControls> anymore - looks like my pointer-events aren't working on that layer...

Here is a CodeSandbox which reproduces this behaviour. Any ideas how to solve this?

[TimKraemer]

this was asked in https://discourse.threejs.org/t/r3f-pivotcontrols-casts-contact-shadows/54616/4 too, also there is a pull request related to this: #1585 which apparently was never merged.

How I solved it with layers.
first assigning layers to the main-camera and the raycaster which will essentially deal with pointer events:

  const { camera, raycaster } = useThree()

  useEffect(() => {
    camera.layers.enable(0) // default: visible for everyone and interactive
    camera.layers.enable(1) // visible only for main camera and interactive
    camera.layers.enable(2) // visible only for main camera but non-interactive
  }, [camera])

  // enable pointer interaction for layer 1
  useEffect(() => {
    raycaster.layers.enable(1)
    return () => {
      // reset the raycaster layers when this component unmounts
      raycaster.layers.disable(1)
    }
  }, [raycaster])

I didn't touch the layers of my <ContactShadows>. Here is how I put my <PivotControls> to layer 1:

// set the layer of the object and all its children to the given layer
// and all its children's children to the given depth
const setLayerRecursively = (object, layer, depth) => {
  if (depth < 0) return
  object.layers.set(layer)
  for (const child of object.children) {
    setLayerRecursively(child, layer, depth - 1)
  }
}

...

            <PivotControls
              ref={(controls) => {
                if (controls) {
                  setLayerRecursively(controls, 1, 4) // we need to set the layer to all children recursively 4 levels deep, to affect all the sub-meshes
                }
              }}