React Three Fiber

React Three Fiber is a React renderer for Three.js, the popular JavaScript 3D library. It lets you describe 3D scenes as React components, so they can use state, hooks and the normal React workflow.

Instead of writing imperative Three.js code, you write JSX elements such as a mesh or a light. The library turns each element into the matching Three.js object and keeps it in sync with your component state. A hook runs code on every frame of the render loop, which is where animation and interaction logic usually lives.

• Write 3D scenes as reusable React components
• Run code on each frame with a render-loop hook
• Respond to pointer events on 3D objects
• Use any Three.js feature from JSX
• Pair with the React ecosystem and its tools

React developers who want to add 3D content to a web app, and teams that already build interfaces in React and want the 3D part to follow the same patterns. It is a good fit for product viewers, data visualizations and interactive scenes.

The project is open source on GitHub under the MIT license, so it is free to use in commercial work. It needs React and Three.js alongside it, and the major version of the library must match the major version of React. A newer version is in alpha, so check the documentation for the release that fits your project.