{"id":15313900,"url":"https://github.com/itsdouges/react-three-fiber","last_synced_at":"2025-10-08T23:31:49.635Z","repository":{"id":65320399,"uuid":"586219312","full_name":"itsdouges/react-three-fiber","owner":"itsdouges","description":"🇨🇭 A React renderer for Three.js","archived":false,"fork":true,"pushed_at":"2024-01-02T09:39:19.000Z","size":17830,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-23T14:38:34.437Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://docs.pmnd.rs/react-three-fiber","language":null,"has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"pmndrs/react-three-fiber","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/itsdouges.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"drcmda","open_collective":"react-three-fiber"}},"created_at":"2023-01-07T11:17:03.000Z","updated_at":"2023-01-07T08:33:38.000Z","dependencies_parsed_at":"2023-02-12T09:31:22.501Z","dependency_job_id":null,"html_url":"https://github.com/itsdouges/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/itsdouges%2Freact-three-fiber","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Freact-three-fiber/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Freact-three-fiber/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Freact-three-fiber/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itsdouges","download_url":"https://codeload.github.com/itsdouges/react-three-fiber/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235775513,"owners_count":19043180,"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-10-01T08:43:35.736Z","updated_at":"2025-10-08T23:31:49.182Z","avatar_url":"https://github.com/itsdouges.png","language":null,"funding_links":["https://github.com/sponsors/drcmda","https://opencollective.com/react-three-fiber"],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003e@react-three/fiber\u003c/h1\u003e\n\n[![Version](https://img.shields.io/npm/v/@react-three/fiber?style=flat\u0026colorA=000000\u0026colorB=000000)](https://npmjs.com/package/@react-three/fiber)\n[![Downloads](https://img.shields.io/npm/dt/react-three-fiber.svg?style=flat\u0026colorA=000000\u0026colorB=000000)](https://npmjs.com/package/@react-three/fiber)\n[![Twitter](https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs\u0026style=flat\u0026colorA=000000\u0026colorB=000000\u0026logo=twitter\u0026logoColor=000000)](https://twitter.com/pmndrs)\n[![Discord](https://img.shields.io/discord/740090768164651008?style=flat\u0026colorA=000000\u0026colorB=000000\u0026label=discord\u0026logo=discord\u0026logoColor=000000)](https://discord.gg/ZZjjNvJ)\n[![Open Collective](https://img.shields.io/opencollective/all/react-three-fiber?style=flat\u0026colorA=000000\u0026colorB=000000)](https://opencollective.com/react-three-fiber)\n[![ETH](https://img.shields.io/badge/ETH-f5f5f5?style=flat\u0026colorA=000000\u0026colorB=000000)](https://blockchain.com/eth/address/0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682)\n[![BTC](https://img.shields.io/badge/BTC-f5f5f5?style=flat\u0026colorA=000000\u0026colorB=000000)](https://blockchain.com/btc/address/36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH)\n\n\u003ca href=\"https://docs.pmnd.rs/react-three-fiber/getting-started/examples\"\u003e\u003cimg src=\"/docs/banner-r3f.jpg\" /\u003e\u003c/a\u003e\n\nreact-three-fiber is a \u003ca href=\"https://reactjs.org/docs/codebase-overview.html#renderers\"\u003eReact renderer\u003c/a\u003e for threejs.\n\nBuild your scene declaratively with re-usable, self-contained components that react to state, are readily interactive and can participate in React's ecosystem.\n\n```bash\nnpm install three @types/three @react-three/fiber\n```\n\n#### Does it have limitations?\n\nNone. Everything that works in Threejs will work here without exception.\n\n#### Is it slower than plain Threejs?\n\nNo. There is no overhead. Components render outside of React. It outperforms Threejs in scale due to Reacts scheduling abilities.\n\n#### Can it keep up with frequent feature updates to Threejs?\n\nYes. It merely expresses Threejs in JSX, `\u003cmesh /\u003e` 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.\n\n### What does it look like?\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eLet's make a re-usable component that has its own state, reacts to user-input and participates in the render-loop. (\u003ca href=\"https://codesandbox.io/s/rrppl0y8l4?file=/src/App.js\"\u003elive demo\u003c/a\u003e).\u003c/td\u003e\n      \u003ctd\u003e\n        \u003ca href=\"https://codesandbox.io/s/rrppl0y8l4\"\u003e\n          \u003cimg src=\"/docs/basic-app.gif\" /\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n```jsx\nimport { createRoot } from 'react-dom/client'\nimport React, { useRef, useState } from 'react'\nimport { Canvas, useFrame } from '@react-three/fiber'\n\nfunction Box(props) {\n  // This reference gives us direct access to the THREE.Mesh object\n  const ref = useRef()\n  // Hold state for hovered and clicked events\n  const [hovered, hover] = useState(false)\n  const [clicked, click] = useState(false)\n  // Subscribe this component to the render-loop, rotate the mesh every frame\n  useFrame((state, delta) =\u003e (ref.current.rotation.x += delta))\n  // Return the view, these are regular Threejs elements expressed in JSX\n  return (\n    \u003cmesh\n      {...props}\n      ref={ref}\n      scale={clicked ? 1.5 : 1}\n      onClick={(event) =\u003e click(!clicked)}\n      onPointerOver={(event) =\u003e hover(true)}\n      onPointerOut={(event) =\u003e hover(false)}\u003e\n      \u003cboxGeometry args={[1, 1, 1]} /\u003e\n      \u003cmeshStandardMaterial color={hovered ? 'hotpink' : 'orange'} /\u003e\n    \u003c/mesh\u003e\n  )\n}\n\ncreateRoot(document.getElementById('root')).render(\n  \u003cCanvas\u003e\n    \u003cambientLight /\u003e\n    \u003cpointLight position={[10, 10, 10]} /\u003e\n    \u003cBox position={[-1.2, 0, 0]} /\u003e\n    \u003cBox position={[1.2, 0, 0]} /\u003e\n  \u003c/Canvas\u003e,\n)\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow TypeScript example\u003c/summary\u003e\n  \n```bash\nnpm install @types/three\n```\n\n```tsx\nimport * as THREE from 'three'\nimport { createRoot } from 'react-dom/client'\nimport React, { useRef, useState } from 'react'\nimport { Canvas, useFrame, ThreeElements } from '@react-three/fiber'\n\nfunction Box(props: ThreeElements['mesh']) {\n  const ref = useRef\u003cTHREE.Mesh\u003e(null!)\n  const [hovered, hover] = useState(false)\n  const [clicked, click] = useState(false)\n  useFrame((state, delta) =\u003e (ref.current.rotation.x += delta))\n  return (\n    \u003cmesh\n      {...props}\n      ref={ref}\n      scale={clicked ? 1.5 : 1}\n      onClick={(event) =\u003e click(!clicked)}\n      onPointerOver={(event) =\u003e hover(true)}\n      onPointerOut={(event) =\u003e hover(false)}\u003e\n      \u003cboxGeometry args={[1, 1, 1]} /\u003e\n      \u003cmeshStandardMaterial color={hovered ? 'hotpink' : 'orange'} /\u003e\n    \u003c/mesh\u003e\n  )\n}\n\ncreateRoot(document.getElementById('root') as HTMLElement).render(\n  \u003cCanvas\u003e\n    \u003cambientLight /\u003e\n    \u003cpointLight position={[10, 10, 10]} /\u003e\n    \u003cBox position={[-1.2, 0, 0]} /\u003e\n    \u003cBox position={[1.2, 0, 0]} /\u003e\n  \u003c/Canvas\u003e,\n)\n```\n\nLive demo: https://codesandbox.io/s/icy-tree-brnsm?file=/src/App.tsx\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow React Native example\u003c/summary\u003e\n\nThis example relies on react 18 and uses `expo-cli`, but you can create a bare project with their template or with the `react-native` CLI.\n\n```bash\n# Install expo-cli, this will create our app\nnpm install expo-cli -g\n# Create app and cd into it\nexpo init my-app\ncd my-app\n# Install dependencies\nnpm install three @react-three/fiber@beta react@rc\n# Start\nexpo start\n```\n\nSome configuration may be required to tell the Metro bundler about your assets if you use `useLoader` or Drei abstractions like `useGLTF` and `useTexture`:\n\n```js\n// metro.config.js\nmodule.exports = {\n  resolver: {\n    sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'cjs'],\n    assetExts: ['glb', 'png', 'jpg'],\n  },\n}\n```\n\n```tsx\nimport React, { useRef, useState } from 'react'\nimport { Canvas, useFrame } from '@react-three/fiber/native'\nfunction Box(props) {\n  const mesh = useRef(null)\n  const [hovered, setHover] = useState(false)\n  const [active, setActive] = useState(false)\n  useFrame((state, delta) =\u003e (mesh.current.rotation.x += delta))\n  return (\n    \u003cmesh\n      {...props}\n      ref={mesh}\n      scale={active ? 1.5 : 1}\n      onClick={(event) =\u003e setActive(!active)}\n      onPointerOver={(event) =\u003e setHover(true)}\n      onPointerOut={(event) =\u003e setHover(false)}\u003e\n      \u003cboxGeometry args={[1, 1, 1]} /\u003e\n      \u003cmeshStandardMaterial color={hovered ? 'hotpink' : 'orange'} /\u003e\n    \u003c/mesh\u003e\n  )\n}\nexport default function App() {\n  return (\n    \u003cCanvas\u003e\n      \u003cambientLight /\u003e\n      \u003cpointLight position={[10, 10, 10]} /\u003e\n      \u003cBox position={[-1.2, 0, 0]} /\u003e\n      \u003cBox position={[1.2, 0, 0]} /\u003e\n    \u003c/Canvas\u003e\n  )\n}\n```\n\n\u003c/details\u003e\n\n---\n\n# Documentation, tutorials, examples\n\nVisit [docs.pmnd.rs](https://docs.pmnd.rs/react-three-fiber)\n\n# First steps\n\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://reactjs.org/docs/getting-started.html), especially [the section about hooks](https://reactjs.org/docs/hooks-reference.html). As for Threejs, make sure you at least glance over the following links:\n\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.\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).\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.\n4. Try changing some values, scroll through our [API](https://docs.pmnd.rs/react-three-fiber) to see what the various settings and hooks do.\n\nSome helpful material:\n\n- [Threejs-docs](https://threejs.org/docs) and [examples](https://threejs.org/examples)\n- [Discover Threejs](https://discoverthreejs.com), especially the [Tips and Tricks](https://discoverthreejs.com/tips-and-tricks) chapter for best practices\n- [Bruno Simons Threejs Jouney](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)\n\n\u003ca href=\"https://threejs-journey.com\"\u003e\u003cimg src=\"/docs/banner-journey.jpg\" /\u003e\u003c/a\u003e\n\n# Ecosystem\n\nThere is a vibrant and extensive eco system around three-fiber, full of libraries, helpers and abstractions.\n\n- [`@react-three/drei`](https://github.com/pmndrs/drei) \u0026ndash; useful helpers, this is an eco system in itself\n- [`@react-three/gltfjsx`](https://github.com/pmndrs/gltfjsx) \u0026ndash; turns GLTFs into JSX components\n- [`@react-three/postprocessing`](https://github.com/pmndrs/react-postprocessing) \u0026ndash; post-processing effects\n- [`@react-three/test-renderer`](https://github.com/pmndrs/react-three-fiber/tree/master/packages/test-renderer) \u0026ndash; for unit tests in node\n- [`@react-three/flex`](https://github.com/pmndrs/react-three-flex) \u0026ndash; flexbox for react-three-fiber\n- [`@react-three/xr`](https://github.com/pmndrs/react-xr) \u0026ndash; VR/AR controllers and events\n- [`@react-three/csg`](https://github.com/pmndrs/react-three-csg) \u0026ndash; constructive solid geometry\n- [`@react-three/rapier`](https://github.com/pmndrs/react-three-rapier) \u0026ndash; 3D physics using Rapier\n- [`@react-three/cannon`](https://github.com/pmndrs/use-cannon) \u0026ndash; 3D physics using Cannon\n- [`@react-three/p2`](https://github.com/pmndrs/use-p2) \u0026ndash; 2D physics using P2\n- [`@react-three/a11y`](https://github.com/pmndrs/react-three-a11y) \u0026ndash; real a11y for your scene\n- [`@react-three/gpu-pathtracer`](https://github.com/pmndrs/react-three-gpu-pathtracer) \u0026ndash; realistic path tracing\n- [`create-r3f-app next`](https://github.com/pmndrs/react-three-next) \u0026ndash; nextjs starter\n- [`lamina`](https://github.com/pmndrs/lamina) \u0026ndash; layer based shader materials\n- [`zustand`](https://github.com/pmndrs/zustand) \u0026ndash; flux based state management\n- [`jotai`](https://github.com/pmndrs/jotai) \u0026ndash; atoms based state management\n- [`valtio`](https://github.com/pmndrs/valtio) \u0026ndash; proxy based state management\n- [`react-spring`](https://github.com/pmndrs/react-spring) \u0026ndash; a spring-physics-based animation library\n- [`framer-motion-3d`](https://www.framer.com/docs/three-introduction/) \u0026ndash; framer motion, a popular animation library\n- [`use-gesture`](https://github.com/pmndrs/react-use-gesture) \u0026ndash; mouse/touch gestures\n- [`leva`](https://github.com/pmndrs/leva) \u0026ndash; create GUI controls in seconds\n- [`maath`](https://github.com/pmndrs/maath) \u0026ndash; a kitchen sink for math helpers\n- [`miniplex`](https://github.com/hmans/miniplex) \u0026ndash; ECS (entity management system)\n- [`composer-suite`](https://github.com/hmans/composer-suite) \u0026ndash; composing shaders, particles, effects and game mechanics\n\n# How to contribute\n\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`.\n\n#### Backers\n\nThank you to all our backers! 🙏\n\n\u003ca href=\"https://opencollective.com/react-three-fiber#backers\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://opencollective.com/react-three-fiber/backers.svg?width=890\"/\u003e\n\u003c/a\u003e\n\n#### Contributors\n\nThis project exists thanks to all the people who contribute.\n\n\u003ca href=\"https://github.com/pmndrs/react-three-fiber/graphs/contributors\"\u003e\n  \u003cimg src=\"https://opencollective.com/react-three-fiber/contributors.svg?width=890\" /\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsdouges%2Freact-three-fiber","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsdouges%2Freact-three-fiber","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsdouges%2Freact-three-fiber/lists"}