React Three Fiber vs Three.js: 어느 것을 먼저 배워야 할까요?

Source: Dev.to

Three.js vs React Three Fiber

Three.js는 WebGL 위에 얹힌 JavaScript 라이브러리로, 원시 GPU 코드를 작성하지 않고도 3D 씬을 만들 수 있게 해줍니다. 프레임워크에 구애받지 않으며 순수 JS, Vue, Svelte 등과 함께 사용할 수 있습니다.

React Three Fiber (R3F)는 Three.js를 위한 React 렌더러입니다. Three.js를 대체하는 것이 아니라 감싸는 역할을 합니다. 내부적으로는 여전히 Three.js이며, 차이점은 코드를 작성하는 방식에 있습니다.

Code example: Three.js (imperative)

// Three.js
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: '#c8ff00' });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  renderer.render(scene, camera);
}
animate();

Code example: React Three Fiber (declarative)

// React Three Fiber
import { useFrame } from '@react-three/fiber';
import { useRef } from 'react';

function Cube() {
  const ref = useRef(null!);
  useFrame(() => {
    ref.current.rotation.x += 0.01;
  });

  return (
    
      
      
    
  );
}

두 코드 스니펫 모두 동일한 회전 큐브를 만들지만, 사고 모델은 다릅니다: 명령형 vs 선언형 (JSX).

How to decide

• 3D를 처음 접한다면. 씬, 카메라, 렌더러를 이해하기 위해 순수 Three.js부터 시작하세요.
• React를 사용하지 않는다며. Three.js가 자연스러운 선택입니다.
• 최대한의 제어가 필요하다면. Three.js는 WebGL 파이프라인에 직접 접근할 수 있게 해줍니다.
• 이미 React에 익숙하다면. R3F를 사용하면 React 생태계 안에서 작업할 수 있습니다.
• React 앱을 만들고 빠르게 진행하고 싶다면. R3F(특히 @react-three/drei와 함께)에서는 카메라, 컨트롤, 환경, 효과 등을 위한 준비된 컴포넌트를 제공하므로, 순수 Three.js에서 수십 줄이 필요했던 작업을 R3F에서는 몇 줄로 구현할 수 있습니다.

R3F를 사용하는 대부분의 개발자는 먼저 Three.js를 어느 정도 학습한 뒤 R3F를 사용합니다. 핵심 개념을 이해하면 R3F가 “마법”처럼 느껴지지 않고, 더 쉽게 제어할 수 있습니다.

Comparison

Recommended learning path

1. Raw Three.js로 주말을 보내기 – 간단한 씬을 만들고, 조명을 추가하고, 카메라를 움직여 보세요.
2. 그 다음부터는 R3F로 전환 – React의 컴포넌트 모델과 @react-three/drei 헬퍼를 활용합니다.

Resources

• R3F Cheat Sheet – 일반적인 패턴(훅, 카메라 설정, 조명, 성능 팁, 인기 drei 컴포넌트) 모음.
  👉 R3F Cheat Sheet on Gumroad — $7

Discussion

Three.js와 R3F 중 어느 쪽으로 먼저 시작했나요? 댓글로 경험을 공유해 주세요.

Tags: #threejs #react #javascript #webdev