{"id":13726379,"url":"https://github.com/gsimone/awesome-react-three-fiber","last_synced_at":"2025-07-27T12:12:27.723Z","repository":{"id":50906257,"uuid":"286218500","full_name":"gsimone/awesome-react-three-fiber","owner":"gsimone","description":"🍕 A loose collection of cool r3f links, gifs, people, stuff","archived":false,"fork":false,"pushed_at":"2021-02-19T17:15:58.000Z","size":1125,"stargazers_count":183,"open_issues_count":6,"forks_count":13,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-07T06:06:57.056Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gsimone.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-09T10:54:59.000Z","updated_at":"2025-03-16T08:21:01.000Z","dependencies_parsed_at":"2022-09-03T19:10:22.408Z","dependency_job_id":null,"html_url":"https://github.com/gsimone/awesome-react-three-fiber","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gsimone%2Fawesome-react-three-fiber","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gsimone%2Fawesome-react-three-fiber/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gsimone%2Fawesome-react-three-fiber/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gsimone%2Fawesome-react-three-fiber/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gsimone","download_url":"https://codeload.github.com/gsimone/awesome-react-three-fiber/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248550624,"owners_count":21122932,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T01:03:02.126Z","updated_at":"2025-04-14T03:40:36.703Z","avatar_url":"https://github.com/gsimone.png","language":null,"funding_links":[],"categories":["Others","Other Lists"],"sub_categories":["TeX Lists"],"readme":"### Awesome React Three Fiber [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)\n\n# Poimandres links\n\n![Poimandres](./screenshots/poimandres.png)\n\n- [Official website](https://pmnd.rs/)\n- [Github](https://github.com/pmndrs)\n- [Twitter](https://twitter.com/pmndrs)\n- [Poimandres twitter list](https://twitter.com/i/lists/1298304281397923845)\n- [Discord](https://discord.gg/yhe4pWqx)\n\n# Poimandres ecosystem libraries\n\n![Poimandres libraries](./screenshots/poimandes-libraries.png)\n\n## 3D\n\n- [react-three-fiber](https://github.com/pmndrs/react-three-fiber)\n- [react-three-next](https://github.com/pmndrs/react-three-next)\n- [react-three-lightmap](https://github.com/pmndrs/react-three-lightmap)\n- [react-postprocessing](https://github.com/react-spring/react-postprocessing)\n- [react-three-a11y](https://github.com/pmndrs/react-three-a11y)\n- [react-three-flex](https://github.com/pmndrs/react-three-flex)\n- [drei](https://github.com/react-spring/drei)\n- [react-xr](https://github.com/pmndrs/react-xr)\n- [use-asset](https://github.com/pmndrs/use-asset)\n- [component-material](https://github.com/pmndrs/component-material)\n- [gltfjsx](https://github.com/pmndrs/gltfjsx)\n\n## React tools\n\n- [react-use-measure](https://github.com/pmndrs/react-use-measure)\n- [react-spring](https://github.com/pmndrs/react-spring)\n- [react-use-gesture](https://github.com/pmndrs/react-use-gesture)\n- [leva](https://github.com/pmndrs/leva)\n\n## State management\n\n- [zustand](https://github.com/pmndrs/zustand)\n- [jotai](https://github.com/pmndrs/jotai)\n- [valtio](https://github.com/pmndrs/valtio)\n\n## Physics\n\n- [cannon-es](https://github.com/pmndrs/cannon-es)\n- [use-cannon](https://github.com/pmndrs/use-cannon)\n\n# Community ecosystem libraries\n\n- [r3f-perf](https://github.com/RenaudRohlinger/r3f-perf)\n- [three-material-editor](https://github.com/RenaudRohlinger/three-material-editor)\n- [use-r3f-assets](https://github.com/emmelleppi/use-r3f-assets)\n\n# Gamedev\n\n![Game development](screenshots/gamedev.png)\n\n- [react-three-game-starter](https://github.com/simonghales/react-three-game-starter)\n- [react-three-game-engine](https://github.com/simonghales/react-three-game-engine)\n- [react-three-game-example](https://github.com/simonghales/example-react-three-game)\n- [r3f-game-demo](https://github.com/coldi/r3f-game-demo)\n- [rgg](https://github.com/simonghales/rgg)\n\n# Codesandbox links\n\n![Codesanbox](screenshots/codesandbox.png)\n\n- [Paul Hecnschel](https://codesandbox.io/u/drcmda)\n- [Gianmarco](https://codesandbox.io/u/gsimone)\n- [Marco Ludovico Perego](https://codesandbox.io/u/emmelleppi)\n- [Curated collections](https://codesandbox.io/u/Flow11/likes)\n\n# Github links\n\n| Name            | Link                                               |\n| --------------- | -------------------------------------------------- |\n| r3f-raymarching | [link](https://github.com/gsimone/r3f-raymarching) |\n| neoleon         | [link](https://github.com/Darkensses/neoleon)      |\n\n# Tweet/Thread\n\n| Name                       | Link                                                          |\n| -------------------------- | ------------------------------------------------------------- |\n| Why use react for threejs? | [link](https://twitter.com/0xca0a/status/1282999626782650368) |\n\n# Tutorials/Articles\n\n| Title                                                     | Link                                                                                                              |\n| --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |\n| How to Create Procedural Clouds Using Three.js Sprites    | [link](https://tympanus.net/codrops/2020/01/28/how-to-create-procedural-clouds-using-three-js-sprites/)           |\n| Write your first VR web application using React and WebXR | [link](https://blog.dubenko.dev/react-xr/)                                                                        |\n| The Big List of three.js Tips and Tricks!                 | [link](https://discoverthreejs.com/tips-and-tricks/)                                                              |\n| Creating a Skybox with Reflections in React Three Fiber   | [link](https://codeworkshop.dev/blog/2020-06-14-creating-a-skybox-with-reflections-in-react-three-fiber/)         |\n| Creating Mirrors in React-Three-Fiber and Three.js        | [link](https://tympanus.net/codrops/2020/09/30/creating-mirrors-in-react-three-fiber-and-three-js/)               |\n| Recreating a Dave Whyte Animation in React-Three-Fiber    | [link](https://tympanus.net/codrops/2020/12/17/recreating-a-dave-whyte-animation-in-react-three-fiber/)           |\n| How to Build a Creative Portfolio with React JS and WebGL | [link](https://lorenzocadamuro.medium.com/how-to-build-a-creative-portfolio-with-react-js-and-webgl-a697869f78c5) |\n| Create a 3D product landing page with ThreeJs and React   | [link](https://www.takeshape.io/articles/create-a-3d-product-landing-page-with-threejs-and-react/)                |\n| Making a 2D RPG game with react-three-fiber               | [link](https://dev.to/flagrede/making-a-2d-rpg-game-with-react-tree-fiber-4af1)                                   |\n| A Dive Into React And Three.js Using react-three-fiber    | [link](https://www.smashingmagazine.com/2020/11/threejs-react-three-fiber/)                                       |\n| Notes on react-three-fiber                                | [link](https://richardhaines.dev/notes-on-react-three-fiber/?s=09)                                                |\n| 3D rendering in the browser with react-three-fiber        | [link](https://blog.logrocket.com/3d-rendering-in-the-browser-with-react-three-fiber/)                            |\n| Building Future UIs                                       | [link](https://formidable.com/blog/2021/future-ui/)                                                               |\n\n# Videos\n\n| Title                                                                                        | Link                                                                 |\n| -------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |\n| React \u0026 Three.js Building Interactive Minecraft Chest Model with React Three Fiber Episode 1 | [link](https://www.youtube.com/watch?v=ClUZKhYLeqc\u0026feature=youtu.be) |\n| Building JavaScript Minecraft in 1 Hour [React \u0026 Three.js Tutorial]                          | [link](https://www.youtube.com/watch?v=ZnXKmODEFHA)                  |\n\n# Made with R3F\n\n| Title            | Link                                                         |\n| ---------------- | ------------------------------------------------------------ |\n| Dungeon Revealer | [link](https://github.com/dungeon-revealer/dungeon-revealer) |\n| Rakes            | [link](https://yehrhrhehrg.com/)                             |\n| Colmen's Quest   | [link](https://coldigames.itch.io/colmens-quest)             |\n\n# Contributing\n\nContribute by adding an entry to this README. Self promo welcome.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgsimone%2Fawesome-react-three-fiber","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgsimone%2Fawesome-react-three-fiber","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgsimone%2Fawesome-react-three-fiber/lists"}