4 min to read

Three.js로 3D 플랫폼 개발 [Light]

Light를 이용해 물체의 음영을 조절하는 법을 배운다. 이와 함께 주위 환경변수를 함께 이해해본다.

Featured image

Three.js를 이용한 3D 플랫폼 개발 개념공부

Light

앞서 배운 내용을 좀 정리해볼까?

Light에 영향을 받는 mesh에는 다음과 같은 것들이 있었다.

총 5가지가 있었다. 이 외에는 사실 빛이 어떻게 쬐는지에 상관업이 렌더링되기 때문에 테스트하지 않아도 될 꺼 같다.

Light에는 총 6가지와, Environment와 같은 속성까지 7가지를 살펴보면 될 꺼 같다.

하나씩 살펴보자.

AmbientLight

<ambientLight color={'blue'} intensity={5}/>

useHelper

const dLight = useRef<THREE.DirectionalLight>(null!);
useHelper(dLight, THREE.DirectionalLightHelper);


const sLight = useRef<THREE.SpotLight>(null!);
useHelper(sLight, THREE.SpotLightHelper);

후술될 광원들은 광원의 위치가 중요하기 때문에, 이를 눈으로 시각화하는걸 도와주는 툴을 사용해야겠다.

useHelper는 광원 useRef로 참조하고, useHelper로 light를 불러온다고 생각하면 될 것 같다.

DirectionalLight

<directionalLight 
    color={'#fff'} 
    position={[0,5,-5]} 
    intensity={5}
    ref = {dLight}
    target-position={[0,0,2]}
    castShadow
    // shadow-camera-top={10}
    // shadow-camera-bottom={-10}
    // shadow-camera-left={-10}
    // shadow-camera-right={10}
    shadow-mapSize={[5120,5120]}
/>

spotlight

<spotLight
    color={'#fff'} 
    position={[0,5,0]} 
    intensity={300}
    distance={10}
    angle={THREE.MathUtils.degToRad(45)}
    target-position = {[0,0,0]}
    penumbra={0.5}
    ref = {sLight}
    castShadow
/>

한 지점에서 빛을 방출하여 방출된 빛이 일직선으로 나아가다가 일정 각도 이내의 객체에만 빛이 비추는 조명

pointlight

    <pointLight
        color={'#fff'} 
        position={[0,0, -2]} 
        intensity={50}
        distance={5}
        castShadow
        shadow-camera-top={10}
        shadow-camera-bottom={-10}
        shadow-camera-left={-10}
        shadow-camera-right={10}
        shadow-mapSize={[5120,5120]}
    />

하나의 지점에서 모든 방향으로 빛을 쐬주는 light.

Environment

<Environment
    files={'./img/hdri.hdr'}
    background
    blur={0}
/>

3D 그래픽 작업을 하다 보면 사실적인 조명과 텍스처를 구현하는 것이 중요해진다.

Poly Haven은 이런 리소스를 무료로 제공하는 플랫폼이다.

폴리해븐의 hdris에서 본인이 원하는 environment를 다운받은 후, hdr파일을 지정해 불러와주면 된다.