Wawa Sensei logo

리액트 쓰리 파이버란?

코딩을 시작하기 전에 리액트 쓰리 파이버(React Three Fiber) 를 사용하는 이유와 그것이 무엇인지 살펴보겠습니다.

WebGL

WebGL 은 플러그인 없이 호환 가능한 웹 브라우저 내에서 인터랙티브한 2D 및 3D 그래픽을 렌더링하는 JavaScript API입니다.

이는 임베디드 장치용 저수준 3D 그래픽 API인 OpenGL ES를 기반으로 합니다. WebGL은 2D 및 3D 그래픽의 하드웨어 가속 렌더링을 가능하게 하며, 이를 통해 복잡한 시각화 및 매끄럽게 실행되는 브라우저 내 게임을 만들 수 있습니다.

하지만 WebGL 코드를 직접 작성하는 것은 매우 어렵고 시간이 많이 소요됩니다. 그래서 Three.js가 사용됩니다...

Three.js

Three.js 는 WebGL을 사용하여 브라우저에서 3D 그래픽을 생성하고 애니메이션을 만드는 간단한 API를 제공하는 JavaScript 라이브러리입니다.

이는 WebGL의 많은 저수준 세부 사항을 추상화하여 복잡한 3D 장면과 애니메이션을 쉽게 생성할 수 있게 합니다.

React Three Fiber

리액트 쓰리 파이버(React Three Fiber) 는 Three.js를 위한 리액트 렌더러로, Three.js를 마치 UI를 구축할 때처럼 선언적으로 사용할 수 있게 합니다.

이는 R3F라고도 불립니다.

R3F는 Three.js 객체(예: mesh, light, and camera 등)에 해당하는 리액트 컴포넌트 세트를 제공하여 리액트의 컴포넌트 모델을 사용해 복잡한 3D 장면 및 애니메이션을 구축할 수 있게 합니다.

같은 결과를 위해, React Three Fiber 코드는 Three.js 코드보다 훨씬 짧고 읽기 쉽습니다.

다음은 두 라이브러리를 사용하여 큐브를 표시하는 간단한 예입니다:

// Three.js
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// React Three Fiber
<mesh>
  <boxGeometry />
  <meshBasicMaterial color={0x00ff00} />
</mesh>

Poimandres

Poimandres는 pmndrs로 알려져 있으며, React Three Fiber와 다른 유용한 라이브러리를 개발한 활발한 개발자 집단입니다. 포함된 라이브러리로는 다음과 같은 것들이 있습니다:

  • drei: r3f를 위한 유용한 helper와 완전하게 동작하는 컴포넌트 모음
  • gltfjsx: gltf 파일(3D 모델 파일 형식)로부터 사용할 준비가 완료된 컴포넌트를 생성하는 명령어 기반 도구
  • react-spring: spring-physics 기반의 애니메이션 라이브러리
  • zustand: 작고 빠르며 확장 가능한 기본적인 상태관리 솔루션
  • react-xr: R3F를 사용하여 VR과 AR 경험을 쉽게 만들 수 있는 React 컴포넌트 세트 ... 등등!

이 강좌에서는 이들 라이브러리 중 일부를 사용할 예정입니다.

자주 확인하시기를 추천드리며, 새로운 기능과 개선사항으로 자주 업데이트되기 때문에 그렇습니다.

대안

다른 프론트엔드 프레임워크에 비슷한 기능성을 제공하는 다른 라이브러리들도 있습니다. Svelte를 위한 Threlte, Vue를 위한 TresJS, 그리고 Angular를 위한 Angular Three가 있습니다.

최근에는 pmndrs가 또한 drei-vanilla를 출시하였으며, 이는 React 없이 그 컴포넌트를 사용하고자 하는 이들을 위한 drei의 바닐라 버전입니다.

< Introduction
Setup >