[Light]

Light 는 drei 에서 지원하는 useHelper 를 사용하여 Helper 를 등록할 수 있다
또한, drei 에서 제공하는 Light 가 하나 있는데 바로 SpotLight 이다.
기존과 다른점이라면 마치 동굴에서 새어나오는 빛과 같은 형태가 추가되어있다

import { SpotLight, useHelper } from "@react-three/drei";
import * as THREE from "three";

export default function Light() {
  const lightRef = useRef<any>(null);
  // useHelper(lightRef, THREE.DirectionalLightHelper, 3, 0x000000);
 return (
    <>
     {/*
      <directionalLight
        ref={lightRef}
        castShadow
        args={[0xffffff, 5]}
        position={[4, 4, 4]}
        shadow-camera-left={-25}
        shadow-camera-right={25}
        shadow-camera-top={25}
        shadow-camera-bottom={-25}
        shadow-camera-near={0.1}
        shadow-camera-far={1000}
        shadow-mapSize-width={4096}
        shadow-mapSize-height={4096}
      />
     */}
      <SpotLight
       color={0xffffff}
       intensity={10}
       distance={100}
       angle={Math.PI / 4}
       penumbra={1}
       decay={0.5}
       // 빛의 집중 정도
       anglePower={5}
       // 빛의 세기가 광원으로부터 멀어질 수록 빨리 감소하는 정도
       attenuation={300}
       // 조명의 상단 반지름
       radiusTop={1}
       // 조명의 하단 반지름
       radiusBottom={1}
       // 불투명도
       opacity={0.5}
       // 조명을 사실적으로 보이게 할지 (최적 조명 사용 여부)
       volumetric
       // 디버그 모드 활성화 여부
       debug
       // 빛을 비출 방향 (lookAt 역할)
       target={target}
       castShadow
       position={[3, 3, 3]}
      />
    </>
  );
}