[Three.js] 포트폴리오를 위한 개발?! - 2편

자자 mesh로 모양 정돈 잡아봤으니 이번에는 그림자도 넣어보고 좀 더 3D3D스러운 것들을 해보려고 한다.

현재 코드에 mesh는 다음 MeshBasicMaterial 같이 되어있다.

//const material = new THREE.MeshBasicMaterial({color: 'white'});
const material = new THREE.MeshStandardMaterial({color: 'white'});
const mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add(mesh);

그래서 이 MeshBasicMaterial을 MeshStandardMaterial로 바꿔서 빛의 효과를 받도록 할 것이다. 조명으로는 AmbientLight를 넣을 것이다.

AmbientLight는 모든 곳에 같은 량의 밝기를 주는 조명이다.

다른 조명으로는 다음과 같은 것들이 있다! 다양하니 다음에 내 포폴에 적합한 조명을 찾아보도록 하자!

• HemisphereLight: 반구광
• DirectionalLight: 직사광
• PointLight: 한 점에서 뻗어나가는 광원
• SpotLight: 스포트라이트
• RectAreaLight: 사각형태의 조명, 형광등이나 천장의 유리를 통과하는 태양빛 표현하기에 좋음

일단 AmbientLight로 어떤 효과가 나는지 본다.

// 모든 곳에 같은 밝기를 제공하는 AmbientLight를 만들고 scene에 추가한다.
const ambientLight = new THREE.AmbientLight();
ambientLight.intensity = 0.4; // 밝기를 조절할 수 있다.
scene.add(ambientLight);

근데 결과를 보니 어느 방향에서든 같은 밝기를 제공하는 빛이라서 그런지 그림자도 없고 단순히 밝아진 모습만을 보인다.

따라서 위의 조명 중에서 태양광과 같은 형태인 DirectionalLight를 사용해보기로 하였다. 그리고 그림자를 추가하려면 shadowMap의 속성을 변경해서 표현할 수 있도록 해주어야한다.

기본으로 shadowMap.type의 속성을 설정하는데 있어 PCFShadowMap을 사용한다고 하고 PCFSoftShadowMap으로는 더욱 부드러운 그림자 연출이 가능하다고 한다.

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

그림자 속성을 설정했다면 mesh로 인해서 그림자가 생기게 해야한다. 그러려면 cashShadow를 통해서 설정을 한다. mesh 자신도 그림자를 받도록 해야한다면 receiveShadow 속성도 true로 해준다.

mesh.castShadow = true;
mesh.receiveShadow = true;

그림자 자체의 속성도 조절할 수 있도록 되어있다. 그림자는 빛에 의해서 생기기때문에 빛의 크기를 조절하면 그림자도 조절이 된다.

그래서 다음과 같이 속성을 바꿨다.

const directionalLight = new THREE.DirectionalLight();
directionalLight.position.set(3, 3, 3);
directionalLight.lookAt(0, 0, 0);
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;
directionalLight.shadow.camera.near = 1;
directionalLight.shadow.camera.far = 60;
scene.add(directionalLight);

그리고 정사각형만 덩그러니 있으면 그림자 표현이 되는지를 확인할 수가 없으니 아래에 플랫한 바닥을 깔아줄 것이다.

const planeGeometry = new THREE.PlaneGeometry(100, 100);
const planeMaterial = new THREE.MeshStandardMaterial();
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2;
plane.position.y -= 0.5;

plane.receiveShadow = true;
scene.add(plane);

다음과 같이 그림자가 이쁘게 지는 애가 만들어졌다!!!

참고 출처
조명에 관해서