그림자 표현하기

📌 Renderer에 그림자 사용 설정하기

Three.js에서 그림자 표현을 하기 위해서는 우선

렌더러 하단에 renderer.shadowMap.enabled를 true로 설정해 주어야 한다.

renderer.shadowMap.enabled = true

위 설정을 해도 아래 이미지와 같이 그림자가 표현되지는 않는다. 추가로 몇 가지를 더 설정해야 한다!

📌 그림자를 받을 오브젝트와 그림자를 표현할 오브젝트 설정하기

빛을 받아 그림자를 표현할 오브젝트에 castShadow를 적용하고, 그림자를 받을 오브젝트에 receiveShadow를 적용한다.

구 형태의 오브젝트의 그림자를 표현할 것이므로 해당 오브젝트에 castShadow를 적용한다.

// 구 오브젝트
const geometry1 = new THREE.SphereGeometry(0.3, 32, 16)
const material1 = new THREE.MeshStandardMaterial()
const sphere1 = new THREE.Mesh(geometry1, material1)
sphere1.position.x = -2
scene.add(sphere1)
sphere1.castShadow = true; // 그림자 표현

바닥에 그림자를 받아 표현할 것이므로 바닥에 receiveShadow를 설정해준다.

// 바닥 오브젝트
const planeGeometry = new THREE.PlaneGeometry(30, 30, 1, 1)
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0xeeeeee })
const plane = new THREE.Mesh(planeGeometry, planeMaterial)
plane.rotation.x = -0.5 * Math.PI
plane.position.y = -0.5
scene.add(plane)
plane.receiveShadow = true; // 그림자 표현

그래도 여전히 그림자가 표현되지 않는다..!

📌 빛에도 그림자를 설정하기

// 빛
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.9)
directionalLight.position.set(-1, 1.2, 1.1)
directionalLight.castShadow = true // 그림자 추가

이제 오브젝트 아래에 그림자가 생긴 것을 확인할 수 있다!

근데 그림자의 해상도가 너무 깨져 보인다.

그림자 해상도를 높이는 방법은 shadow의 mapSize에서 width, height값의 수치를 올려주면 된다.

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

그림자 해상도가 조금 선명해졌다!

수치를 더 올릴수록 그림자가 선명해지는데, 선명해질수록 렌더링 리소스에 영향이 많이 가므로 성능 이슈가 생길 수 있으니 잘 조절해주어야 한다~

📌 그림자에 블러 효과 추가하기

  directionalLight.shadow.radius = 2

그림자 영역의 테두리에 블러 효과가 추가되어 조금 더 자연스러운 그림자 표현이 되었다.