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
Decision gist · record as of 2026-07-27
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.
Use it when
- r3f-fundamentals covers Canvas configuration through props like `camera` (to set position and field of view).
- r3f-fundamentals explains that React Three Fiber maps Three.js objects to JSX components—`<mesh>`, `<geometry>`, `<material>`, `<light>`.
Verify before relying
Read SKILL.md below before installing (4 files). Open directory: indexed for reading, not audited.
Install
Bbeierle12/Skill-MCP-Claude/r3f-fundamentals · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Set up a new React Three Fiber project with Canvas and basic scene”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
R3f Lighting teaches you how to implement and fine-tune lighting systems within React Three Fiber environments. Discover techniques for creating realistic illumination effects, managing light sources, and optimizing performance in interactive 3D web scenes.
R3f Interaction equips developers with a streamlined approach to adding user input handling to React Three Fiber projects. Handle clicks, drags, and touch gestures across your 3D canvas with minimal setup, enabling rich interactive experiences that respond naturally to user actions.
This skill equips developers with proven architectural patterns for integrating multiple 3D rendering and animation frameworks into cohesive web applications. Learn how to combine Three.js, Babylon.js, React Three Fiber, and GSAP effectively while managing complexity and performance across modern web stacks.
r3f-animation simplifies working with motion and keyframe sequences in React Three Fiber scenes. It provides utilities to drive animations through the render loop and load pre-built animation clips from GLTF models, letting you focus on creative timing rather than low-level graphics code.
react-three-fiber bridges React and Three.js, letting you compose 3D scenes declaratively using familiar component patterns. Define complex 3D environments through JSON specifications and React's component model, then render them efficiently in the browser. Perfect for building interactive visualizations, games, and immersive web experiences.
This skill empowers you to construct dynamic, interactive 3D environments directly in the browser. Leverage modern web technologies to craft immersive visual experiences that engage users with spatial design and real-time interactivity.
More skills threejs-builder (MIT) · Threejs Lighting (AGPL-3.0) · r3f-router (MIT) · r3f-materials (MIT) · R3f Shaders (unlicensed)