[three.js] 오브젝트(mesh)와 빛(light)

mesh는 2가지로 나눠져 있습니다.

바로 형태와 재질입니다. 왜 이 두가지를 구분했을까요? 똑같은 형태지만 여러 가지의 재질 및 색깔을 사용할 수 있고, 다른 형태들이지만 동일한 재질 및 색깔을 사용하기 편하려면 둘을 구분해서 사용하는 것이 타당하겠죠?

위의 것을 three.js의 용어로 나타내면 mesh는 geometry와 material로 나눠져 있다고 할 수 있습니다.

문서에 보면 아주 많은 형태들이 나타나 있습니다. 우리가 할 건 하고 싶은 형태를 선택한 후 값을 전달하면 되는 것 뿐입니다. 가장 무난한 BoxGeometry를 선택했습니다. 너비, 높이, 깊이를 전달하면 간단하게 만들어줍니다.

재질은 (예시에서) 많이 사용되는 것을 꼽아보자면 MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial이라고 할 수 있습니다. 재질에 따라서는 라이트가 필요 없을 수도 있습니다. 왜냐하면 명암도 없고, 아무것도 반사하지 않고, 그저 정해진 단색만을 나타내는 재질도 있기 때문입니다. MeshBasicMaterial이 그렇습니다. 그래서 이 기본 재질을 사용할 때는 빛을 추가할 필요가 없습니다. LambertMaterial은 빛에 의한 명암만 있습니다. 명암만 있기 때문에 반사되거나 반짝이지는 않습니다. 금속 같은 경우는 빛을 받는 부분도 반짝이고, 반사되는 부분도 있어야 겠죠? 그럴 경우 사용하는 것이 MeshPhongMaterial 입니다. 예제에서는 MeshLambertMaterial를 다루게 됩니다.

코드를 보시면 형태와 재질을 정의한 다음에 Mesh 생성자 함수에 전달했습니다. 그리고 scene에 우리가 만든 mesh를 더해주면 됩니다. 현재 예제에서는 상자 하나지만 여러 개의 mesh를 정의한 경우(가령 장미, 줄기, 잎, 흙) 모두 scene에 더해주시면 됩니다.

빛을 정의해봅시다.

빛도 여러 종류가 있습니다. 그리고 하나일 필요도 없습니다. 예제에서는 하나만 사용하지만 각각 쓰임새가 있기 때문에 문서를 보면서 사용하시는게 좋습니다. (예제에서)많이 사용하는 것들은 AmbientLight와 PointLight, SpotLight 라고 할 수 있습니다. AmbientLight는 태양광 처럼 scene의 전역에 빛을 비춰줍니다. 그래서 따로 방향도 지정할 필요가 없습니다. PointLight는 전구를 생각해주시면 됩니다. 빛도 위치를 설정해주는데 그 위치에 전구가 달리게 되는 것이죠. 지정된 위치에서 모든 방향에 균등하게 빛을 비춥니다. 우리가 예제에서 사용할 빛입니다. 스포트라이트는 한 지점에서 한 방향으로 빛을 쏘는 것입니다. 각각의 차이가 느껴지시나요?

코드를 보시면 라이트의 포지션을 지정해 준 것이 보이시나요? 위의 설명대로 전구를 놓은 위치를 지정해 준 것입니다.

x y z 축의 도식

z축의 경우 화살표 방향으로 들어가는 것은 -(마이너스) 이고 밖으로 나오는 것이 +(플러스) 입니다. 즉 z 위치 50은 오브젝트(mesh)와 우리가 보는 시선(카메라) 사이에 위치하는 것이죠.

position.set으로 세가지 값을 다 전달할 수 있지만 position.x, position.y, position.z로 각각의 값을 전달할 수도 있습니다.

이제는 모든 것을 정의했으니 렌더링만 하면 되는군요! 다음 포스팅에서 three.js 첫 번째 튜토리얼을 마무리 하도록 하겠습니다.