Shadow Camera for directionalLight using leva

[a7u7a]

Hi! I'm trying to fine-tune some shadows for a scene I'm working on. The shadows are generated using a directionalLight. However, I have not been able to adjust the properties such as shadow-camera-right using leva controls or any other form of input.
This is my demo setup: https://codesandbox.io/s/react-three-fiber-directionallight-shadows-dlwu1p?file=/src/index.js
I was expecting to be able to control each value like so:

function Lights() {
  const [light, set] = useState()
  const { shadowCameraSize } = useControls({
    shadowCameraSize: {
      value: 2,
      min: 1,
      max: 50,
      step: 0.1
    }
  })

  return (
    <>
      <directionalLight
        ref={set}
        intensity={1}
        position={[5, 5, 5]}
        shadow-mapSize-width={2048}
        shadow-mapSize-height={2048}
        shadow-camera-left={-shadowCameraSize}
        shadow-camera-right={shadowCameraSize}
        shadow-camera-top={shadowCameraSize}
        shadow-camera-bottom={-shadowCameraSize}
        castShadow
      />
      {light && <directionalLightHelper args={[light, 1]} />}
    </>
  )
}

Can it be done?

[drcmda]

https://codesandbox.io/s/react-three-fiber-directionallight-shadows-forked-ddqjvs?file=/src/index.js

see https://threejs.org/docs/index.html?q=orth#api/en/cameras/OrthographicCamera

Note that after making changes to most of these properties you will have to call .updateProjectionMatrix for the changes to take effect.

i recommend always having three docs open, it helps to swat issues.

[a7u7a]

Thanks a lot! I had assumed the update was being handled internally by react-three-fiber 😅