You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A curated list of awesome resources, libraries, tools, and projects for [React Three Fiber](https://github.com/pmndrs/react-three-fiber).
4
+
5
+
> **Note:** We're just getting started with this list! If you have a resource, library, or project that should be included, please [open a PR](https://github.com/pmndrs/react-three-fiber/issues/3642) to add it.
6
+
7
+
---
8
+
9
+
## Contents
10
+
11
+
-[Learning Resources](#learning-resources)
12
+
-[Official Packages](#official-packages)
13
+
-[Physics](#physics)
14
+
-[State Management](#state-management)
15
+
-[Animation](#animation)
16
+
-[UI & Controls](#ui--controls)
17
+
-[Shaders & Materials](#shaders--materials)
18
+
-[Utilities](#utilities)
19
+
-[Editors & Dev Tools](#editors--dev-tools)
20
+
-[Starters & Templates](#starters--templates)
21
+
-[Showcase](#showcase)
22
+
23
+
---
24
+
25
+
## Learning Resources
26
+
27
+
Tutorials, courses, and documentation to help you learn R3F.
28
+
29
+
-[Three.js Documentation](https://threejs.org/docs) - Official Three.js docs and [examples](https://threejs.org/examples)
30
+
-[Discover Three.js](https://discoverthreejs.com) - Comprehensive guide, especially the [Tips and Tricks](https://discoverthreejs.com/tips-and-tricks) chapter for best practices
31
+
-[Three.js Journey](https://threejs-journey.com) - Arguably the best learning resource, includes a full [R3F chapter](https://threejs-journey.com/lessons/what-are-react-and-react-three-fiber)
32
+
33
+
## Official Packages
34
+
35
+
Core packages maintained by the [Poimandres](https://github.com/pmndrs) team.
36
+
37
+
-[`@react-three/drei`](https://github.com/pmndrs/drei) - Useful helpers, this is an ecosystem in itself
38
+
-[`@react-three/gltfjsx`](https://github.com/pmndrs/gltfjsx) - Turns GLTFs into JSX components
Copy file name to clipboardExpand all lines: readme.md
+7-81Lines changed: 7 additions & 81 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -35,6 +35,10 @@ No. There is no overhead. Components render outside of React. It outperforms Thr
35
35
36
36
Yes. It merely expresses Threejs in JSX, `<mesh />` dynamically turns into `new THREE.Mesh()`. If a new Threejs version adds, removes or changes features, it will be available to you instantly without depending on updates to this library.
37
37
38
+
#### Does it support WebGPU?
39
+
40
+
Yes. With minor changes in v9 and significant work in v10 WebGPU support is first class. We support all ThreeJS WebGPU features/Nodes and expand it with our own hooks and utilities.
41
+
38
42
### What does it look like?
39
43
40
44
<table>
@@ -206,7 +210,7 @@ export default function App() {
Visit [docs.pmnd.rs](https://docs.pmnd.rs/react-three-fiber) | [Awesome React Three Fiber](AwesomeR3F.md)
210
214
211
215
# First steps
212
216
@@ -217,89 +221,11 @@ You need to be versed in both React and Threejs before rushing into this. If you
217
221
3.[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.
218
222
4. Try changing some values, scroll through our [API](https://docs.pmnd.rs/react-three-fiber) to see what the various settings and hooks do.
219
223
220
-
Some helpful material:
221
-
222
-
-[Threejs-docs](https://threejs.org/docs) and [examples](https://threejs.org/examples)
223
-
-[Discover Threejs](https://discoverthreejs.com), especially the [Tips and Tricks](https://discoverthreejs.com/tips-and-tricks) chapter for best practices
224
-
-[Bruno Simons Threejs Journey](https://threejs-journey.com), arguably the best learning resource, now includes a full [R3F chapter](https://threejs-journey.com/lessons/what-are-react-and-react-three-fiber)
-[`composer-suite`](https://github.com/hmans/composer-suite)– composing shaders, particles, effects and game mechanics
258
-
-[`triplex`](https://triplex.dev/)– visual editor for react-three-fiber
259
-
-[`koestlich`](https://github.com/coconut-xr/koestlich)– UI component library for react-three-fiber
260
-
261
-
[Usage Trend of the @react-three Family](https://npm-compare.com/@react-three/a11y,@react-three/cannon,@react-three/csg,@react-three/drei,@react-three/flex,@react-three/gltfjsx,@react-three/gpu-pathtracer,@react-three/offscreen,@react-three/p2,@react-three/postprocessing,@react-three/rapier,@react-three/test-renderer,@react-three/uikit,@react-three/xr)
262
-
263
-
# Who is using Three-fiber
264
-
265
-
A small selection of companies and projects relying on three-fiber.
Checkout the detailed [contribution docs.](docs/development/README.md)
289
-
290
-
If you like this project, please consider helping out. All contributions are welcome as well as donations to [Opencollective](https://opencollective.com/pmndrs)
291
-
292
-
# Testing
226
+
See the [Development Guide](docs/development/README.md) for setup, workflow, and [contributing standards](docs/development/CONTRIBUTING.md).
293
227
294
-
R3F uses Jest for unit testing and bundle verification scripts to ensure correct THREE.js imports across entry points. For detailed testing instructions, see the [Testing Guide](docs/development/TESTING.md).
295
-
296
-
```bash
297
-
# Run all tests
298
-
yarn test
299
-
300
-
# Build and verify bundles
301
-
yarn build && yarn verify-bundles
302
-
```
228
+
All contributions are welcome as well as donations to [Open Collective](https://opencollective.com/pmndrs).
0 commit comments