{"enrichment":{"faq":[{"a":"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\u2014add 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.","q":"How do you set up a React Three Fiber project with Canvas and basic scene?"},{"a":"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.","q":"How to configure canvas in React Three Fiber for optimal rendering?"},{"a":"r3f-fundamentals explains that React Three Fiber maps Three.js objects to JSX components\u2014`<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.","q":"What is the declarative scene graph pattern in React Three Fiber?"},{"a":"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\u2014for 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.","q":"How do you implement animation loops with useFrame in r3f?"},{"a":"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\u2014nest 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.","q":"How does React Three Fiber handle lighting and scene hierarchy?"},{"a":"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.","q":"How do you add pointer event handling to interactive 3D objects in r3f?"}],"shadow_tags":["declarative-3d","webgl-abstraction","component-based-graphics","render-optimization","interactive-scenes","jsx-to-threejs","animation-framework","scene-composition","event-driven-3d","react-lifecycle-integration"],"summary_rewrite":"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."},"files":[{"bytes":10849,"path":"skills/r3f-fundamentals/SKILL.md","sha256":"3e8511803b621cacece7a201b2fb38f3eb19826177074d58fa01a6a37150030b","url":"https://skillfed.io/files/Bbeierle12/Skill-MCP-Claude/r3f-fundamentals/51f64c56/SKILL.md"}],"id":"Bbeierle12/Skill-MCP-Claude/r3f-fundamentals","links":{"html":"https://skillfed.io/Bbeierle12/Skill-MCP-Claude/r3f-fundamentals","md":"https://skillfed.io/Bbeierle12/Skill-MCP-Claude/r3f-fundamentals.md","repo":"https://github.com/Bbeierle12/Skill-MCP-Claude"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":3,"language":"JavaScript","last_updated":"2026-07-27","license":"MIT","name":"r3f-fundamentals","publisher":"Bbeierle12","stars":8},"relations":{"similar":[{"id":"EnzeD/r3f-skills/r3f-fundamentals"},{"id":"freshtechbro/claudedesignskills/react-three-fiber"},{"id":"EnzeD/r3f-skills/r3f-interaction"},{"id":"freshtechbro/claudedesignskills/web3d-integration-patterns"},{"id":"organvm/a-i--skills/react-three-fiber-patterns"},{"id":"EnzeD/r3f-skills/r3f-animation"},{"id":"EnzeD/r3f-skills/r3f-textures"},{"id":"MonumentalSystems/Atlas-Agent-Teams/threejs"},{"id":"EnzeD/r3f-skills/r3f-geometry"},{"id":"zebbern/claude-code-guide/r3f-animation"}]},"slug":{"owner":"Bbeierle12","repo":"Skill-MCP-Claude","skill":"r3f-fundamentals"},"version":"51f64c56"}