Three.js

참고 자료: Three.js 공식 문서

: 웹 페이지에서 3D 객체를 쉽게 렌더링하도록 도와주는 자바스크리브 3D 라이브러리

3D 객체를 렌더링하기 위해 webGL을 사용하지만 같은 것은 아니다.

webGL과 Three.js의 차이점 webGL은 점, 선, 삼각형만을 그리는 시스템으로, 무언가를 직접 만들기 위해서는 많은 양의 코드를 필요로 한다. Three.js는 이런 3D 요소들의 처리를 도와 직관적인 코드를 짤 수 있도록 돕는다.

Three.js의 구조

• Renderer: Scene과 Camera 객체를 넘겨 받아 카메라의 절두체 안에 3D 씬의 일부를 2차원 이미지로 렌더링 한다.
  • 절두체란? 입체를 절단하는 하나나 두 평행면 사이의 부분이다. 컴퓨터 그래픽스에서는 스크린에서 볼 수 있는 삼차원 영역을 말한다.
  • renderer에는 다양한 메서드가 존재하며, 이것으로 cnavas에 이미지 생성할 때 처리나 효과를 줄 수 있다.
• Scene grape: Scene 또는 다수의 Mesh, Light, Group, Object3D, Camera로 이루어졌으며, 트리 구조와 유사하다.
  • Scene은 씬 그래프의 최상위 노드로 배경색, fog 등의 요소를 포함한다.
  • 포함된 객체들 또한 부모/자식의 트리구조로 이뤄지며, 자식 객체의 위치(Position)와 방향(orientation)은 부모를 기준으로 한다.
• Camera: 카메라는 절두체에 담기는 씬을 2차원 이미지로 보여 주는 역할이다. 다른 객체와 달리 굳이 씬 그래프에 포함될 필요가 없다.
• Mesh: 어떤 Material로 하나의 Geometry를 그리는 객체이다.
  • Material, Geometry는 재사용이 가능하며 여러개의 Mesh가 하나의 Material 또는 Geometry를 동시에 참조할 수 있다.
• Geometry: 기하학 객체의 정점 데이터이다. 구, 정육면체, 면, 개, 고양이 등 다양한 것을 만들 수 있다.
  • three.js에서는 몇 가지 내장 기하학 객체를 제공한다.
  • primitives 참고
• Material: 기하학 객체를 그리는 데 사용하는 표면 속성이다. 색이나 밝기 등을 지정할 수 있다.
  • 하나의 Material는 여러개의 Texture를 사용할 수 있다. 기하학 객체의 표면을 이미지로 덮을 때 주로 사용한다.
• Three.js 초기 셋팅하기

R3F(React Three Fiber)

: webGL 기반의 자바스크립트 라이브러리 three.js를 react에서 손쉽게 사용할 수 있도록 도와주는 라이브러리

상태에 반응하고 쉽게 상호작용하며 React의 생태계에 참여할 수 있는 재사용 가능한 자체 구성 요소로 선언적 프로그래밍 방식이다.

React Three Fiber 특징