Skip to content
Get packs

react-three-fiber

A React renderer that lets you build Three.js 3D scenes as React components.

GitHub Download v9.8.2
Stars
33.4k
Forks
2.1k
Licence
MIT
Language
TypeScript
Last update
15 days ago
Type
Library

What it is

react-three-fiber (@react-three/fiber) is a React renderer for Three.js, the JavaScript library for 3D graphics in the browser. Instead of writing imperative Three.js code, you describe a scene with JSX elements such as mesh and ambientLight, and the components can hold state and react to user input. According to the README, Three.js classes map directly onto JSX elements, so new Three.js features are usable without waiting for an update to this library.

  • Build a reusable 3D component with its own state that reacts to pointer events
  • Animate objects in the render loop using the useFrame hook
  • Load and display 3D models or textures using loaders such as useLoader (per the README's mention of useGLTF and useTexture via Drei)
  • Run a Three.js scene in a React Native app using the @react-three/fiber/native entry point

Great for

  • React developers who want to add 3D scenes to a web app
  • Developers who already know Three.js and want a component-based structure
  • Projects that need 3D objects to respond to clicks, hover, or state changes
  • Teams that want to use React's ecosystem alongside Three.js

Not ideal for

  • People new to both React and Three.js, since the README says you should be versed in both first (learning both at once is harder)
  • Projects not using React, because this is a React renderer and needs React to run
  • Projects that need to pin to a specific React version without checking pairing: v8 pairs with react@18 and v9 pairs with react@19
Step-by-step guide: how to use react-three-fiberInstall, first run, examples, tips and FAQs
react-three-fiber alternativesA-Frame vs react-three-fiberreact-pdf vs react-three-fiberdrei vs react-three-fiber

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js · React (v18 for @react-three/fiber@8, v19 for @react-three/fiber@9)

    Install three, its types, and react-three-fiber

    npm install three @types/three @react-three/fiber
  2. 2

    Run it

    • Install the packages with npm install three @types/three @react-three/fiber
    • Create a React app and render a Canvas from @react-three/fiber
    • Add a mesh with a boxGeometry and meshStandardMaterial inside the Canvas
    • Use the useFrame hook to animate the mesh each frame
  3. 3

    Get the most out of it

    • Use the useFrame hook to subscribe components to the render loop, as shown in the README example
    • Use the TypeScript ThreeElements type to type component props, as shown in the README's TypeScript example
    • Explore the official docs at docs.pmnd.rs/react-three-fiber and the live CodeSandbox demos linked in the README
    • Follow the README's suggested learning path: Three.js basics, then the API docs, then Bruno Simon's Three.js Journey, which includes an R3F chapter

Downloads

Source code (.zip)master branch · straight from GitHubRelease v9.8.2Release notes and sourceOfficial website & docsdocs.pmnd.rs/react-three-fiber

Strengths

  • Declarative JSX syntax keeps 3D scenes readable and composable as React components
  • Full access to Three.js: the README says all Three.js exports are available through the renderer
  • Works with TypeScript and has a documented React Native path

Trade-offs

  • Requires solid knowledge of both React and Three.js; the README explicitly warns beginners
  • Major versions must match the React major version, which adds upkeep when upgrading React
  • The README's claims of no overhead and no limitations are the maintainers' own statements and are not independently verified here

How it compares

ProjectStarsTypeLevelUpdatedBest for
react-three-fiber (this)33.4kLibraryintermediate15 days agoReact developers who want to add 3D scenes to a web app
three.js117kLibraryintermediate4 days agoWeb developers adding interactive 3D graphics to a website
pixijs48.6kLibraryintermediate6 days agoWeb developers building interactive 2D graphics or animations
editor25.3kAppintermediate6 days agoPeople who want to sketch or model a building in 3D on their own machine
aframe17.7kLibrarybeginner4 months agoWeb developers who want to add 3D or VR scenes to a website
drei10.1kLibraryintermediate16 days agoReact developers who are building 3D scenes for the web with react-three-fiber

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.