![](\"https://i.imgur.com/sS4ArrZ.gif\")
\r\n \r\n | Let's make a re-usable component that has its own state, reacts to user-input and participates in the render-loop. (live demo). | \r\n\r\n \r\n \r\n \r\n | \r\n
![](\"/docs/preview.jpg\")
\r\n\r\n# Fundamentals\r\n\r\nYou need to be versed in both React and Threejs before rushing into this. If you are unsure about React consult the official [React docs](https://react.dev/learn), especially [the section about hooks](https://react.dev/reference/react). As for Threejs, make sure you at least glance over the following links:\r\n\r\n1. Make sure you have a [basic grasp of Threejs](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene). Keep that site open.\r\n2. When you know what a scene is, a camera, mesh, geometry, material, fork the [demo above](https://github.com/pmndrs/react-three-fiber#what-does-it-look-like).\r\n3. [Look up](https://threejs.org/docs/index.html#api/en/objects/Mesh) the JSX elements that you see (mesh, ambientLight, etc), _all_ threejs exports are native to three-fiber.\r\n4. Try changing some values, scroll through our [API](https://docs.pmnd.rs/react-three-fiber/API) to see what the various settings and hooks do.\r\n\r\nSome reading material:\r\n\r\n- [Threejs-docs](https://threejs.org/docs)\r\n- [Threejs-examples](https://threejs.org/examples)\r\n- [Threejs-fundamentals](https://threejs.org/manual/#en/fundamentals)\r\n- [three.js-journey](https://threejs-journey.com)\r\n- [Discover Threejs](https://discoverthreejs.com)\r\n- [Do's and don'ts](https://discoverthreejs.com/tips-and-tricks) for performance and best practices\r\n- [react-three-fiber alligator.io tutorial](https://alligator.io/react/react-with-threejs) by [@dghez\\_](https://twitter.com/dghez_)\r\n\r\n# Ecosystem\r\n\r\n- [`@react-three/gltfjsx`](https://github.com/pmndrs/gltfjsx) – turns GLTFs into JSX components\r\n- [`@react-three/drei`](https://github.com/pmndrs/drei) – useful helpers for react-three-fiber\r\n- [`@react-three/postprocessing`](https://github.com/pmndrs/react-postprocessing) – post-processing effects\r\n- [`@react-three/flex`](https://github.com/pmndrs/react-three-flex) – flexbox for react-three-fiber\r\n- [`@react-three/xr`](https://github.com/pmndrs/react-xr) – VR/AR controllers and events\r\n- [`@react-three/cannon`](https://github.com/pmndrs/use-cannon) – physics based hooks\r\n- [`@react-three/a11y`](https://github.com/pmndrs/react-three-a11y) – real a11y for your scene\r\n- [`zustand`](https://github.com/pmndrs/zustand) – state management\r\n- [`react-spring`](https://github.com/pmndrs/react-spring) – a spring-physics-based animation library\r\n- [`react-use-gesture`](https://github.com/pmndrs/react-use-gesture) – mouse/touch gestures\r\n- [`leva`](https://github.com/pmndrs/leva) – create GUI controls in seconds\r\n\r\n# How to contribute\r\n\r\nIf you like this project, please consider helping out. All contributions are welcome as well as donations to [Opencollective](https://opencollective.com/react-three-fiber), or in crypto `BTC: 36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH`, `ETH: 0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682`.\r\n\r\n#### Backers\r\n\r\nThank you to all our backers! 🙏\r\n\r\n\r\n ![](\"https://opencollective.com/react-three-fiber/backers.svg?width=890\"/)
\r\n\r\n\r\n#### Contributors\r\n\r\nThis project exists thanks to all the people who contribute.\r\n\r\n\r\n ![](\"https://opencollective.com/react-three-fiber/contributors.svg?width=890\")
\r\n","users":{}}