r3f-fundamentals
✓React Three Fiber 코어 설정, 캔버스 구성, 장면 계층 구조, 카메라 시스템, 조명, 렌더링 루프 및 React 통합 패턴. 새로운 R3F 프로젝트를 설정하거나, Canvas 구성 요소를 구성하거나, 장면 구조를 관리하거나, 선언적 Three.js-in-React 패러다임을 이해할 때 사용하세요. 다른 모든 R3F 기술이 의존하는 기초 기술입니다.
SKILL.md
Declarative Three.js via React components. R3F maps Three.js objects to JSX elements with automatic disposal, reactive updates, and React lifecycle integration.
| new THREE.Mesh() | | | mesh.position.set(1, 2, 3) | | | scene.add(mesh) | JSX nesting handles hierarchy | | mesh.geometry.dispose() | Automatic on unmount |
| always | Continuous animation (games, simulations) | | demand | Static scenes, only re-render on state change | | never | Manual control via invalidate() |
React Three Fiber 코어 설정, 캔버스 구성, 장면 계층 구조, 카메라 시스템, 조명, 렌더링 루프 및 React 통합 패턴. 새로운 R3F 프로젝트를 설정하거나, Canvas 구성 요소를 구성하거나, 장면 구조를 관리하거나, 선언적 Three.js-in-React 패러다임을 이해할 때 사용하세요. 다른 모든 R3F 기술이 의존하는 기초 기술입니다. 출처: bbeierle12/skill-mcp-claude.
인용 가능한 정보
AI/검색 인용용 안정적인 필드와 명령어.
- 설치 명령어
npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill r3f-fundamentals- 카테고리
- </>개발 도구
- 인증됨
- ✓
- 최초 등록
- 2026-02-01
- 업데이트
- 2026-02-18
빠른 답변
r3f-fundamentals이란?
React Three Fiber 코어 설정, 캔버스 구성, 장면 계층 구조, 카메라 시스템, 조명, 렌더링 루프 및 React 통합 패턴. 새로운 R3F 프로젝트를 설정하거나, Canvas 구성 요소를 구성하거나, 장면 구조를 관리하거나, 선언적 Three.js-in-React 패러다임을 이해할 때 사용하세요. 다른 모든 R3F 기술이 의존하는 기초 기술입니다. 출처: bbeierle12/skill-mcp-claude.
r3f-fundamentals 설치 방법은?
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill r3f-fundamentals 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다
소스 저장소는 어디인가요?
https://github.com/bbeierle12/skill-mcp-claude
상세
- 카테고리
- </>개발 도구
- 출처
- skills.sh
- 최초 등록
- 2026-02-01