R3F

R3F는 React에서 three.js를 쉽게 활용할 수 있도록 도와주는 라이브러리다. three.js는 자바스크립트에서 3D작업을 쉽게 할 수 있도록 도와주는 라이브러리로, GPU를 활용한 병렬 계산을 수행하는 WebGL을 렌더러로 사용하기 때문에 매우 빠르다.

주요 구성요소

Scene

Scene은 모든걸 담을 수 있는 3차원의 공간이라고 생각하면 된다.

• Scene에 추가되는 모든 것은 포지션을 정해주지 않았을 경우 기본적으로 정가운데 위치한다.

• 좌표축의 기준 (화살표의 방향이 +방향이다)

  

Camera

3차원의 공간 속에서 대상을 찍는 카메라다. canvas에 보여지는 모습을 찍는다. Scene 안에서의 눈이라고 볼 수 있다.

• 시야각 (field of view, fov): 시야각이 수직 기준임을 주의해야하고, 고정된 크기의 2D canvas에 보이는 것이 담기다보니 시야각에 따른 왜곡이 있다.
• 종횡비 (aspect ratio): width / height, 카메라로 촬영하는 화면의 비율
• 최소거리 (near): 카메라가 볼 수 있는 최소거리
• 최대거리 (far): 카메라가 볼 수 있는 최대거리

Mesh

Geometry(모양)와 Material(시각적 특성) 로 이루어진 요소로 Scene에서 모델링되는 객체 또는 객체를 이루는 기반이 된다.

• Geometry - 점(vertex), 선(edge), 면(polygon)으로 구성된 기하학적인 요소
• Material - 빛의 반사, 색상, 질감, 광택, 투명도 등과 같은 시각적인 요소

Renderer

카메라로 찍은 스냅샷을 requestAnimationFrame으로 브라우저의 성능에 맞춰서 canvas에 그려준다.