[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3586":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":33,"readmeContent":34,"aiSummary":35,"trendingCount":16,"starSnapshotCount":16,"syncStatus":36,"lastSyncTime":37,"discoverSource":38},3586,"react-three-fiber","pmndrs\u002Freact-three-fiber","pmndrs","🇨🇭 A React renderer for Three.js","https:\u002F\u002Fdocs.pmnd.rs\u002Freact-three-fiber",null,"TypeScript",31062,1858,210,14,0,8,54,385,38,44.81,"MIT License",false,"master",true,[27,28,29,30,31,32],"3d","animation","fiber","react","renderer","threejs","2026-06-12 02:00:51","\u003Ch1>@react-three\u002Ffiber\u003C\u002Fh1>\n\n[![Version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@react-three\u002Ffiber?style=flat&colorA=000000&colorB=000000)](https:\u002F\u002Fnpmjs.com\u002Fpackage\u002F@react-three\u002Ffiber)\n[![Downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002F@react-three\u002Ffiber.svg?style=flat&colorA=000000&colorB=000000)](https:\u002F\u002Fnpmjs.com\u002Fpackage\u002F@react-three\u002Ffiber)\n[![Twitter](https:\u002F\u002Fimg.shields.io\u002Ftwitter\u002Ffollow\u002Fpmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https:\u002F\u002Ftwitter.com\u002Fpmndrs)\n[![Discord](https:\u002F\u002Fimg.shields.io\u002Fdiscord\u002F740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000)](https:\u002F\u002Fdiscord.gg\u002FZZjjNvJ)\n[![Open Collective](https:\u002F\u002Fimg.shields.io\u002Fopencollective\u002Fall\u002Freact-three-fiber?style=flat&colorA=000000&colorB=000000)](https:\u002F\u002Fopencollective.com\u002Freact-three-fiber)\n[![ETH](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FETH-f5f5f5?style=flat&colorA=000000&colorB=000000)](https:\u002F\u002Fblockchain.com\u002Feth\u002Faddress\u002F0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682)\n[![BTC](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FBTC-f5f5f5?style=flat&colorA=000000&colorB=000000)](https:\u002F\u002Fblockchain.com\u002Fbtc\u002Faddress\u002F36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH)\n\n\u003Ca href=\"https:\u002F\u002Fdocs.pmnd.rs\u002Freact-three-fiber\u002Fgetting-started\u002Fexamples\">\u003Cimg src=\"docs\u002Fbanner-r3f.jpg\" \u002F>\u003C\u002Fa>\n\nreact-three-fiber is a \u003Ca href=\"https:\u002F\u002Freactjs.org\u002Fdocs\u002Fcodebase-overview.html#renderers\">React renderer\u003C\u002Fa> 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\u002Fthree @react-three\u002Ffiber\n```\n\n> [!WARNING]  \n> Three-fiber is a React renderer, it must pair with a major version of React, just like react-dom, react-native, etc. @react-three\u002Ffiber@8 pairs with react@18, @react-three\u002Ffiber@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 \u002F>` 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>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>Let's make a re-usable component that has its own state, reacts to user-input and participates in the render-loop. (\u003Ca href=\"https:\u002F\u002Fcodesandbox.io\u002Fs\u002Frrppl0y8l4?file=\u002Fsrc\u002FApp.js\">live demo\u003C\u002Fa>).\u003C\u002Ftd>\n      \u003Ctd>\n        \u003Ca href=\"https:\u002F\u002Fcodesandbox.io\u002Fs\u002Frrppl0y8l4\">\n          \u003Cimg src=\"\u002Fdocs\u002Fbasic-app.gif\" \u002F>\n        \u003C\u002Fa>\n      \u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n```jsx\nimport { createRoot } from 'react-dom\u002Fclient'\nimport React, { useRef, useState } from 'react'\nimport { Canvas, useFrame } from '@react-three\u002Ffiber'\n\nfunction Box(props) {\n  \u002F\u002F This reference gives us direct access to the THREE.Mesh object\n  const ref = useRef()\n  \u002F\u002F Hold state for hovered and clicked events\n  const [hovered, hover] = useState(false)\n  const [clicked, click] = useState(false)\n  \u002F\u002F Subscribe this component to the render-loop, rotate the mesh every frame\n  useFrame((state, delta) => (ref.current.rotation.x += delta))\n  \u002F\u002F 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) => click(!clicked)}\n      onPointerOver={(event) => hover(true)}\n      onPointerOut={(event) => hover(false)}>\n      \u003CboxGeometry args={[1, 1, 1]} \u002F>\n      \u003CmeshStandardMaterial color={hovered ? 'hotpink' : 'orange'} \u002F>\n    \u003C\u002Fmesh>\n  )\n}\n\ncreateRoot(document.getElementById('root')).render(\n  \u003CCanvas>\n    \u003CambientLight intensity={Math.PI \u002F 2} \u002F>\n    \u003CspotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} \u002F>\n    \u003CpointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} \u002F>\n    \u003CBox position={[-1.2, 0, 0]} \u002F>\n    \u003CBox position={[1.2, 0, 0]} \u002F>\n  \u003C\u002FCanvas>,\n)\n```\n\n\u003Cdetails>\n  \u003Csummary>Show TypeScript example\u003C\u002Fsummary>\n\n```bash\nnpm install @types\u002Fthree\n```\n\n```tsx\nimport * as THREE from 'three'\nimport { createRoot } from 'react-dom\u002Fclient'\nimport React, { useRef, useState } from 'react'\nimport { Canvas, useFrame, ThreeElements } from '@react-three\u002Ffiber'\n\nfunction Box(props: ThreeElements['mesh']) {\n  const ref = useRef\u003CTHREE.Mesh>(null!)\n  const [hovered, hover] = useState(false)\n  const [clicked, click] = useState(false)\n  useFrame((state, delta) => (ref.current.rotation.x += delta))\n  return (\n    \u003Cmesh\n      {...props}\n      ref={ref}\n      scale={clicked ? 1.5 : 1}\n      onClick={(event) => click(!clicked)}\n      onPointerOver={(event) => hover(true)}\n      onPointerOut={(event) => hover(false)}>\n      \u003CboxGeometry args={[1, 1, 1]} \u002F>\n      \u003CmeshStandardMaterial color={hovered ? 'hotpink' : 'orange'} \u002F>\n    \u003C\u002Fmesh>\n  )\n}\n\ncreateRoot(document.getElementById('root') as HTMLElement).render(\n  \u003CCanvas>\n    \u003CambientLight intensity={Math.PI \u002F 2} \u002F>\n    \u003CspotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} \u002F>\n    \u003CpointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} \u002F>\n    \u003CBox position={[-1.2, 0, 0]} \u002F>\n    \u003CBox position={[1.2, 0, 0]} \u002F>\n  \u003C\u002FCanvas>,\n)\n```\n\nLive demo: https:\u002F\u002Fcodesandbox.io\u002Fs\u002Ficy-tree-brnsm?file=\u002Fsrc\u002FApp.tsx\n\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n  \u003Csummary>Show React Native example\u003C\u002Fsummary>\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\u002Ffiber@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\u002F\u002F 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\u002Ffiber\u002Fnative'\nfunction Box(props) {\n  const mesh = useRef(null)\n  const [hovered, setHover] = useState(false)\n  const [active, setActive] = useState(false)\n  useFrame((state, delta) => (mesh.current.rotation.x += delta))\n  return (\n    \u003Cmesh\n      {...props}\n      ref={mesh}\n      scale={active ? 1.5 : 1}\n      onClick={(event) => setActive(!active)}\n      onPointerOver={(event) => setHover(true)}\n      onPointerOut={(event) => setHover(false)}>\n      \u003CboxGeometry args={[1, 1, 1]} \u002F>\n      \u003CmeshStandardMaterial color={hovered ? 'hotpink' : 'orange'} \u002F>\n    \u003C\u002Fmesh>\n  )\n}\nexport default function App() {\n  return (\n    \u003CCanvas>\n      \u003CambientLight intensity={Math.PI \u002F 2} \u002F>\n      \u003CspotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} \u002F>\n      \u003CpointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} \u002F>\n      \u003CBox position={[-1.2, 0, 0]} \u002F>\n      \u003CBox position={[1.2, 0, 0]} \u002F>\n    \u003C\u002FCanvas>\n  )\n}\n```\n\n\u003C\u002Fdetails>\n\n---\n\n# Documentation, tutorials, examples\n\nVisit [docs.pmnd.rs](https:\u002F\u002Fdocs.pmnd.rs\u002Freact-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:\u002F\u002Freact.dev\u002Flearn), especially [the section about hooks](https:\u002F\u002Freact.dev\u002Freference\u002Freact). 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:\u002F\u002Fthreejs.org\u002Fdocs\u002Findex.html#manual\u002Fen\u002Fintroduction\u002FCreating-a-scene). Keep that site open.\n2. When you know what a scene is, a camera, mesh, geometry, material, fork the [demo above](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Freact-three-fiber#what-does-it-look-like).\n3. [Look up](https:\u002F\u002Fthreejs.org\u002Fdocs\u002Findex.html#api\u002Fen\u002Fobjects\u002FMesh) 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:\u002F\u002Fdocs.pmnd.rs\u002Freact-three-fiber) to see what the various settings and hooks do.\n\nSome helpful material:\n\n- [Threejs-docs](https:\u002F\u002Fthreejs.org\u002Fdocs) and [examples](https:\u002F\u002Fthreejs.org\u002Fexamples)\n- [Discover Threejs](https:\u002F\u002Fdiscoverthreejs.com), especially the [Tips and Tricks](https:\u002F\u002Fdiscoverthreejs.com\u002Ftips-and-tricks) chapter for best practices\n- [Bruno Simons Threejs Journey](https:\u002F\u002Fthreejs-journey.com), arguably the best learning resource, now includes a full [R3F chapter](https:\u002F\u002Fthreejs-journey.com\u002Flessons\u002Fwhat-are-react-and-react-three-fiber)\n\n\u003Ca href=\"https:\u002F\u002Fthreejs-journey.com\">\u003Cimg src=\"docs\u002Fbanner-journey.jpg\" \u002F>\u003C\u002Fa>\n\n# Ecosystem\n\nThere is a vibrant and extensive ecosystem around three-fiber, full of libraries, helpers and abstractions.\n\n- [`@react-three\u002Fdrei`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Fdrei) – useful helpers, this is an ecosystem in itself\n- [`@react-three\u002Fgltfjsx`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Fgltfjsx) – turns GLTFs into JSX components\n- [`@react-three\u002Fpostprocessing`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Freact-postprocessing) – post-processing effects\n- [`@react-three\u002Fuikit`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Fuikit) – WebGL rendered UI components for three-fiber\n- [`@react-three\u002Ftest-renderer`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Freact-three-fiber\u002Ftree\u002Fmaster\u002Fpackages\u002Ftest-renderer) – for unit tests in node\n- [`@react-three\u002Foffscreen`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Freact-three-offscreen) – offscreen\u002Fworker canvas for react-three-fiber\n- [`@react-three\u002Fflex`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Freact-three-flex) – flexbox for react-three-fiber\n- [`@react-three\u002Fxr`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Freact-xr) – VR\u002FAR controllers and events\n- [`@react-three\u002Fcsg`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Freact-three-csg) – constructive solid geometry\n- [`@react-three\u002Frapier`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Freact-three-rapier) – 3D physics using Rapier\n- [`@react-three\u002Fcannon`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Fuse-cannon) – 3D physics using Cannon\n- [`@react-three\u002Fp2`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Fuse-p2) – 2D physics using P2\n- [`@react-three\u002Fa11y`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Freact-three-a11y) – real a11y for your scene\n- [`@react-three\u002Fgpu-pathtracer`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Freact-three-gpu-pathtracer) – realistic path tracing\n- [`create-r3f-app next`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Freact-three-next) – nextjs starter\n- [`lamina`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Flamina) – layer based shader materials\n- [`zustand`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Fzustand) – flux based state management\n- [`jotai`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Fjotai) – atoms based state management\n- [`valtio`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Fvaltio) – proxy based state management\n- [`react-spring`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Freact-spring) – a spring-physics-based animation library\n- [`framer-motion-3d`](https:\u002F\u002Fwww.framer.com\u002Fdocs\u002Fthree-introduction\u002F) – framer motion, a popular animation library\n- [`use-gesture`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Freact-use-gesture) – mouse\u002Ftouch gestures\n- [`leva`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Fleva) – create GUI controls in seconds\n- [`maath`](https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Fmaath) – a kitchen sink for math helpers\n- [`miniplex`](https:\u002F\u002Fgithub.com\u002Fhmans\u002Fminiplex) – ECS (entity management system)\n- [`composer-suite`](https:\u002F\u002Fgithub.com\u002Fhmans\u002Fcomposer-suite) – composing shaders, particles, effects and game mechanics\n- [`triplex`](https:\u002F\u002Ftriplex.dev\u002F) – visual editor for react-three-fiber\n- [`koestlich`](https:\u002F\u002Fgithub.com\u002Fcoconut-xr\u002Fkoestlich) – UI component library for react-three-fiber\n\n[Usage Trend of the @react-three Family](https:\u002F\u002Fnpm-compare.com\u002F@react-three\u002Fa11y,@react-three\u002Fcannon,@react-three\u002Fcsg,@react-three\u002Fdrei,@react-three\u002Fflex,@react-three\u002Fgltfjsx,@react-three\u002Fgpu-pathtracer,@react-three\u002Foffscreen,@react-three\u002Fp2,@react-three\u002Fpostprocessing,@react-three\u002Frapier,@react-three\u002Ftest-renderer,@react-three\u002Fuikit,@react-three\u002Fxr)\n\n# Who is using Three-fiber\n\nA small selection of companies and projects relying on three-fiber.\n\n- [`vercel`](https:\u002F\u002Fwww.vercel.com) (design agency)\n- [`basement`](https:\u002F\u002Fbasement.studio) (design agency)\n- [`studio freight`](https:\u002F\u002Fstudiofreight.com) (design agency)\n- [`14 islands`](https:\u002F\u002Fwww.14islands.com) (design agency)\n- [`ueno`](https:\u002F\u002Fdribbble.com\u002Fueno) (design agency) — [video](https:\u002F\u002Ftwitter.com\u002F0xca0a\u002Fstatus\u002F1204373807408013312)\n- [`flux.ai`](https:\u002F\u002Fwww.flux.ai) (PCB builder)\n- [`colorful.app`](https:\u002F\u002Fwww.colorful.app) (modeller)\n- [`bezi`](https:\u002F\u002Fwww.bezi.com) (modeller)\n- [`readyplayer.me`](https:\u002F\u002Freadyplayer.me) (avatar configurator)\n- [`zillow`](https:\u002F\u002Fwww.zillow.com) (real estate)\n- [`lumalabs.ai\u002Fgenie`](https:\u002F\u002Flumalabs.ai\u002Fgenie) (AI models)\n- [`skybox.blockadelabs`](https:\u002F\u002Fskybox.blockadelabs.com) (AI envmaps)\n- [`3dconfig`](https:\u002F\u002F3dconfig.com) (floor planer)\n- [`buerli.io`](https:\u002F\u002Fbuerli.io) (CAD)\n- [`getencube`](https:\u002F\u002Fwww.getencube.com) (CAD)\n- [`glowbuzzer`](https:\u002F\u002Fwww.glowbuzzer.com) (CAD) — [video](https:\u002F\u002Ftwitter.com\u002Fglowbuzzer\u002Fstatus\u002F1678396014644940800)\n- [`triplex`](https:\u002F\u002Ftriplex.dev) (editor) — [video](https:\u002F\u002Ftwitter.com\u002F_douges\u002Fstatus\u002F1708859381369221539)\n- [`theatrejs`](https:\u002F\u002Fwww.theatrejs.com) (editor) — [video](https:\u002F\u002Ftwitter.com\u002F0xca0a\u002Fstatus\u002F1566838823170068480)\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:\u002F\u002Fopencollective.com\u002Freact-three-fiber), or in crypto `BTC: 36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH`, `ETH: 0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682`.\n\n#### Backers\n\nThank you to all our backers! 🙏\n\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-three-fiber#backers\" target=\"_blank\">\n  \u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-three-fiber\u002Fbackers.svg?width=890\"\u002F>\n\u003C\u002Fa>\n\n#### Contributors\n\nThis project exists thanks to all the people who contribute.\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Freact-three-fiber\u002Fgraphs\u002Fcontributors\">\n  \u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-three-fiber\u002Fcontributors.svg?width=890\" \u002F>\n\u003C\u002Fa>\n","react-three-fiber 是一个用于 Three.js 的 React 渲染器，它允许开发者以声明式的方式构建 3D 场景。通过可复用、自包含的组件来响应状态变化，并且能够与 React 生态系统无缝集成，从而实现更高效的开发流程。该项目使用 TypeScript 编写，支持最新的 React 版本，并且在性能上不逊于原生 Three.js，甚至在大规模渲染时表现更佳。适用于需要结合 React 和 Three.js 来创建复杂或交互性高的 3D 应用场景，如游戏开发、虚拟现实体验或是数据可视化项目等。",2,"2026-06-11 02:54:47","top_language"]