{"id":13401065,"url":"https://github.com/pmndrs/react-three-fiber","last_synced_at":"2026-01-18T08:01:51.246Z","repository":{"id":37005256,"uuid":"172521926","full_name":"pmndrs/react-three-fiber","owner":"pmndrs","description":"🇨🇭 A React renderer for Three.js","archived":false,"fork":false,"pushed_at":"2026-01-14T14:15:05.000Z","size":29117,"stargazers_count":30101,"open_issues_count":39,"forks_count":1768,"subscribers_count":210,"default_branch":"master","last_synced_at":"2026-01-14T17:31:38.926Z","etag":null,"topics":["3d","animation","fiber","react","renderer","threejs"],"latest_commit_sha":null,"homepage":"https://docs.pmnd.rs/react-three-fiber","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pmndrs.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"drcmda","open_collective":"react-three-fiber"}},"created_at":"2019-02-25T14:31:51.000Z","updated_at":"2026-01-14T15:57:04.000Z","dependencies_parsed_at":"2023-10-15T04:26:15.734Z","dependency_job_id":"19518ebb-f70d-41d7-b2fc-bf0f4a60186b","html_url":"https://github.com/pmndrs/react-three-fiber","commit_stats":{"total_commits":2423,"total_committers":228,"mean_commits":10.62719298245614,"dds":"0.41312422616591005","last_synced_commit":"d54c4bf3635beb4dc68afa08ac8bfdeba3b4dcf4"},"previous_names":["drcmda/react-three-fiber","react-spring/react-three-fiber"],"tags_count":491,"template":false,"template_full_name":null,"purl":"pkg:github/pmndrs/react-three-fiber","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmndrs%2Freact-three-fiber","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmndrs%2Freact-three-fiber/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmndrs%2Freact-three-fiber/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmndrs%2Freact-three-fiber/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pmndrs","download_url":"https://codeload.github.com/pmndrs/react-three-fiber/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmndrs%2Freact-three-fiber/sbom","scorecard":{"id":355378,"data":{"date":"2025-08-11","repo":{"name":"github.com/pmndrs/react-three-fiber","commit":"e53d667aa0326024be2772558a7a593e2bb825d3"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.7,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":3,"reason":"Found 6/19 approved changesets -- score normalized to 3","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Maintained","score":10,"reason":"24 commit(s) and 9 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/docs.yml:1","Warn: no topLevel permission defined: .github/workflows/test.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: third-party GitHubAction not pinned by hash: .github/workflows/docs.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/pmndrs/react-three-fiber/docs.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docs.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/pmndrs/react-three-fiber/docs.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/pmndrs/react-three-fiber/test.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/pmndrs/react-three-fiber/test.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/pmndrs/react-three-fiber/test.yml/master?enable=pin","Info:   0 out of   3 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   2 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 20 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"33 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-mv48-hcvh-8jj8","Warn: Project is vulnerable to: GHSA-353f-5xf4-qw67","Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw","Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g","Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3","Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx","Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6","Warn: Project is vulnerable to: GHSA-x574-m823-4x7w","Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8","Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x","Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4","Warn: Project is vulnerable to: GHSA-859w-5945-r5v3","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T09:25:11.584Z","repository_id":37005256,"created_at":"2025-08-18T09:25:11.584Z","updated_at":"2025-08-18T09:25:11.584Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28533746,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["3d","animation","fiber","react","renderer","threejs"],"created_at":"2024-07-30T19:00:58.321Z","updated_at":"2026-01-18T08:01:51.146Z","avatar_url":"https://github.com/pmndrs.png","language":"TypeScript","funding_links":["https://github.com/sponsors/drcmda","https://opencollective.com/react-three-fiber"],"categories":["Data Visualization","Uncategorized","十一、动画与交互","TypeScript","JS Chart Libraries","1. 框架集成（按前端框架分）","📖 Categories","3D","前端开发框架及项目","3d","UI Components","Related Frameworks","Requirements","react","🎨 Design \u0026 Creative","React [🔝](#readme)","Development","Libraries"],"sub_categories":["Uncategorized","3.  Immutable 工具（辅助状态管理）","React","Graphics \u0026 Animations","其他_文本生成、文本对话","3D and Games","A typical use-case","Frameworks and Libraries","Renderers","JavaScript"],"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\u003e [!WARNING]  \n\u003e Three-fiber is a React renderer, it must pair with a major version of React, just like react-dom, react-native, etc. @react-three/fiber@8 pairs with react@18, @react-three/fiber@9 pairs with react@19.\n\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 React's 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 intensity={Math.PI / 2} /\u003e\n    \u003cspotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} /\u003e\n    \u003cpointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} /\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 intensity={Math.PI / 2} /\u003e\n    \u003cspotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} /\u003e\n    \u003cpointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} /\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 intensity={Math.PI / 2} /\u003e\n      \u003cspotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} /\u003e\n      \u003cpointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} /\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://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:\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 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)\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/uikit`](https://github.com/pmndrs/uikit) \u0026ndash; WebGL rendered UI components for three-fiber\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/offscreen`](https://github.com/pmndrs/react-three-offscreen) \u0026ndash; offscreen/worker canvas for react-three-fiber\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- [`triplex`](https://triplex.dev/) \u0026ndash; visual editor for react-three-fiber\n- [`koestlich`](https://github.com/coconut-xr/koestlich) \u0026ndash; UI component library for react-three-fiber\n\n[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)\n\n# Who is using Three-fiber\n\nA small selection of companies and projects relying on three-fiber.\n\n- [`vercel`](https://www.vercel.com) (design agency)\n- [`basement`](https://basement.studio) (design agency)\n- [`studio freight`](https://studiofreight.com) (design agency)\n- [`14 islands`](https://www.14islands.com) (design agency)\n- [`ueno`](https://dribbble.com/ueno) (design agency) — [video](https://twitter.com/0xca0a/status/1204373807408013312)\n- [`flux.ai`](https://www.flux.ai) (PCB builder)\n- [`colorful.app`](https://www.colorful.app) (modeller)\n- [`bezi`](https://www.bezi.com) (modeller)\n- [`readyplayer.me`](https://readyplayer.me) (avatar configurator)\n- [`zillow`](https://www.zillow.com) (real estate)\n- [`lumalabs.ai/genie`](https://lumalabs.ai/genie) (AI models)\n- [`skybox.blockadelabs`](https://skybox.blockadelabs.com) (AI envmaps)\n- [`3dconfig`](https://3dconfig.com) (floor planer)\n- [`buerli.io`](https://buerli.io) (CAD)\n- [`getencube`](https://www.getencube.com) (CAD)\n- [`glowbuzzer`](https://www.glowbuzzer.com) (CAD) — [video](https://twitter.com/glowbuzzer/status/1678396014644940800)\n- [`triplex`](https://triplex.dev) (editor) — [video](https://twitter.com/_douges/status/1708859381369221539)\n- [`theatrejs`](https://www.theatrejs.com) (editor) — [video](https://twitter.com/0xca0a/status/1566838823170068480)\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%2Fpmndrs%2Freact-three-fiber","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpmndrs%2Freact-three-fiber","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmndrs%2Freact-three-fiber/lists"}