소개
react-three-fiber는 three.js를 react 기반으로 작성할 수 있도록 도와 줍니다.
three.js는 web 생태계에서 가장 대표적인 3D 렌더링 라이브러리 입니다. WebGL을 사용하려면 vertex, fragment shader의 개념을 충분히 이해하고 WebGL API를 호출해여 원하는 결과물을 만들어야 합니다. three.js는 하위 수준의 WebGL을 조금더 추상화 해서 Geometry, Material, Camera와 같이 일반적으로 3D 업계에서 사용하는 추상화 레벨을 제공하여 보다 쉽게 3D 결과물을 얻을 수 있도록 도와 줍니다.
three.js는 OOP와 절차적 프로그래밍 멘탈 모델을 가지고 작업을 해야 합니다.
react-three-fiber의 경우 OOP와 절차적인 방식 대신 보다 선언적인고 react의 flux 패턴을 사용할 수 있도록 해 줍니다.
특별히 react fiber 아키텍쳐가 적용된 v16 부터는 상대적으로 많은 연산이 필요한 3D 렌더링 작업에 필요한 병목 요소를 적절히 해소하였기 때문에 react-three-fiber의 탄생이 가능했으리라 생각합니다.
이런 react-three-fiber를 알아 봄으로서 3D 관련 문제를 해결할 때 활용할 수 있다면 좋을 것 같습니다.
Basic demo
<Canvas /> 컴포넌트를 사용하여 3D 렌더링 공간을 만들어 줍니다.
기본적으로 THREE.PerspectiveCamera를 적용하여 원근감 있는 시점을 제공합니다.
<mesh /> 컴포넌트는 THREE.Mesh 객체를 생성하며, geometry 컴포넌트와 material 컴포넌트를 children 컴포넌트로 설정하는 것 만으로 3D 물체를 표현할 수 있습니다.
색상 표현을 위해서는 기본적으로 <ambientLight />(THREE.AmbientLight) 컴포넌트를 <Canvas />의 children 컴포넌트로 작성해 줍니다.
지금까지 확인한 것과 같이 three.js의 객체를 react 컴포넌트로 구조화 할 수 있습니다. 이는 react-reconciler 패키지를 활용하여 JSX factory를 확장함으로 가능합니다.
ThreeElements 정의에 따라 사용가능한 jsx tag와 그 prop들을 살펴 볼 수 있습니다.
react-three-fiber의 경우, three.js 객체를 react 컴포넌트화 한 것입니다.
하지만, 실제로 3D 프로젝트를 수행하다보면 많은 boilerplate를 필요로 하는데 이러한 유틸리티들을 모아 놓은 것이 pmndrs/drei 패키지 입니다.
위 예제와 같이 <OrbitControls />을 단순히 <Canvas />의 child로 붙여주는 것 만으로 마우스 드레그에 의한 시점 전환이 가능합니다.
마치며
간단한 데모와 함께 react-three-fiber에 대한 소개를 했습니다.
앞으로도 하나씩 react-three-fiber의 예제를 살펴보고 구현 테크닉 및 팁들을 알아가 보도록 하겠습니다.