threeJs 공부4

light

light에도 여러 종류가 있으며
spotlight를 이용해서 그림을 집중적으로 볼 수 있도록 효과를 주었다.

https://threejs.org/docs/#api/en/lights/SpotLight

아래 사진에서는 PointLight를 사용하여 어두운 부분을 밝혀줄수 있었다.

function Picture({ size, position, spotPos, rotation, imgURL }) {
  const [x, y, z] = size;

  // Defence Close to IMG
  const [ref] = useBox(() => ({
    type: 'Static',
    args: [x, y, z + 5],
    position,
    rotation,
  }));

  const testMap = useLoader<THREE.Texture, string>(THREE.TextureLoader, imgURL);
  const light = useRef<any>();

  // DELETE: DEBUG HELPER
  // useHelper(light, SpotLightHelper, 'red');

  useLayoutEffect(() => {
    if (light.current) light.current.target = ref.current;
  }, [ref]);

  return (
    <>
      <Spotlight
        position={spotPos}
        target={light}
        intensity={3}
        penumbra={0.8}
        sNormalBias={0.5}
        sBias={0}
        angle={Math.PI / 8}
        decay={3}
      />
      <mesh ref={ref}>
        <boxGeometry args={[x, y, z + 1]} />
        <meshBasicMaterial map={testMap} />
      </mesh>
    </>
  );
}

export default Picture;

function Spotlight({
  position,
  intensity,
  penumbra,
  sNormalBias,
  sBias,
  angle,
  decay,
  target,
}: any) {
  return (
    <spotLight
      castShadow
      ref={target}
      position={position}
      intensity={intensity}
      penumbra={penumbra}
      shadow-bias={sBias}
      shadow-normalBias={sNormalBias}
      angle={angle}
      decay={decay}
    />
  );
}

export default Spotlight;