A React renderer for Three.js that lets you build 3D scenes declaratively with reusable components.
@react-three/fiber is a React renderer for Three.js that allows developers to create and manage 3D scenes using React's declarative JSX syntax. It solves the problem of integrating Three.js's imperative API with React's component-based architecture, enabling the construction of interactive, reusable 3D components that respond to state and events.
React developers who want to incorporate 3D graphics into their web or React Native applications, from interactive data visualizations and product configurators to immersive experiences and games.
Developers choose @react-three/fiber because it provides the full power of Three.js without sacrificing React's developer experience, offering zero-overhead performance, seamless ecosystem integration, and a declarative approach that simplifies complex 3D scene management.
🇨🇭 A React renderer for Three.js
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Expresses Three.js objects as JSX elements for intuitive and reusable scene building, as demonstrated in the example code where meshes and lights are defined declaratively.
No limitations on Three.js features, enabling access to all capabilities without performance overhead, explicitly stated in the README's FAQ section.
Components can use React state, hooks, and lifecycle, integrating 3D graphics with existing React ecosystems, shown by the use of useState and useFrame in the provided example.
Supports both web via React DOM and mobile via React Native, with dedicated examples for each platform in the README.
Rich suite of libraries for physics, UI, post-processing, and more, such as @react-three/drei and @react-three/xr, listed in the ecosystem section.
Developers must be proficient in both React and Three.js, as emphasized in the 'First steps' section, adding significant upfront learning time.
Tied to specific React major versions (e.g., v8 with React 18), which can complicate upgrades and maintenance, as warned in the README's versioning note.
Core library lacks built-in tools for loading 3D models and textures, requiring additional dependencies like @react-three/drei for practical use, as hinted in the React Native setup example.