pmndrs/react-three-fiber

어떤 프로젝트인가요?

핵심 기능

• 01Three.js 장면을 Three.js 객체에 직접 매핑되는 JSX 요소로 작성합니다.
• 023D 객체에서 React 상태와 onClick, onPointerOver 같은 이벤트 핸들러를 사용할 수 있습니다.
• 03useFrame 훅으로 렌더 루프에서 프레임마다 실행되는 로직을 처리합니다.
• 04라이브러리 업데이트를 기다리지 않고 모든 Three.js 기능을 사용할 수 있습니다.
• 05별도의 진입점을 통해 React Native를 지원합니다.

활용 사례

• React 앱에서 인터랙티브한 3D 제품 구성 도구나 데이터 시각화를 만듭니다.
• 상태와 애니메이션을 자체적으로 관리하는 재사용 가능한 3D UI 컴포넌트를 만듭니다.
• React Native 모바일 앱에 3D 장면을 추가합니다.
• 테스트 렌더러를 사용해 Node에서 3D 장면 컴포넌트의 단위 테스트를 작성합니다.

빠른 시작

1. 1

   npm으로 패키지를 설치합니다

   npm install three @types/three @react-three/fiber
2. 2

   Canvas를 만들고 JSX 컴포넌트로 씬을 렌더링합니다(README 예시 참조)

사용 전 알아둘 점

• !react-three-fiber 버전은 React 메이저 버전과 일치해야 합니다. v8은 react@18, v9는 react@19와 호환됩니다.

토픽

자주 묻는 질문

react-three-fiber은(는) 무엇인가요?

JSX 컴포넌트로 3D 장면을 선언적으로 만들 수 있는 Three.js용 React 렌더러입니다. react-three-fiber(@react-three/fiber)는 Three.js용 React 렌더러입니다. 메시, 머티리얼, 조명을 명령형으로 생성하는 대신 <mesh />나 <ambientLight /> 같은 JSX 요소로 작성하면 각 요소가 이에 대응하는 Three.js 객체로 매핑됩니다. 컴포넌트는 각자의 React 상태를 가질 수 있고 포인터 이벤트에 반응할 수 있으며, useFrame 같은 훅을 통해 렌더 루프를 구독할 수 있습니다.

react-three-fiber은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

react-three-fiber은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

react-three-fiber은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. react-three-fiber의 마지막 커밋은 2026년 10월 21일입니다.

react-three-fiber은(는) 어디에 사용할 수 있나요?

React 앱에서 인터랙티브한 3D 제품 구성 도구나 데이터 시각화를 만듭니다. 상태와 애니메이션을 자체적으로 관리하는 재사용 가능한 3D UI 컴포넌트를 만듭니다. React Native 모바일 앱에 3D 장면을 추가합니다. 테스트 렌더러를 사용해 Node에서 3D 장면 컴포넌트의 단위 테스트를 작성합니다.

react-three-fiber는 어떻게 설치하나요?

npm으로 패키지를 설치합니다: npm install three @types/three @react-three/fiber Canvas를 만들고 JSX 컴포넌트로 씬을 렌더링합니다(README 예시 참조)

react-three-fiber은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/pmndrs/react-three-fiber