[3D 라이브러리 비교] Three.js VS React Three Fiber

바닐라 자바스크립트를 이용한 Three.js냐

컴포넌트 개발을 이용한 React Three Fiber(이하 r3f)냐

 

당연히 React를 쓴다면 r3f를 , 순수 javascript로 개발을 한다면 Three.js 를 사용하는 것이 더 효율적일 것이다.

 

1. React 환경에서 코드량을 줄이고 싶다면 당연히 r3f!

위의 url에서 비교로 알 수 있듯이 r3f는 Three.js를 컴포넌트화시켜 react 에서 컴포넌트 개발로 연결시키면서 3d를 렌더링 할 수 있다는 장점이 있다.

물론 react 환경에서도 순수 js 파일을 만들고 Three.js로 개발할 수 있다. 하지만 코드 비교로 알 수 있듯, 코드 양에서도 차이가 많다.

특히, 이벤트처리가 추가된다면 코드양에서 어마어마한 차이를 보인다.

 

2. r3f Example 안에서 해결된다면 r3f!

Three.js와 r3f 모두 많은 예를 제공한다.

아마 구현하려는 거의 모든 기능이 제공될 것이라 생각한다. 없더라도 예제별로 조합하여 사용할 수 있다.

예제의 다양성과 종류는 Three.js가 많지만, r3f 예제 안에서 해결되는 구현 정도라면 r3f를 사용하는 게 시간적인 측면에서 유리하다.

 

3. 더 많은 커스텀이 필요하다면 Three.js!

Three.js는 r3f 보다 예제가 다양하다.

3d 파일 로드 기능이 다양하며, 각 material에 대한 간단한 예로 바로 이해할 수 있도록 제공한다.

또한, r3f보다 커뮤니티가 활성화 되어있어 활용할 수 있는 예제 및 문제 해결 결과가 많다.

 

4. 각 기능별 자세한 설명이 필요하다면 Three.js!

r3f는 제공하는 메서드 및 프로퍼티 설명이 충분하지 않다. Three.js의 교육으로 전가하는 느낌이다.

심지어 프로퍼티가 Three.js와 동일하지 않은 메서드도 있다.

Three.js에서 제공하는 순수 기능들도 r3f 에서는 drei를 통해 사용할 수 있고, 별도 설치 및 학습이 필요하다.

---

 

아래는 React 환경에서 동일한 화면을 r3f와 Three.js로 구현한 것을 비교한 것이다.

이렇게 간단한 예제에서도 약 2배의 코드량의 차이를 보인다.

각 상황에 맞게 3D 라이브러리를 사용하게 된다면 현명한 사용자 경험 및 개발 용이성을 가져갈 수 있을 것이라 생각한다.

https://lims-web.vercel.app/3d/compare