# React Three Fiber

## Documentation

- [Introduction](/getting-started/introduction): React-three-fiber is a React renderer for three.js.
- [Installation](/getting-started/installation): Learn how to install react-three-fiber
- [Your first scene](/getting-started/your-first-scene): This guide will help you setup your first React Three Fiber scene and introduce you to its core concepts.
- [Examples](/getting-started/examples): A few examples that demonstrate what you can do with React Three Fiber
- [Community R3F Components](/getting-started/community-r3f-components): This page showcases some React Three Fiber/r3f community components that have not been merged to the drei components collection or to another pmndrs project.
- [Canvas](/api/canvas): The Canvas object is your portal into three.js
- [Objects, properties and constructor arguments](/api/objects): All the effective ways of using React Three Fiber
- [Hooks](/api/hooks): Hooks are the heart of react-three-fiber
- [Events](/api/events): All the events you can hook up to
- [Additional Exports](/api/additional-exports)
- [TypeScript](/api/typescript): Common scenarios and how to approach them with TypeScript
- [Testing](/api/testing): How to handle unit tests
- [Frame Loop & Scheduler](/frame-loop): The v10 scheduler — phases, ordering, fps throttling, pause/resume, render takeover, and demand mode
- [WebGPU Overview](/webgpu/overview): WebGPU and TSL support in react-three-fiber v10 - entry points, the renderer prop, and React-friendly hooks for Three.js Shading Language.
- [TSL Hooks](/webgpu/tsl-hooks): React hooks for managing TSL uniforms and nodes - useUniform, useUniforms, useNodes, useLocalNodes - plus the ScopedStore wrapper.
- [Render Pipeline](/webgpu/render-pipeline): Declarative WebGPU render pipeline setup with automatic scene pass creation, MRT configuration, and custom passes via useRenderPipeline.
- [Compute (Buffers & Storage)](/webgpu/compute): GPU compute storage for WebGPU - useBuffers manages buffer data and useGPUStorage manages storage textures, both with scoping and create-if-not-exists.
- [Textures](/webgpu/textures): Load textures with useTexture and manage them with the reactive useTextures registry - enrollment, refcounted disposal, and when the registry re-renders.
- [Typed Resources](/webgpu/typed-resources): Type @react-three/tsl uniforms, nodes, buffers and GPU storage by name across your app with the Register interface, choose strict or loose checking, back uniforms at runtime with configureTSL, and know what an unregistered read is typed as.
- [Multi-Canvas](/webgpu/multi-canvas): Share a single WebGPURenderer across multiple Canvas components for HUD overlays, picture-in-picture, and multi-viewport rendering.
- [TSL HMR](/webgpu/hmr): How react-three-fiber refreshes TSL state on hot reload - what rebuilds automatically, what does not, and how to rebuild manually.
- [Visibility & Frustum](/scene/visibility): Track when objects enter or leave view with onFramed, onVisible and onOccluded, and work with the camera frustum directly
- [Camera Parenting](/scene/camera-parenting): The default camera lives in the scene — parent objects under it for HUDs and headlights, and render into any container with Portal
- [Render Targets](/scene/render-targets): useRenderTarget creates a framebuffer (FBO) that matches the active renderer — a WebGL target or a WebGPU RenderTarget
- [Scaling performance](/advanced/scaling-performance): This is a short primer on how to scale performance.
- [Performance pitfalls](/advanced/pitfalls): Performance 1x1
- [v9 Migration Guide](/tutorials/v9-migration-guide): Changes and new features with v9 and React 19
- [Events and Interaction](/tutorials/events-and-interaction): Let's make our meshes react to user input.
- [Loading Models](/tutorials/loading-models): 3D Software to the web!
- [Loading Textures](/tutorials/loading-textures): Let's load some fancy textures.
- [Basic Animations](/tutorials/basic-animations): This guide will help you understand refs, useFrame and how to make basic animations with Fiber
- [How does it work?](/tutorials/how-it-works): This is an advanced guide on the inner workings of Fiber, if you are just getting started, take a look at our introduction!
- [v10 Migration Guide](/migration/v10): Upgrading to v10 - WebGPU support, new scheduler, and what changes for you
- [v10 Breaking Changes](/migration/breaking-changes): Every change that can break an app or library moving from v9 to v10, and what to do
- [build](/development/build)
- [contributing](/development/contributing)
- [development](/development/development)
- [readme](/development/readme)
- [testing](/development/testing)

## MCP Server

This documentation is available via Model Context Protocol (MCP) server at https://docs.pmnd.rs/api/mcp

Configure in your MCP client:
```json
{
  "mcpServers": {
    "pmndrs": {
      "type": "http",
      "url": "https://docs.pmnd.rs/api/mcp"
    }
  }
}
```

---

For full documentation content, see llms-full.txt