Three.js 8일차 (그림자)

 

 

---

1. 그림자 적용하는 방법

---

 

 

---

1. Renderer에 그림자 사용 설정

2. 빛을 받아 그림자를 표현할 물체와 그 그림자를 받을 물체를 특정 코드로 설정

3. 빛에 그림자 설정

---

 

 

기본적으로 그림자가 있으려면 빛과 물체가 있어야 한다. 그러나 빛의 종류에 따라 그림자 표현이 안되는 것도 있다. 

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
// ambientLight.castShadow = true; // 그림자 안먹힘
scene.add(ambientLight);

AmbientLight가 그것이다.

 

 

1) 렌더러에 그림자 맵을 추가해준다.

renderer.shadowMap.enabled = true;

 

 

2) 빛을 받아 그림자를 표현할 물체 설정

castShadow는 그림자를 표현할 도형과 receiveShadow는 그림자를 받을 도형을 의미한다.

 

일단 castShadow는 2가지 설정을 진행한다.

첫번째는 그림자를 표현할 도형이라고 설정한다.

// 도형 추가
const geometry = new THREE.SphereGeometry(0.5, 32, 16);
const material = new THREE.MeshStandardMaterial({
    color: 0x004fff
});
const cube = new THREE.Mesh(geometry, material);
cube.rotation.y = 0.5;
cube.position.y = 0.2;
cube.castShadow = true; //여기
scene.add(cube);

 

 

두번째는 그림자를 표현할 빛을 설정한다.

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(-1, 1.2, 1.1);
const dlHelper = new THREE.DirectionalLightHelper(directionalLight, 0.2, 0x0000ff);
scene.add(dlHelper);
scene.add(directionalLight);
directionalLight.castShadow = true; //그림자 O 여기
directionalLight.shadow.mapSize.width = 1024;
directionalLight.shadow.mapSize.height = 1024;
directionalLight.shadow.radius = 8;

 

 

그리고 마지막으로 물체의 그림자를 전달받을 오브젝트를 설정한다.

우리는 구체의 그림자를 바닥에 받을 것이다.

//바닥 추가
const planeGeometry = new THREE.PlaneGeometry(20, 20, 1, 0);
const planeMaterial = new THREE.MeshStandardMaterial({
	color: 0xffffff,
    transparent:true,
    opacity:0.5
});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.y = -0.2;
scene.add(plane);
plane.receiveShadow = true; //전달받을 그림자 여기

 

 

 

 

---

2. 그림자 해상도

---

 

 

그림자를 자세히 보면 그림자 표면이 울퉁불퉁한 것을 볼 수있다.

이 그림자를 매끈하게 만들어주기 위해 그림자 해상도를 설정해야한다.

 

directionalLight.shadow.mapSize.width = 1024;
directionalLight.shadow.mapSize.height = 1024;

width, height의 크기가 커질수록 해상도가 높게 들어간다. 하지만 렌더링에 들어가는 리소스도 많이 들어간다. 

 

2048 x 2048

 

 

 

---

3. 도형이 2개 이상이라면?

---

 

 

 

 

이런식으로 도형 2개가 있고, 빛을 받아 그림자가 생성된다. 근데 동그라미의 그림자가 ConeGeometry에는 반영이 안되는 것을 볼 수 있다.

 

 

cube2.receiveShadow = true;

 

그럴 경우 그림자를 받을 도형에 receiveShadow를 받으면 반영된다.

 

 

 

---

4. 그림자 블러 효과

---

directionalLight.shadow.radius = 8;

 

좌/우를 비교해보면 블러처리가 된 모습을 볼 수 있다.