Light(조명)

개요

Three.js에서 자주 사용하는 Light를 정리한다.

AmbientLight

은은하게 깔아주는 조명으로 어떤 입체형태로 그림자가 생기지 않고 단색으로 표현이된다. 따라서 이것을 기본으로 깔아주고 다른것을 추가로 사용해주는 식으로 많이 사용한다. 은은하게 깔아주기 때문에 위치 속성이 없다.

 const ambientLight = new THREE.AmbientLight("white", 0.5);
 scene.add(ambientLight);

DirectionalLight

태양광과 동일한 효과를 주는 조명이다.

const light = new THREE.DirectionalLight("white", 0.5);
light.position.y = 3;
scene.add(light);

const lightHelper = new THREE.DirectionalLightHelper(light);
scene.add(lightHelper);

PointLight

특정 지점에서 전방향으로 퍼지는 조명을 의미한다.

const light = new THREE.PointLight("red", 1, 100, 2);
light.position.y = 3;
scene.add(light);

const lightHelper = new THREE.PointLightHelper(light);
scene.add(lightHelper);

SpotLight

원뿔모양의 조명으로, 우리가 흔히 알고있는 스포트라이트를 의미한다.

HemisphereLight

AmbientLight처럼 전체적으로 빛을 적용해주는 느낌의 조명이다. 마찬가지로 그림자가 없다.

const light = new THREE.HemisphereLight("pink", "lime", 1);
light.position.x = -5;

light.position.y = 3;
scene.add(light);

const lightHelper = new THREE.HemisphereLightHelper(light);
scene.add(lightHelper);

RectAreaLight

사각형 조명에서 표출하는 빛이라고 생각하면 된다. RectAreaLightHelper는 따로 THREE에 포함되어 있지 않으므로 따로 임포트 해주어야 한다.

import { RectAreaLightHelper } from "three/examples/jsm/helpers/RectAreaLightHelper";

const light = new THREE.RectAreaLight("orange", 10, 2, 2);
light.position.y = 3;
scene.add(light);

const lightHelper = new RectAreaLightHelper(light);
scene.add(lightHelper);

기타

애니메이션

조명을 원형식으로 돌아가면서 비춰주는 애니메이션을 적용하려면 시간이 계속 늘어나야 하기때문에 getElapsedTime을 사용하고 삼각함수의 알파값이 커지면 찍히는 점의 위치가 원을 그리기때문에 원운동을하는 방식을 이용하여 애니메이션을 적용한다.

  function draw() {
    const time = clock.getElapsedTime();

    light.position.x = Math.cos(time) * 3;
    light.position.z = Math.sin(time) * 3;

    renderer.render(scene, camera);
    renderer.setAnimationLoop(draw);
  }

그림자

그림자를 사용하기 위해서는 renderer에 shadowMap을 활성화 해주고,조명과 물체에서도 설정을 해주어야한다.
이때 다른 물체에 그림자가 생기게 영향을 줄것인지는 castShadow 속성을 그 영향을 받아서 나한테 그림자가 그려지게 하는것 receiveShadow 속성을 변경해준다.

위의 애니메이션에서 사용했던 Mesh소재들을 기준으로 plane에 그림자가 생겨야 하니까 castShadow가 true여야하고 plane은 영향을 받아서 그림자가 생겨야하니까 receiveShadow가 true이어야 한다.

light.castShadow = true;

plane.receiveShadow = true;
box.castShadow = true;
box.receiveShadow = true;
sphere.castShadow = true;
sphere.receiveShadow = true;

추가로 그림자의 width, height을 적용해 그림자의 퀄리티를 설정해줄수 있으며 이는 퍼포먼스에 영향을 준다.

  light.shadow.mapSize.width = 2048;
  light.shadow.mapSize.height = 2048;

전	후

그리고 그림자에 radius속성을 주어서 그림자에 블러효과를 적용할 수 도 있다.

그림자 최적화

카메라의 거리에따라 그림자를 매번 그리면 성능에 문제가 생기기 때문에 카메라가 멀어지거나, 가까워질때 등과 같이 조건부로 그림자를 그려주는 방법이 있다.

아래는 카메라의 x위치가 변경이되면 5가 넘어가면 그림자가 표출이 되지 않는 것을 의미한다.

light.shadow.camera.near = 1;
light.shadow.camera.far = 5;