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

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

drei은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. drei의 마지막 커밋은 2026년 10월 19일입니다.

drei은(는) 어디에 사용할 수 있나요?

오빗 컨트롤과 로드된 glTF 모델을 활용한 인터랙티브 제품 뷰어 제작 React 사이트에 3D 텍스트, HTML 오버레이, 스크롤 기반 애니메이션 추가 부드러운 그림자, 환경 조명, 반사 머티리얼을 적용한 씬 제작 React Three Fiber 앱에서 반복되는 메시를 대량으로 효율적으로 렌더링

drei는 어떻게 설치하나요?

npm에서 패키지를 설치하세요: npm install @react-three/drei

drei은(는) 어디서 받을 수 있나요?

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

pmndrs/drei

react-three-fiber로 3D 씬을 만들 때 사용하는 바로 쓸 수 있는 React 헬퍼 컴포넌트와 훅 모음입니다.

GitHub에서 보기 웹사이트

스타: 9,994
포크: 853
열린 이슈: 136
마지막 커밋: 12시간 전

어떤 프로젝트인가요?

drei는 Three.js의 React 렌더러인 react-three-fiber를 위한 헬퍼 라이브러리입니다. 카메라 컨트롤, 로더, 그림자, 텍스트, 셰이더 머티리얼 등 자주 쓰이는 3D 기능을 미리 구현한 컴포넌트와 훅으로 제공해 개발자가 처음부터 다시 만들 필요가 없습니다.

라이브러리는 기능 영역별로 구성되어 있습니다. CameraControls, ScrollControls, KeyboardControls 같은 카메라 및 컨트롤 기능, TransformControls와 GizmoHelper 같은 기즈모, Text, Image, Edges, Trail 추상화, Environment, Sky, Stars, ContactShadows 같은 스테이징 헬퍼, Instances, Merged, AdaptiveDpr를 비롯한 성능 유틸리티를 제공합니다. useGLTF와 useTexture 같은 로더 훅도 포함되어 있습니다.

패키지는 @react-three/drei로 배포됩니다. Html과 Loader를 내보내는 기본 웹 진입점을 제공하며, 이 두 컴포넌트를 제외한 React Native용 별도 진입점도 있습니다. 문서는 라이브 Storybook 예제가 포함된 별도 사이트에서 제공합니다.

핵심 기능

01미리 구현된 카메라 컨트롤, 기즈모, 키보드 및 스크롤 입력 컴포넌트
023D 텍스트, 이미지, 에지, 트레일, 아웃라인을 위한 추상화
03useGLTF, useTexture, useFBX 등의 로더 훅
04환경 맵, 하늘, 그림자, 조명을 위한 스테이징 헬퍼
05인스턴싱, 지오메트리 병합, 적응형 해상도를 포함한 성능 유틸리티
06웹과 React Native용 별도 진입점

활용 사례

오빗 컨트롤과 로드된 glTF 모델을 활용한 인터랙티브 제품 뷰어 제작
React 사이트에 3D 텍스트, HTML 오버레이, 스크롤 기반 애니메이션 추가
부드러운 그림자, 환경 조명, 반사 머티리얼을 적용한 씬 제작
React Three Fiber 앱에서 반복되는 메시를 대량으로 효율적으로 렌더링

빠른 시작

1
npm에서 패키지를 설치하세요
npm install @react-three/drei

사용 전 알아둘 점

React Native용 경로(@react-three/drei/native)는 Html 또는 Loader를 내보내지 않습니다.
react-three-fiber용으로 만들어졌으므로 @react-three/fiber도 설정해야 합니다.

토픽

#react #threejs #3d #webgl #react-three-fiber #graphics #helpers #hooks

자주 묻는 질문

drei은(는) 무엇인가요?: react-three-fiber로 3D 씬을 만들 때 사용하는 바로 쓸 수 있는 React 헬퍼 컴포넌트와 훅 모음입니다. drei는 Three.js의 React 렌더러인 react-three-fiber를 위한 헬퍼 라이브러리입니다. 카메라 컨트롤, 로더, 그림자, 텍스트, 셰이더 머티리얼 등 자주 쓰이는 3D 기능을 미리 구현한 컴포넌트와 훅으로 제공해 개발자가 처음부터 다시 만들 필요가 없습니다.
drei은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?: drei은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
drei은(는) 아직 유지보수되고 있나요?: 활발히 유지보수 중. drei의 마지막 커밋은 2026년 10월 19일입니다.
drei은(는) 어디에 사용할 수 있나요?: 오빗 컨트롤과 로드된 glTF 모델을 활용한 인터랙티브 제품 뷰어 제작 React 사이트에 3D 텍스트, HTML 오버레이, 스크롤 기반 애니메이션 추가 부드러운 그림자, 환경 조명, 반사 머티리얼을 적용한 씬 제작 React Three Fiber 앱에서 반복되는 메시를 대량으로 효율적으로 렌더링
drei는 어떻게 설치하나요?: npm에서 패키지를 설치하세요: npm install @react-three/drei
drei은(는) 어디서 받을 수 있나요?: 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/pmndrs/drei

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.