Repolode
Submit
pmndrs

pmndrs/react-three-fiber

A React renderer for Three.js that lets you build 3D scenes declaratively with JSX components.

View on GitHubWebsite
Stars
33,534
Forks
2,080
Open issues
15
Last commit
17 days ago

What is it?

react-three-fiber (@react-three/fiber) is a React renderer for Three.js. Instead of creating meshes, materials and lights imperatively, you write them as JSX elements such as <mesh /> or <ambientLight />, and each element maps to the corresponding Three.js object. Components can hold their own React state, respond to pointer events, and subscribe to the render loop through hooks like useFrame.

Because rendering happens outside React's component tree, the project states it adds no overhead compared with plain Three.js. Any Three.js class or feature is available as a JSX element, so new Three.js releases do not require changes to the library itself. Packages for React Native are also provided. The library is designed to be paired with a matching major version of React (v8 for React 18, v9 for React 19).

The wider @react-three ecosystem adds helpers such as drei, post-processing, physics engines (Rapier, Cannon), XR support and a test renderer for Node.

Key features

  • 01Write Three.js scenes as JSX elements that map directly to Three.js objects.
  • 02Use React state and event handlers such as onClick and onPointerOver on 3D objects.
  • 03Run per-frame logic with the useFrame hook inside the render loop.
  • 04Access any Three.js feature without waiting for library updates.
  • 05Supports React Native via a separate entry point.

Use cases

  • Building interactive 3D product configurators or data visualizations in a React app.
  • Creating reusable 3D UI components with their own state and animations.
  • Adding 3D scenes to a React Native mobile app.
  • Writing unit tests for 3D scene components in Node with the test renderer.

Quick start

  1. 1

    Install the packages with npm

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

    Create a Canvas and render a scene with JSX components (see the README example)

Things to know

  • react-three-fiber must match your React major version: v8 pairs with react@18 and v9 with react@19.

Topics

#react#threejs#3d#webgl#renderer#graphics#animation#fiber

FAQ

What is react-three-fiber?
A React renderer for Three.js that lets you build 3D scenes declaratively with JSX components. react-three-fiber (@react-three/fiber) is a React renderer for Three.js. Instead of creating meshes, materials and lights imperatively, you write them as JSX elements such as <mesh /> or <ambientLight />, and each element maps to the corresponding Three.js object. Components can hold their own React state, respond to pointer events, and subscribe to the render loop through hooks like useFrame.
Is react-three-fiber free to use? What license does it have?
react-three-fiber is open source under the MIT license. Check the license terms before using it in commercial products.
Is react-three-fiber still maintained?
Actively maintained. The last commit to react-three-fiber was on Oct 21, 2026.
What can I use react-three-fiber for?
Building interactive 3D product configurators or data visualizations in a React app. Creating reusable 3D UI components with their own state and animations. Adding 3D scenes to a React Native mobile app. Writing unit tests for 3D scene components in Node with the test renderer.
How do I install react-three-fiber?
Install the packages with npm: npm install three @types/three @react-three/fiber Create a Canvas and render a scene with JSX components (see the README example)
Where can I get react-three-fiber?
The source code and installation instructions are on GitHub: https://github.com/pmndrs/react-three-fiber

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects