그림자 효과는 3D 그래픽을 현실적으로 만들어주는 중요한 요소입니다. Three.js는 JavaScript 기반의 3D 라이브러리로, 그림자 효과를 쉽게 구현할 수 있습니다. 이번 블로그 포스트에서는 Three.js를 사용하여 그림자 효과를 만드는 방법에 대해 알아보겠습니다.

그림자(Shadow)란?

그림자는 빛을 가리는 물체에 의해 형성되는 어두운 영역입니다. 3D 공간에서 빛의 위치에 따라 물체의 그림자 위치와 형태가 결정됩니다. 그림자 효과를 적절하게 적용하면 물체가 실제로 3D 공간 내에 존재하는 것처럼 보이게 됩니다.

Three.js에서 그림자 효과 사용하기

먼저 Three.js를 설치합니다. 이를 위해 npm을 사용하여 다음과 같이 설치할 수 있습니다.

npm install three

설치가 완료되면 Three.js를 가져옵니다.

import * as THREE from 'three';

Three.js에서 그림자 효과를 사용하기 위해서는 Renderer, Light, 그리고 그림자를 만들고자 하는 Object가 필요합니다.

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 10, 0);
light.castShadow = true;
scene.add(light);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
cube.position.y = 1;
cube.castShadow = true;
scene.add(cube);

먼저 Renderer를 생성하고 크기를 설정합니다. 그리고 DOM에 Renderer의 요소를 추가합니다. Scene을 생성하고 DirectionalLight를 생성하여 Scene에 추가합니다. 그리고 BoxGeometry를 생성하고 MeshStandardMaterial을 생성하여 랜더링할 조각을 만들어줍니다.

마지막으로 그림자를 활성화하면 됩니다.

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 500;
cube.castShadow = true;

Renderer에서 그림자를 사용하도록 설정하고, Light의 그림자에 필요한 설정들을 추가합니다. 그리고 Object에 castShadow 속성을 추가하여 그림자를 발생시킬 물체를 설정합니다.

마지막으로 화면을 렌더링해봅니다.

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.y += 0.02;
  renderer.render(scene, camera);
}

animate();

위 코드에서는 animate 함수를 통해 매 프레임마다 큐브를 회전시키고 화면을 렌더링합니다. 이를 통해 그림자 효과를 볼 수 있습니다.

결론

Three.js를 이용하면 그림자 효과를 손쉽게 구현할 수 있습니다. 위에서 설명한 단계를 따라가면 선명하고 현실적인 그림자 효과를 가져올 수 있습니다. 꼭 필요한 곳에서 그림자 효과를 적용해보세요. Happy coding!