r3f-fundamentals
Master the essentials of React Three Fiber by configuring your first Canvas component and establishing a foundational 3D environment. This skill walks you through the core setup patterns and scene architecture needed to begin rendering interactive 3D graphics in React.
r3f-fundamentals teaches you to start by installing React Three Fiber and Three.js, then wrapping your 3D content in a `<Canvas>` component. Inside Canvas, you declare your scene using JSX—add a `<mesh>` with a `<boxGeometry>` and `<meshStandardMaterial>` to create your first 3D object. The Canvas component handles WebGL context setup and the render loop automatically, so you focus on declaring what you want to render rather than imperative Three.js calls.
AI-generated summary based on this skill's SKILL.md
Install
Bbeierle12/Skill-MCP-Claude/r3f-fundamentals · repository language: JavaScript
git clone https://github.com/Bbeierle12/Skill-MCP-Claude
cp -r Skill-MCP-Claude/skills/r3f-fundamentals ~/.claude/skills/r3f-fundamentalsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do you set up a React Three Fiber project with Canvas and basic scene?
r3f-fundamentals teaches you to start by installing React Three Fiber and Three.js, then wrapping your 3D content in a `<Canvas>` component. Inside Canvas, you declare your scene using JSX—add a `<mesh>` with a `<boxGeometry>` and `<meshStandardMaterial>` to create your first 3D object. The Canvas component handles WebGL context setup and the render loop automatically, so you focus on declaring what you want to render rather than imperative Three.js calls.
How to configure canvas in React Three Fiber for optimal rendering?
r3f-fundamentals covers Canvas configuration through props like `camera` (to set position and field of view), `dpr` (device pixel ratio for performance), and `frameloop` (set to 'demand' to render only on changes or 'always' for continuous animation). You can also pass `gl` options to control WebGL settings. These configurations let you balance visual quality with performance on different devices and use cases.
What is the declarative scene graph pattern in React Three Fiber?
r3f-fundamentals explains that React Three Fiber maps Three.js objects to JSX components—`<mesh>`, `<geometry>`, `<material>`, `<light>`, and `<group>` become React elements. This declarative approach means you describe your 3D scene as a component tree, making it easier to manage state, compose reusable parts, and think in React patterns rather than imperative Three.js API calls.
How do you implement animation loops with useFrame in r3f?
r3f-fundamentals teaches the `useFrame` hook, which runs a callback every frame with access to the renderer, scene, and camera. Inside `useFrame`, you update mesh rotations, positions, or other properties—for example, `meshRef.current.rotation.x += 0.01`. This hook integrates with r3f's render loop, so your animations stay synchronized and performant without manual requestAnimationFrame management.
How does React Three Fiber handle lighting and scene hierarchy?
r3f-fundamentals shows that lighting in React Three Fiber uses `<ambientLight>`, `<directionalLight>`, and `<pointLight>` components, each configurable via props like `intensity` and `position`. Scene hierarchy is built with `<group>` components—nest meshes inside groups to apply transformations to multiple objects at once. Shadows are enabled on Canvas with `shadows` prop and configured per light and mesh using `castShadow` and `receiveShadow` props.
How do you add pointer event handling to interactive 3D objects in r3f?
r3f-fundamentals demonstrates attaching event handlers like `onPointerOver`, `onPointerOut`, and `onClick` directly to mesh components. These events fire when the pointer intersects your geometry. Combine them with `useState` to track hover or click states, then update material colors or trigger animations. The `useThree` hook gives you access to the raycaster and camera for advanced interaction patterns.
SKILL.md
rendered from the published skill — quoted content, verbatim
React Three Fiber Fundamentals
Declarative Three.js via React components. R3F maps Three.js objects to JSX elements with automatic disposal, reactive updates, and React lifecycle integration.
Quick Start
import { Canvas } from '@react-three/fiber';
function App() {
return (
<Canvas>
<ambientLight intensity={0.5} />
<pointLight position={[10, 10, 10]} />
<mesh>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color="hotpink" />
</mesh>
</Canvas>
);
}
Core Principle: Declarative Scene Graph
R3F converts Three.js imperative API to React's declarative model:
| Three.js (Imperative) | R3F (Declarative) |
|---|---|
new THREE.Mesh() |
<mesh> |
| `mesh.position.set(1, |
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 4 files
skills/r3f-fundamentals/SKILL.md
skills/r3f-fundamentals/_meta.json
skills/r3f-fundamentals/references/hooks-api.md
skills/r3f-fundamentals/scripts/templates/basic-scene.tsx