directional-light-shadow-camera-helper.tsx

import * as React from 'react'
import * as THREE from 'three'
import { OrthographicCamera, useHelper } from '@react-three/drei'
import { proxy, ref } from 'valtio'

export const state = proxy<{
  directionalLight: { value?: THREE.DirectionalLight };
}>({
  directionalLight: ref<{ value?: THREE.DirectionalLight }>({}),
})

export default function Sun() {
  const shadowCamera = React.useRef<THREE.OrthographicCamera>(null!)

  useHelper(shadowCamera, THREE.CameraHelper)

  if (shadowCamera.current && state.directionalLight.value)
    state.directionalLight.value.shadow.camera = shadowCamera.current

  const directionalLightRef = React.useCallback((directionalLight: THREE.DirectionalLight) => {
    state.directionalLight.value = directionalLight
  }, [])

  return (
    <>
      <directionalLight
        ref={directionalLightRef}
        castShadow
      />
      <OrthographicCamera ref={shadowCamera} />
    </>
  )
}