[R3F] 쉽게 이해하는 Three.js (TIL)
범람하는 프론트엔드 기술들 덕에 사용자 경험이 우수하고, 흥미로운 사이트들이 늘어나고 있다. 단순히 컴포넌트를 배치하는 UI에서 사용자가 흥미를 느끼고, 좀 더 오래 사이트에 머물 수 있도록 하는 인터렉티브한 요소들들이 가미되고 있어 향후 프론트엔드 기술을 익히는데 3D 작업과 친해질 필요가 있다고 느꼈다.
- Three.js
일전에 직장에서 화면 작업을 하면서 구현이 어려운 부분을 Canvas로 그려 본 적이 있어 Three.js에 대해 어렴풋이 알게 되었다. 처음에는 그림판처럼 평면 위에 그림을 그리는 것에 가깝다고 생각했는데, 사실 카메라로 찍은 무언가를 보는 것에 가깝다.
Three.js가 구현하는 3D환경에서는 장면이되는 Scene과 그걸 담아내는 Camera, 마지막으로 카메라가 담은 장면(Scene)을 넘겨받아 화면 안에 이미지로 만들어주는 Renderer가 필요하다.
위의 그림을 도표화하면 아래와 같다.
Mesh
mesh는 Three.js Scene에서 사용할 수 있는 3D 객체다. mesh는 Geometry와 Material라는 두가지 개념으로 나뉜다.
- Geometry : 3D 오브젝트의 모양
- Material : 오브젝트의 시각적 측면을 설정 (광채, 불투명도, 질감 등등)
Light
빛이 없다면 우리는 무엇도 볼 수 없을 것이다. Three.js의 세계에도 물체를 밝혀줄 빛이 필요하다.
Camera
시선이 없다면 장면도 없다. 현실 세계에서 우리가 다양한 장면을 찍기 위해 카메라의 위치를 바꾸는 것처럼 Three.js에서도 카메라의 위치를 설정해 다양한 방식으로 Scene을 잡아낸다.
이제 다시 앞서 보았던 이미지를 다시 본다면 Three.js의 컨셉을 좀 더 잘 이해할 수 있을 것이다.
우리가 영상을 찍는다고 한다면 삼각대를 설치해 카메라를 고정한다면, 해당 위치에서 렌즈를 이리저리 움직여볼 수 있다. Fov는 Field of view의 약자로 카메라의 시야갹을 의미한다. 시야각은 위 시점에서 화면이 보여지는 정도를 나타낸다. Three.js 세계에서 한가지 기억해야할 것이 있다면, 담아내고자 하는 오브젝트는 언제나 near 값보다 멀고, far보다는 가까워야 한다. 너무 가깝거나 먼 요소는 렌더링 되지 않는다.