{"owner":"pmndrs","repo":"react-three-fiber","hasSkills":true,"totalSkillsCount":5,"totalTokensCount":5138,"categories":["plugin-manifest","anthropic-skill"],"hasMcp":false,"mcpConfig":null,"found":["packages/eslint-plugin/README.md","packages/eslint-plugin/docs/rules/no-clone-in-loop.md","packages/eslint-plugin/docs/rules/no-new-in-loop.md","packages/fiber/readme.md","packages/test-renderer/README.md"],"skills":{"packages/eslint-plugin/README.md":"# @react-three/eslint-plugin\n\n[![Version](https://img.shields.io/npm/v/@react-three/eslint-plugin?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/eslint-plugin)\n[![Twitter](https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/pmndrs)\n[![Discord](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000)](https://discord.gg/ZZjjNvJ)\n[![Open Collective](https://img.shields.io/opencollective/all/react-three-fiber?style=flat&colorA=000000&colorB=000000)](https://opencollective.com/react-three-fiber)\n[![ETH](https://img.shields.io/badge/ETH-f5f5f5?style=flat&colorA=000000&colorB=000000)](https://blockchain.com/eth/address/0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682)\n[![BTC](https://img.shields.io/badge/BTC-f5f5f5?style=flat&colorA=000000&colorB=000000)](https://blockchain.com/btc/address/36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH)\n\nAn ESLint plugin which provides lint rules for [@react-three/fiber](https://github.com/pmndrs/react-three-fiber).\n\n## Installation\n\n```bash\nnpm install @react-three/eslint-plugin --save-dev\n```\n\n## Configuration\n\nUse the recommended [config](#recommended) to get reasonable defaults:\n\n```json\n\"extends\": [\n  \"plugin:@react-three/recommended\"\n]\n```\n\nIf you do not use a config you will need to specify individual rules and add extra configuration.\n\nAdd \"@react-three\" to the plugins section.\n\n```json\n\"plugins\": [\n  \"@react-three\"\n]\n```\n\nEnable the rules that you would like to use.\n\n```json\n\"rules\": {\n  \"@react-three/no-clone-in-frame-loop\": \"error\"\n}\n```\n\n## Rules\n\n✅ Enabled in the `recommended` [configuration](#recommended).<br>\n🔧 Automatically fixable by the `--fix` [CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).<br>\n💡 Manually fixable by [editor suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).\n\n<!-- START_RULE_CODEGEN -->\n<!-- @command yarn codegen:eslint -->\n\n| Rule                                                            | Description                                                                                | ✅  | 🔧  | 💡  |\n| --------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | --- | --- | --- |\n| <a href=\"./docs/rules/no-clone-in-loop.md\">no-clone-in-loop</a> | Disallow cloning vectors in the frame loop which can cause performance problems.           | ✅  |     |     |\n| <a href=\"./docs/rules/no-new-in-loop.md\">no-new-in-loop</a>     | Disallow instantiating new objects in the frame loop which can cause performance problems. | ✅  |     |     |\n\n<!-- END_CODEGEN -->\n\n## Shareable configs\n\n### Recommended\n\nThis plugin exports a `recommended` configuration that enforces rules appropriate for everyone using React Three Fiber.\n\n```json\n\"extends\": [\n  \"plugin:@react-three/recommended\"\n]\n```\n\n### All\n\nThis plugin also exports an `all` configuration that includes every available rule.\n\n```json\n\"extends\": [\n  \"plugin:@react-three/all\"\n]\n```\n","packages/eslint-plugin/docs/rules/no-clone-in-loop.md":"Cloning vectors in the frame loop instantiates new objects wasting large amounts of memory,\nwhich is especially bad for Three.js classes.\nInstead create once in a `useMemo` or a single shared reference outside of the component.\n\n#### ❌ Incorrect\n\nThis creates a new vector 60+ times a second allocating large amounts of memory.\n\n```js\nfunction Direction({ targetPosition }) {\n  const ref = useRef()\n\n  useFrame(() => {\n    const direction = ref.current.position.clone().sub(targetPosition).normalize()\n  })\n\n  return <mesh ref={ref} />\n}\n```\n\n#### ✅ Correct\n\nThis creates a vector outside of the frame loop to be reused each frame.\n\n```js\nconst tempVec = new THREE.Vector3()\n\nfunction Direction({ targetPosition }) {\n  const ref = useRef()\n\n  useFrame(() => {\n    const direction = tempVec.copy(ref.current.position).sub(targetPosition).normalize()\n  })\n\n  return <mesh ref={ref} />\n}\n```\n\nThis creates a vector once outside of the frame loop inside a `useMemo` to be reused each frame.\n\n```js\nfunction Direction({ targetPosition }) {\n  const ref = useRef()\n  const tempVec = useMemo(() => new THREE.Vector3())\n\n  useFrame(() => {\n    const direction = tempVec.copy(ref.current.position).sub(targetPosition).normalize()\n  })\n\n  return <mesh ref={ref} />\n}\n```\n","packages/eslint-plugin/docs/rules/no-new-in-loop.md":"Instantiating new objects in the frame loop can waste large amounts of memory,\nwhich is especially bad for large CPU containers such as Three.js classes and any GPU resource as there is no reliable garbage collection.\nInstead create once in a `useMemo` or a single shared reference outside of the component.\n\n#### ❌ Incorrect\n\nThis creates a new vector 60+ times a second allocating large amounts of memory.\n\n```js\nfunction MoveTowards({ x, y, z }) {\n  const ref = useRef()\n\n  useFrame(() => {\n    ref.current.position.lerp(new THREE.Vector3(x, y, z), 0.1)\n  })\n\n  return <mesh ref={ref} />\n}\n```\n\n#### ✅ Correct\n\nThis creates a vector outside of the frame loop to be reused each frame.\n\n```js\nconst tempVec = new THREE.Vector3()\n\nfunction MoveTowards({ x, y, z }) {\n  const ref = useRef()\n\n  useFrame(() => {\n    ref.current.position.lerp(tempVec.set(x, y, z), 0.1)\n  })\n\n  return <mesh ref={ref} />\n}\n```\n\nThis creates a vector once outside of the frame loop inside a `useMemo` to be reused each frame.\n\n```js\nfunction MoveTowards({ x, y, z }) {\n  const ref = useRef()\n  const tempVec = useMemo(() => new THREE.Vector3())\n\n  useFrame(() => {\n    ref.current.position.lerp(tempVec.set(x, y, z), 0.1)\n  })\n\n  return <mesh ref={ref} />\n}\n```\n","packages/fiber/readme.md":"<h1>react-three-fiber</h1>\n\n[![Version](https://img.shields.io/npm/v/@react-three/fiber?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/fiber)\n[![Downloads](https://img.shields.io/npm/dt/react-three-fiber.svg?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/fiber)\n[![Twitter](https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/pmndrs)\n[![Discord](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000)](https://discord.gg/ZZjjNvJ)\n[![Open Collective](https://img.shields.io/opencollective/all/react-three-fiber?style=flat&colorA=000000&colorB=000000)](https://opencollective.com/react-three-fiber)\n[![ETH](https://img.shields.io/badge/ETH-f5f5f5?style=flat&colorA=000000&colorB=000000)](https://blockchain.com/eth/address/0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682)\n[![BTC](https://img.shields.io/badge/BTC-f5f5f5?style=flat&colorA=000000&colorB=000000)](https://blockchain.com/btc/address/36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH)\n\nreact-three-fiber is a <a href=\"https://reactjs.org/docs/codebase-overview.html#renderers\">React renderer</a> 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 @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 React's scheduling abilities.\n\n#### Can it keep up with frequent feature updates to Threejs?\n\nYes. It merely expresses Threejs in JSX: `<mesh />` becomes `new THREE.Mesh()`, and that happens dynamically. 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<table>\n  <tbody>\n    <tr>\n      <td>Let's make a re-usable component that has its own state, reacts to user-input and participates in the render-loop. (<a href=\"https://codesandbox.io/s/rrppl0y8l4?file=/src/App.js\">live demo</a>).</td>\n      <td>\n        <a href=\"https://codesandbox.io/s/rrppl0y8l4\">\n          <img src=\"https://i.imgur.com/sS4ArrZ.gif\" />\n        </a>\n      </td>\n    </tr>\n  </tbody>\n</table>\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) => (ref.current.rotation.x += delta))\n  // Return the view, these are regular Threejs elements expressed in JSX\n  return (\n    <mesh\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      <boxGeometry args={[1, 1, 1]} />\n      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />\n    </mesh>\n  )\n}\n\ncreateRoot(document.getElementById('root')).render(\n  <Canvas>\n    <ambientLight />\n    <pointLight position={[10, 10, 10]} />\n    <Box position={[-1.2, 0, 0]} />\n    <Box position={[1.2, 0, 0]} />\n  </Canvas>,\n)\n```\n\n<details>\n  <summary>Show TypeScript example</summary>\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<THREE.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    <mesh\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      <boxGeometry args={[1, 1, 1]} />\n      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />\n    </mesh>\n  )\n}\n\ncreateRoot(document.getElementById('root') as HTMLElement).render(\n  <Canvas>\n    <ambientLight />\n    <pointLight position={[10, 10, 10]} />\n    <Box position={[-1.2, 0, 0]} />\n    <Box position={[1.2, 0, 0]} />\n  </Canvas>,\n)\n```\n\nLive demo: https://codesandbox.io/s/icy-tree-brnsm?file=/src/App.tsx\n\n</details>\n\n<details>\n  <summary>Show React Native example</summary>\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 react\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) => (mesh.current.rotation.x += delta))\n  return (\n    <mesh\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      <boxGeometry args={[1, 1, 1]} />\n      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />\n    </mesh>\n  )\n}\nexport default function App() {\n  return (\n    <Canvas>\n      <ambientLight />\n      <pointLight position={[10, 10, 10]} />\n      <Box position={[-1.2, 0, 0]} />\n      <Box position={[1.2, 0, 0]} />\n    </Canvas>\n  )\n}\n```\n\n</details>\n\n---\n\n# Documentation, tutorials, examples\n\nVisit [docs.pmnd.rs](https://docs.pmnd.rs/react-three-fiber)\n\n<a href=\"https://docs.pmnd.rs/react-three-fiber\"><img src=\"/docs/preview.jpg\"></a>\n\n# Fundamentals\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/manual/#en/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/API) to see what the various settings and hooks do.\n\nSome reading material:\n\n- [Threejs-docs](https://threejs.org/docs)\n- [Threejs-examples](https://threejs.org/examples)\n- [Threejs-fundamentals](https://threejs.org/manual/#en/fundamentals)\n- [three.js-journey](https://threejs-journey.com)\n- [Discover Threejs](https://discoverthreejs.com)\n- [Do's and don'ts](https://discoverthreejs.com/tips-and-tricks) for performance and best practices\n- [react-three-fiber alligator.io tutorial](https://alligator.io/react/react-with-threejs) by [@dghez\\_](https://twitter.com/dghez_)\n\n# Ecosystem\n\n- [`@react-three/gltfjsx`](https://github.com/pmndrs/gltfjsx) &ndash; turns GLTFs into JSX components\n- [`@react-three/drei`](https://github.com/pmndrs/drei) &ndash; useful helpers for react-three-fiber\n- [`@react-three/postprocessing`](https://github.com/pmndrs/react-postprocessing) &ndash; post-processing effects\n- [`@react-three/flex`](https://github.com/pmndrs/react-three-flex) &ndash; flexbox for react-three-fiber\n- [`@react-three/xr`](https://github.com/pmndrs/react-xr) &ndash; VR/AR controllers and events\n- [`@react-three/cannon`](https://github.com/pmndrs/use-cannon) &ndash; physics based hooks\n- [`@react-three/a11y`](https://github.com/pmndrs/react-three-a11y) &ndash; real a11y for your scene\n- [`zustand`](https://github.com/pmndrs/zustand) &ndash; state management\n- [`react-spring`](https://github.com/pmndrs/react-spring) &ndash; a spring-physics-based animation library\n- [`react-use-gesture`](https://github.com/pmndrs/react-use-gesture) &ndash; mouse/touch gestures\n- [`leva`](https://github.com/pmndrs/leva) &ndash; create GUI controls in seconds\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<a href=\"https://opencollective.com/react-three-fiber#backers\" target=\"_blank\">\n  <img src=\"https://opencollective.com/react-three-fiber/backers.svg?width=890\"/>\n</a>\n\n#### Contributors\n\nThis project exists thanks to all the people who contribute.\n\n<a href=\"https://github.com/pmndrs/react-three-fiber/graphs/contributors\">\n  <img src=\"https://opencollective.com/react-three-fiber/contributors.svg?width=890\" />\n</a>\n","packages/test-renderer/README.md":"# React Three Test Renderer ⚛️🔼🧪\n\n[![Version](https://img.shields.io/npm/v/@react-three/test-renderer?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/test-renderer)\n[![Downloads](https://img.shields.io/npm/dt/@react-three/test-renderer.svg?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/test-renderer)\n[![Twitter](https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/pmndrs)\n[![Twitter](https://img.shields.io/twitter/follow/_josh_ellis_?label=%40_josh_ellis_&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/_josh_ellis_)\n[![Discord](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000)](https://discord.gg/ZZjjNvJ)\n\n`@react-three/test-renderer` is a React testing <a href=\"https://reactjs.org/docs/codebase-overview.html#renderers\">renderer</a> for threejs in node.\n\n```bash\nyarn add @react-three/fiber three\nyarn add -D @react-three/test-renderer\n```\n\n---\n\n## The problem\n\nYou've written a complex and amazing webgl experience using [`@react-three/fiber`](https://github.com/pmndrs/react-three-fiber) and you want to test it to make sure it works even after you add even more features.\n\nYou go to use `react-dom` but hang on, `THREE` elements aren't in the DOM! You decide to use `@react-three/test-renderer` you can see the container & the canvas but you can't see the tree for the scene!? That's because `@react-three/fiber` renders to a different react root with it's own reconciler.\n\n## The solution\n\nYou use `@react-three/test-renderer` ⚛️-🔼-🧪, an experimental React renderer using `@react-three/fiber` under the hood to expose the scene graph wrapped in a test instance providing helpful utilities to test with.\n\nEssentially, this package makes it easy to grab a snapshot of the Scene Graph rendered by `three` without the need for webgl & browser.\n\n---\n\n## Usage\n\nRTTR is testing library agnostic, so we hope that it works with libraries such as [`jest`](https://jestjs.io/), [`jasmine`](https://jasmine.github.io/) etc.\n\n```tsx\nimport ReactThreeTestRenderer from '@react-three/test-renderer'\n\nconst renderer = await ReactThreeTestRenderer.create(\n  <mesh>\n    <boxGeometry args={[2, 2]} />\n    <meshStandardMaterial\n      args={[\n        {\n          color: 0x0000ff,\n        },\n      ]}\n    />\n  </mesh>,\n)\n\n// assertions using the TestInstance & Scene Graph\nconsole.log(renderer.toGraph())\n```\n\n---\n\n## API\n\n- [React Three Test Renderer API](/packages/test-renderer/markdown/rttr.md)\n- [React Three Test Instance API](/packages/test-renderer/markdown/rttr-instance.md)\n"},"files":{"packages/eslint-plugin/README.md":"# @react-three/eslint-plugin\n\n[![Version](https://img.shields.io/npm/v/@react-three/eslint-plugin?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/eslint-plugin)\n[![Twitter](https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/pmndrs)\n[![Discord](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000)](https://discord.gg/ZZjjNvJ)\n[![Open Collective](https://img.shields.io/opencollective/all/react-three-fiber?style=flat&colorA=000000&colorB=000000)](https://opencollective.com/react-three-fiber)\n[![ETH](https://img.shields.io/badge/ETH-f5f5f5?style=flat&colorA=000000&colorB=000000)](https://blockchain.com/eth/address/0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682)\n[![BTC](https://img.shields.io/badge/BTC-f5f5f5?style=flat&colorA=000000&colorB=000000)](https://blockchain.com/btc/address/36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH)\n\nAn ESLint plugin which provides lint rules for [@react-three/fiber](https://github.com/pmndrs/react-three-fiber).\n\n## Installation\n\n```bash\nnpm install @react-three/eslint-plugin --save-dev\n```\n\n## Configuration\n\nUse the recommended [config](#recommended) to get reasonable defaults:\n\n```json\n\"extends\": [\n  \"plugin:@react-three/recommended\"\n]\n```\n\nIf you do not use a config you will need to specify individual rules and add extra configuration.\n\nAdd \"@react-three\" to the plugins section.\n\n```json\n\"plugins\": [\n  \"@react-three\"\n]\n```\n\nEnable the rules that you would like to use.\n\n```json\n\"rules\": {\n  \"@react-three/no-clone-in-frame-loop\": \"error\"\n}\n```\n\n## Rules\n\n✅ Enabled in the `recommended` [configuration](#recommended).<br>\n🔧 Automatically fixable by the `--fix` [CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).<br>\n💡 Manually fixable by [editor suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).\n\n<!-- START_RULE_CODEGEN -->\n<!-- @command yarn codegen:eslint -->\n\n| Rule                                                            | Description                                                                                | ✅  | 🔧  | 💡  |\n| --------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | --- | --- | --- |\n| <a href=\"./docs/rules/no-clone-in-loop.md\">no-clone-in-loop</a> | Disallow cloning vectors in the frame loop which can cause performance problems.           | ✅  |     |     |\n| <a href=\"./docs/rules/no-new-in-loop.md\">no-new-in-loop</a>     | Disallow instantiating new objects in the frame loop which can cause performance problems. | ✅  |     |     |\n\n<!-- END_CODEGEN -->\n\n## Shareable configs\n\n### Recommended\n\nThis plugin exports a `recommended` configuration that enforces rules appropriate for everyone using React Three Fiber.\n\n```json\n\"extends\": [\n  \"plugin:@react-three/recommended\"\n]\n```\n\n### All\n\nThis plugin also exports an `all` configuration that includes every available rule.\n\n```json\n\"extends\": [\n  \"plugin:@react-three/all\"\n]\n```\n","packages/eslint-plugin/docs/rules/no-clone-in-loop.md":"Cloning vectors in the frame loop instantiates new objects wasting large amounts of memory,\nwhich is especially bad for Three.js classes.\nInstead create once in a `useMemo` or a single shared reference outside of the component.\n\n#### ❌ Incorrect\n\nThis creates a new vector 60+ times a second allocating large amounts of memory.\n\n```js\nfunction Direction({ targetPosition }) {\n  const ref = useRef()\n\n  useFrame(() => {\n    const direction = ref.current.position.clone().sub(targetPosition).normalize()\n  })\n\n  return <mesh ref={ref} />\n}\n```\n\n#### ✅ Correct\n\nThis creates a vector outside of the frame loop to be reused each frame.\n\n```js\nconst tempVec = new THREE.Vector3()\n\nfunction Direction({ targetPosition }) {\n  const ref = useRef()\n\n  useFrame(() => {\n    const direction = tempVec.copy(ref.current.position).sub(targetPosition).normalize()\n  })\n\n  return <mesh ref={ref} />\n}\n```\n\nThis creates a vector once outside of the frame loop inside a `useMemo` to be reused each frame.\n\n```js\nfunction Direction({ targetPosition }) {\n  const ref = useRef()\n  const tempVec = useMemo(() => new THREE.Vector3())\n\n  useFrame(() => {\n    const direction = tempVec.copy(ref.current.position).sub(targetPosition).normalize()\n  })\n\n  return <mesh ref={ref} />\n}\n```\n","packages/eslint-plugin/docs/rules/no-new-in-loop.md":"Instantiating new objects in the frame loop can waste large amounts of memory,\nwhich is especially bad for large CPU containers such as Three.js classes and any GPU resource as there is no reliable garbage collection.\nInstead create once in a `useMemo` or a single shared reference outside of the component.\n\n#### ❌ Incorrect\n\nThis creates a new vector 60+ times a second allocating large amounts of memory.\n\n```js\nfunction MoveTowards({ x, y, z }) {\n  const ref = useRef()\n\n  useFrame(() => {\n    ref.current.position.lerp(new THREE.Vector3(x, y, z), 0.1)\n  })\n\n  return <mesh ref={ref} />\n}\n```\n\n#### ✅ Correct\n\nThis creates a vector outside of the frame loop to be reused each frame.\n\n```js\nconst tempVec = new THREE.Vector3()\n\nfunction MoveTowards({ x, y, z }) {\n  const ref = useRef()\n\n  useFrame(() => {\n    ref.current.position.lerp(tempVec.set(x, y, z), 0.1)\n  })\n\n  return <mesh ref={ref} />\n}\n```\n\nThis creates a vector once outside of the frame loop inside a `useMemo` to be reused each frame.\n\n```js\nfunction MoveTowards({ x, y, z }) {\n  const ref = useRef()\n  const tempVec = useMemo(() => new THREE.Vector3())\n\n  useFrame(() => {\n    ref.current.position.lerp(tempVec.set(x, y, z), 0.1)\n  })\n\n  return <mesh ref={ref} />\n}\n```\n","packages/fiber/readme.md":"<h1>react-three-fiber</h1>\n\n[![Version](https://img.shields.io/npm/v/@react-three/fiber?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/fiber)\n[![Downloads](https://img.shields.io/npm/dt/react-three-fiber.svg?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/fiber)\n[![Twitter](https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/pmndrs)\n[![Discord](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000)](https://discord.gg/ZZjjNvJ)\n[![Open Collective](https://img.shields.io/opencollective/all/react-three-fiber?style=flat&colorA=000000&colorB=000000)](https://opencollective.com/react-three-fiber)\n[![ETH](https://img.shields.io/badge/ETH-f5f5f5?style=flat&colorA=000000&colorB=000000)](https://blockchain.com/eth/address/0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682)\n[![BTC](https://img.shields.io/badge/BTC-f5f5f5?style=flat&colorA=000000&colorB=000000)](https://blockchain.com/btc/address/36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH)\n\nreact-three-fiber is a <a href=\"https://reactjs.org/docs/codebase-overview.html#renderers\">React renderer</a> 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 @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 React's scheduling abilities.\n\n#### Can it keep up with frequent feature updates to Threejs?\n\nYes. It merely expresses Threejs in JSX: `<mesh />` becomes `new THREE.Mesh()`, and that happens dynamically. 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<table>\n  <tbody>\n    <tr>\n      <td>Let's make a re-usable component that has its own state, reacts to user-input and participates in the render-loop. (<a href=\"https://codesandbox.io/s/rrppl0y8l4?file=/src/App.js\">live demo</a>).</td>\n      <td>\n        <a href=\"https://codesandbox.io/s/rrppl0y8l4\">\n          <img src=\"https://i.imgur.com/sS4ArrZ.gif\" />\n        </a>\n      </td>\n    </tr>\n  </tbody>\n</table>\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) => (ref.current.rotation.x += delta))\n  // Return the view, these are regular Threejs elements expressed in JSX\n  return (\n    <mesh\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      <boxGeometry args={[1, 1, 1]} />\n      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />\n    </mesh>\n  )\n}\n\ncreateRoot(document.getElementById('root')).render(\n  <Canvas>\n    <ambientLight />\n    <pointLight position={[10, 10, 10]} />\n    <Box position={[-1.2, 0, 0]} />\n    <Box position={[1.2, 0, 0]} />\n  </Canvas>,\n)\n```\n\n<details>\n  <summary>Show TypeScript example</summary>\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<THREE.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    <mesh\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      <boxGeometry args={[1, 1, 1]} />\n      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />\n    </mesh>\n  )\n}\n\ncreateRoot(document.getElementById('root') as HTMLElement).render(\n  <Canvas>\n    <ambientLight />\n    <pointLight position={[10, 10, 10]} />\n    <Box position={[-1.2, 0, 0]} />\n    <Box position={[1.2, 0, 0]} />\n  </Canvas>,\n)\n```\n\nLive demo: https://codesandbox.io/s/icy-tree-brnsm?file=/src/App.tsx\n\n</details>\n\n<details>\n  <summary>Show React Native example</summary>\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 react\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) => (mesh.current.rotation.x += delta))\n  return (\n    <mesh\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      <boxGeometry args={[1, 1, 1]} />\n      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />\n    </mesh>\n  )\n}\nexport default function App() {\n  return (\n    <Canvas>\n      <ambientLight />\n      <pointLight position={[10, 10, 10]} />\n      <Box position={[-1.2, 0, 0]} />\n      <Box position={[1.2, 0, 0]} />\n    </Canvas>\n  )\n}\n```\n\n</details>\n\n---\n\n# Documentation, tutorials, examples\n\nVisit [docs.pmnd.rs](https://docs.pmnd.rs/react-three-fiber)\n\n<a href=\"https://docs.pmnd.rs/react-three-fiber\"><img src=\"/docs/preview.jpg\"></a>\n\n# Fundamentals\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/manual/#en/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/API) to see what the various settings and hooks do.\n\nSome reading material:\n\n- [Threejs-docs](https://threejs.org/docs)\n- [Threejs-examples](https://threejs.org/examples)\n- [Threejs-fundamentals](https://threejs.org/manual/#en/fundamentals)\n- [three.js-journey](https://threejs-journey.com)\n- [Discover Threejs](https://discoverthreejs.com)\n- [Do's and don'ts](https://discoverthreejs.com/tips-and-tricks) for performance and best practices\n- [react-three-fiber alligator.io tutorial](https://alligator.io/react/react-with-threejs) by [@dghez\\_](https://twitter.com/dghez_)\n\n# Ecosystem\n\n- [`@react-three/gltfjsx`](https://github.com/pmndrs/gltfjsx) &ndash; turns GLTFs into JSX components\n- [`@react-three/drei`](https://github.com/pmndrs/drei) &ndash; useful helpers for react-three-fiber\n- [`@react-three/postprocessing`](https://github.com/pmndrs/react-postprocessing) &ndash; post-processing effects\n- [`@react-three/flex`](https://github.com/pmndrs/react-three-flex) &ndash; flexbox for react-three-fiber\n- [`@react-three/xr`](https://github.com/pmndrs/react-xr) &ndash; VR/AR controllers and events\n- [`@react-three/cannon`](https://github.com/pmndrs/use-cannon) &ndash; physics based hooks\n- [`@react-three/a11y`](https://github.com/pmndrs/react-three-a11y) &ndash; real a11y for your scene\n- [`zustand`](https://github.com/pmndrs/zustand) &ndash; state management\n- [`react-spring`](https://github.com/pmndrs/react-spring) &ndash; a spring-physics-based animation library\n- [`react-use-gesture`](https://github.com/pmndrs/react-use-gesture) &ndash; mouse/touch gestures\n- [`leva`](https://github.com/pmndrs/leva) &ndash; create GUI controls in seconds\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<a href=\"https://opencollective.com/react-three-fiber#backers\" target=\"_blank\">\n  <img src=\"https://opencollective.com/react-three-fiber/backers.svg?width=890\"/>\n</a>\n\n#### Contributors\n\nThis project exists thanks to all the people who contribute.\n\n<a href=\"https://github.com/pmndrs/react-three-fiber/graphs/contributors\">\n  <img src=\"https://opencollective.com/react-three-fiber/contributors.svg?width=890\" />\n</a>\n","packages/test-renderer/README.md":"# React Three Test Renderer ⚛️🔼🧪\n\n[![Version](https://img.shields.io/npm/v/@react-three/test-renderer?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/test-renderer)\n[![Downloads](https://img.shields.io/npm/dt/@react-three/test-renderer.svg?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/test-renderer)\n[![Twitter](https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/pmndrs)\n[![Twitter](https://img.shields.io/twitter/follow/_josh_ellis_?label=%40_josh_ellis_&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/_josh_ellis_)\n[![Discord](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000)](https://discord.gg/ZZjjNvJ)\n\n`@react-three/test-renderer` is a React testing <a href=\"https://reactjs.org/docs/codebase-overview.html#renderers\">renderer</a> for threejs in node.\n\n```bash\nyarn add @react-three/fiber three\nyarn add -D @react-three/test-renderer\n```\n\n---\n\n## The problem\n\nYou've written a complex and amazing webgl experience using [`@react-three/fiber`](https://github.com/pmndrs/react-three-fiber) and you want to test it to make sure it works even after you add even more features.\n\nYou go to use `react-dom` but hang on, `THREE` elements aren't in the DOM! You decide to use `@react-three/test-renderer` you can see the container & the canvas but you can't see the tree for the scene!? That's because `@react-three/fiber` renders to a different react root with it's own reconciler.\n\n## The solution\n\nYou use `@react-three/test-renderer` ⚛️-🔼-🧪, an experimental React renderer using `@react-three/fiber` under the hood to expose the scene graph wrapped in a test instance providing helpful utilities to test with.\n\nEssentially, this package makes it easy to grab a snapshot of the Scene Graph rendered by `three` without the need for webgl & browser.\n\n---\n\n## Usage\n\nRTTR is testing library agnostic, so we hope that it works with libraries such as [`jest`](https://jestjs.io/), [`jasmine`](https://jasmine.github.io/) etc.\n\n```tsx\nimport ReactThreeTestRenderer from '@react-three/test-renderer'\n\nconst renderer = await ReactThreeTestRenderer.create(\n  <mesh>\n    <boxGeometry args={[2, 2]} />\n    <meshStandardMaterial\n      args={[\n        {\n          color: 0x0000ff,\n        },\n      ]}\n    />\n  </mesh>,\n)\n\n// assertions using the TestInstance & Scene Graph\nconsole.log(renderer.toGraph())\n```\n\n---\n\n## API\n\n- [React Three Test Renderer API](/packages/test-renderer/markdown/rttr.md)\n- [React Three Test Instance API](/packages/test-renderer/markdown/rttr-instance.md)\n"},"items":[{"name":"no-clone-in-loop.md","path":"packages/eslint-plugin/docs/rules/no-clone-in-loop.md","rawUrl":"https://raw.githubusercontent.com/pmndrs/react-three-fiber/HEAD/packages/eslint-plugin/docs/rules/no-clone-in-loop.md","title":"Rules Skill","category":"anthropic-skill","format":"markdown","content":"Cloning vectors in the frame loop instantiates new objects wasting large amounts of memory,\nwhich is especially bad for Three.js classes.\nInstead create once in a `useMemo` or a single shared reference outside of the component.\n\n#### ❌ Incorrect\n\nThis creates a new vector 60+ times a second allocating large amounts of memory.\n\n```js\nfunction Direction({ targetPosition }) {\n  const ref = useRef()\n\n  useFrame(() => {\n    const direction = ref.current.position.clone().sub(targetPosition).normalize()\n  })\n\n  return <mesh ref={ref} />\n}\n```\n\n#### ✅ Correct\n\nThis creates a vector outside of the frame loop to be reused each frame.\n\n```js\nconst tempVec = new THREE.Vector3()\n\nfunction Direction({ targetPosition }) {\n  const ref = useRef()\n\n  useFrame(() => {\n    const direction = tempVec.copy(ref.current.position).sub(targetPosition).normalize()\n  })\n\n  return <mesh ref={ref} />\n}\n```\n\nThis creates a vector once outside of the frame loop inside a `useMemo` to be reused each frame.\n\n```js\nfunction Direction({ targetPosition }) {\n  const ref = useRef()\n  const tempVec = useMemo(() => new THREE.Vector3())\n\n  useFrame(() => {\n    const direction = tempVec.copy(ref.current.position).sub(targetPosition).normalize()\n  })\n\n  return <mesh ref={ref} />\n}\n```\n","isInternal":false,"tokens":288,"sizeBytes":1264},{"name":"no-new-in-loop.md","path":"packages/eslint-plugin/docs/rules/no-new-in-loop.md","rawUrl":"https://raw.githubusercontent.com/pmndrs/react-three-fiber/HEAD/packages/eslint-plugin/docs/rules/no-new-in-loop.md","title":"Rules Skill","category":"anthropic-skill","format":"markdown","content":"Instantiating new objects in the frame loop can waste large amounts of memory,\nwhich is especially bad for large CPU containers such as Three.js classes and any GPU resource as there is no reliable garbage collection.\nInstead create once in a `useMemo` or a single shared reference outside of the component.\n\n#### ❌ Incorrect\n\nThis creates a new vector 60+ times a second allocating large amounts of memory.\n\n```js\nfunction MoveTowards({ x, y, z }) {\n  const ref = useRef()\n\n  useFrame(() => {\n    ref.current.position.lerp(new THREE.Vector3(x, y, z), 0.1)\n  })\n\n  return <mesh ref={ref} />\n}\n```\n\n#### ✅ Correct\n\nThis creates a vector outside of the frame loop to be reused each frame.\n\n```js\nconst tempVec = new THREE.Vector3()\n\nfunction MoveTowards({ x, y, z }) {\n  const ref = useRef()\n\n  useFrame(() => {\n    ref.current.position.lerp(tempVec.set(x, y, z), 0.1)\n  })\n\n  return <mesh ref={ref} />\n}\n```\n\nThis creates a vector once outside of the frame loop inside a `useMemo` to be reused each frame.\n\n```js\nfunction MoveTowards({ x, y, z }) {\n  const ref = useRef()\n  const tempVec = useMemo(() => new THREE.Vector3())\n\n  useFrame(() => {\n    ref.current.position.lerp(tempVec.set(x, y, z), 0.1)\n  })\n\n  return <mesh ref={ref} />\n}\n```\n","isInternal":false,"tokens":326,"sizeBytes":1245},{"name":"README.md","path":"packages/eslint-plugin/README.md","rawUrl":"https://raw.githubusercontent.com/pmndrs/react-three-fiber/HEAD/packages/eslint-plugin/README.md","title":"eslint-plugin Documentation","category":"plugin-manifest","format":"markdown","content":"# @react-three/eslint-plugin\n\n[![Version](https://img.shields.io/npm/v/@react-three/eslint-plugin?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/eslint-plugin)\n[![Twitter](https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/pmndrs)\n[![Discord](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000)](https://discord.gg/ZZjjNvJ)\n[![Open Collective](https://img.shields.io/opencollective/all/react-three-fiber?style=flat&colorA=000000&colorB=000000)](https://opencollective.com/react-three-fiber)\n[![ETH](https://img.shields.io/badge/ETH-f5f5f5?style=flat&colorA=000000&colorB=000000)](https://blockchain.com/eth/address/0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682)\n[![BTC](https://img.shields.io/badge/BTC-f5f5f5?style=flat&colorA=000000&colorB=000000)](https://blockchain.com/btc/address/36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH)\n\nAn ESLint plugin which provides lint rules for [@react-three/fiber](https://github.com/pmndrs/react-three-fiber).\n\n## Installation\n\n```bash\nnpm install @react-three/eslint-plugin --save-dev\n```\n\n## Configuration\n\nUse the recommended [config](#recommended) to get reasonable defaults:\n\n```json\n\"extends\": [\n  \"plugin:@react-three/recommended\"\n]\n```\n\nIf you do not use a config you will need to specify individual rules and add extra configuration.\n\nAdd \"@react-three\" to the plugins section.\n\n```json\n\"plugins\": [\n  \"@react-three\"\n]\n```\n\nEnable the rules that you would like to use.\n\n```json\n\"rules\": {\n  \"@react-three/no-clone-in-frame-loop\": \"error\"\n}\n```\n\n## Rules\n\n✅ Enabled in the `recommended` [configuration](#recommended).<br>\n🔧 Automatically fixable by the `--fix` [CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).<br>\n💡 Manually fixable by [editor suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).\n\n<!-- START_RULE_CODEGEN -->\n<!-- @command yarn codegen:eslint -->\n\n| Rule                                                            | Description                                                                                | ✅  | 🔧  | 💡  |\n| --------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | --- | --- | --- |\n| <a href=\"./docs/rules/no-clone-in-loop.md\">no-clone-in-loop</a> | Disallow cloning vectors in the frame loop which can cause performance problems.           | ✅  |     |     |\n| <a href=\"./docs/rules/no-new-in-loop.md\">no-new-in-loop</a>     | Disallow instantiating new objects in the frame loop which can cause performance problems. | ✅  |     |     |\n\n<!-- END_CODEGEN -->\n\n## Shareable configs\n\n### Recommended\n\nThis plugin exports a `recommended` configuration that enforces rules appropriate for everyone using React Three Fiber.\n\n```json\n\"extends\": [\n  \"plugin:@react-three/recommended\"\n]\n```\n\n### All\n\nThis plugin also exports an `all` configuration that includes every available rule.\n\n```json\n\"extends\": [\n  \"plugin:@react-three/all\"\n]\n```\n","isInternal":false,"tokens":854,"sizeBytes":3220},{"name":"readme.md","path":"packages/fiber/readme.md","rawUrl":"https://raw.githubusercontent.com/pmndrs/react-three-fiber/HEAD/packages/fiber/readme.md","title":"fiber Documentation","category":"plugin-manifest","format":"markdown","content":"<h1>react-three-fiber</h1>\n\n[![Version](https://img.shields.io/npm/v/@react-three/fiber?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/fiber)\n[![Downloads](https://img.shields.io/npm/dt/react-three-fiber.svg?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/fiber)\n[![Twitter](https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/pmndrs)\n[![Discord](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000)](https://discord.gg/ZZjjNvJ)\n[![Open Collective](https://img.shields.io/opencollective/all/react-three-fiber?style=flat&colorA=000000&colorB=000000)](https://opencollective.com/react-three-fiber)\n[![ETH](https://img.shields.io/badge/ETH-f5f5f5?style=flat&colorA=000000&colorB=000000)](https://blockchain.com/eth/address/0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682)\n[![BTC](https://img.shields.io/badge/BTC-f5f5f5?style=flat&colorA=000000&colorB=000000)](https://blockchain.com/btc/address/36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH)\n\nreact-three-fiber is a <a href=\"https://reactjs.org/docs/codebase-overview.html#renderers\">React renderer</a> 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 @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 React's scheduling abilities.\n\n#### Can it keep up with frequent feature updates to Threejs?\n\nYes. It merely expresses Threejs in JSX: `<mesh />` becomes `new THREE.Mesh()`, and that happens dynamically. 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<table>\n  <tbody>\n    <tr>\n      <td>Let's make a re-usable component that has its own state, reacts to user-input and participates in the render-loop. (<a href=\"https://codesandbox.io/s/rrppl0y8l4?file=/src/App.js\">live demo</a>).</td>\n      <td>\n        <a href=\"https://codesandbox.io/s/rrppl0y8l4\">\n          <img src=\"https://i.imgur.com/sS4ArrZ.gif\" />\n        </a>\n      </td>\n    </tr>\n  </tbody>\n</table>\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) => (ref.current.rotation.x += delta))\n  // Return the view, these are regular Threejs elements expressed in JSX\n  return (\n    <mesh\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      <boxGeometry args={[1, 1, 1]} />\n      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />\n    </mesh>\n  )\n}\n\ncreateRoot(document.getElementById('root')).render(\n  <Canvas>\n    <ambientLight />\n    <pointLight position={[10, 10, 10]} />\n    <Box position={[-1.2, 0, 0]} />\n    <Box position={[1.2, 0, 0]} />\n  </Canvas>,\n)\n```\n\n<details>\n  <summary>Show TypeScript example</summary>\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<THREE.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    <mesh\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      <boxGeometry args={[1, 1, 1]} />\n      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />\n    </mesh>\n  )\n}\n\ncreateRoot(document.getElementById('root') as HTMLElement).render(\n  <Canvas>\n    <ambientLight />\n    <pointLight position={[10, 10, 10]} />\n    <Box position={[-1.2, 0, 0]} />\n    <Box position={[1.2, 0, 0]} />\n  </Canvas>,\n)\n```\n\nLive demo: https://codesandbox.io/s/icy-tree-brnsm?file=/src/App.tsx\n\n</details>\n\n<details>\n  <summary>Show React Native example</summary>\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 react\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) => (mesh.current.rotation.x += delta))\n  return (\n    <mesh\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      <boxGeometry args={[1, 1, 1]} />\n      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />\n    </mesh>\n  )\n}\nexport default function App() {\n  return (\n    <Canvas>\n      <ambientLight />\n      <pointLight position={[10, 10, 10]} />\n      <Box position={[-1.2, 0, 0]} />\n      <Box position={[1.2, 0, 0]} />\n    </Canvas>\n  )\n}\n```\n\n</details>\n\n---\n\n# Documentation, tutorials, examples\n\nVisit [docs.pmnd.rs](https://docs.pmnd.rs/react-three-fiber)\n\n<a href=\"https://docs.pmnd.rs/react-three-fiber\"><img src=\"/docs/preview.jpg\"></a>\n\n# Fundamentals\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/manual/#en/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/API) to see what the various settings and hooks do.\n\nSome reading material:\n\n- [Threejs-docs](https://threejs.org/docs)\n- [Threejs-examples](https://threejs.org/examples)\n- [Threejs-fundamentals](https://threejs.org/manual/#en/fundamentals)\n- [three.js-journey](https://threejs-journey.com)\n- [Discover Threejs](https://discoverthreejs.com)\n- [Do's and don'ts](https://discoverthreejs.com/tips-and-tricks) for performance and best practices\n- [react-three-fiber alligator.io tutorial](https://alligator.io/react/react-with-threejs) by [@dghez\\_](https://twitter.com/dghez_)\n\n# Ecosystem\n\n- [`@react-three/gltfjsx`](https://github.com/pmndrs/gltfjsx) &ndash; turns GLTFs into JSX components\n- [`@react-three/drei`](https://github.com/pmndrs/drei) &ndash; useful helpers for react-three-fiber\n- [`@react-three/postprocessing`](https://github.com/pmndrs/react-postprocessing) &ndash; post-processing effects\n- [`@react-three/flex`](https://github.com/pmndrs/react-three-flex) &ndash; flexbox for react-three-fiber\n- [`@react-three/xr`](https://github.com/pmndrs/react-xr) &ndash; VR/AR controllers and events\n- [`@react-three/cannon`](https://github.com/pmndrs/use-cannon) &ndash; physics based hooks\n- [`@react-three/a11y`](https://github.com/pmndrs/react-three-a11y) &ndash; real a11y for your scene\n- [`zustand`](https://github.com/pmndrs/zustand) &ndash; state management\n- [`react-spring`](https://github.com/pmndrs/react-spring) &ndash; a spring-physics-based animation library\n- [`react-use-gesture`](https://github.com/pmndrs/react-use-gesture) &ndash; mouse/touch gestures\n- [`leva`](https://github.com/pmndrs/leva) &ndash; create GUI controls in seconds\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<a href=\"https://opencollective.com/react-three-fiber#backers\" target=\"_blank\">\n  <img src=\"https://opencollective.com/react-three-fiber/backers.svg?width=890\"/>\n</a>\n\n#### Contributors\n\nThis project exists thanks to all the people who contribute.\n\n<a href=\"https://github.com/pmndrs/react-three-fiber/graphs/contributors\">\n  <img src=\"https://opencollective.com/react-three-fiber/contributors.svg?width=890\" />\n</a>\n","isInternal":false,"tokens":2893,"sizeBytes":10080},{"name":"README.md","path":"packages/test-renderer/README.md","rawUrl":"https://raw.githubusercontent.com/pmndrs/react-three-fiber/HEAD/packages/test-renderer/README.md","title":"test-renderer Documentation","category":"plugin-manifest","format":"markdown","content":"# React Three Test Renderer ⚛️🔼🧪\n\n[![Version](https://img.shields.io/npm/v/@react-three/test-renderer?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/test-renderer)\n[![Downloads](https://img.shields.io/npm/dt/@react-three/test-renderer.svg?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/test-renderer)\n[![Twitter](https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/pmndrs)\n[![Twitter](https://img.shields.io/twitter/follow/_josh_ellis_?label=%40_josh_ellis_&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/_josh_ellis_)\n[![Discord](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000)](https://discord.gg/ZZjjNvJ)\n\n`@react-three/test-renderer` is a React testing <a href=\"https://reactjs.org/docs/codebase-overview.html#renderers\">renderer</a> for threejs in node.\n\n```bash\nyarn add @react-three/fiber three\nyarn add -D @react-three/test-renderer\n```\n\n---\n\n## The problem\n\nYou've written a complex and amazing webgl experience using [`@react-three/fiber`](https://github.com/pmndrs/react-three-fiber) and you want to test it to make sure it works even after you add even more features.\n\nYou go to use `react-dom` but hang on, `THREE` elements aren't in the DOM! You decide to use `@react-three/test-renderer` you can see the container & the canvas but you can't see the tree for the scene!? That's because `@react-three/fiber` renders to a different react root with it's own reconciler.\n\n## The solution\n\nYou use `@react-three/test-renderer` ⚛️-🔼-🧪, an experimental React renderer using `@react-three/fiber` under the hood to expose the scene graph wrapped in a test instance providing helpful utilities to test with.\n\nEssentially, this package makes it easy to grab a snapshot of the Scene Graph rendered by `three` without the need for webgl & browser.\n\n---\n\n## Usage\n\nRTTR is testing library agnostic, so we hope that it works with libraries such as [`jest`](https://jestjs.io/), [`jasmine`](https://jasmine.github.io/) etc.\n\n```tsx\nimport ReactThreeTestRenderer from '@react-three/test-renderer'\n\nconst renderer = await ReactThreeTestRenderer.create(\n  <mesh>\n    <boxGeometry args={[2, 2]} />\n    <meshStandardMaterial\n      args={[\n        {\n          color: 0x0000ff,\n        },\n      ]}\n    />\n  </mesh>,\n)\n\n// assertions using the TestInstance & Scene Graph\nconsole.log(renderer.toGraph())\n```\n\n---\n\n## API\n\n- [React Three Test Renderer API](/packages/test-renderer/markdown/rttr.md)\n- [React Three Test Instance API](/packages/test-renderer/markdown/rttr-instance.md)\n","isInternal":false,"tokens":777,"sizeBytes":2788}],"systemPromptSnippet":"<yakaai_skills repo=\"pmndrs/react-three-fiber\">\n<!-- File: packages/eslint-plugin/docs/rules/no-clone-in-loop.md (Tokens: ~288 | Category: anthropic-skill) -->\nCloning vectors in the frame loop instantiates new objects wasting large amounts of memory,\nwhich is especially bad for Three.js classes.\nInstead create once in a `useMemo` or a single shared reference outside of the component.\n\n#### ❌ Incorrect\n\nThis creates a new vector 60+ times a second allocating large amounts of memory.\n\n```js\nfunction Direction({ targetPosition }) {\n  const ref = useRef()\n\n  useFrame(() => {\n    const direction = ref.current.position.clone().sub(targetPosition).normalize()\n  })\n\n  return <mesh ref={ref} />\n}\n```\n\n#### ✅ Correct\n\nThis creates a vector outside of the frame loop to be reused each frame.\n\n```js\nconst tempVec = new THREE.Vector3()\n\nfunction Direction({ targetPosition }) {\n  const ref = useRef()\n\n  useFrame(() => {\n    const direction = tempVec.copy(ref.current.position).sub(targetPosition).normalize()\n  })\n\n  return <mesh ref={ref} />\n}\n```\n\nThis creates a vector once outside of the frame loop inside a `useMemo` to be reused each frame.\n\n```js\nfunction Direction({ targetPosition }) {\n  const ref = useRef()\n  const tempVec = useMemo(() => new THREE.Vector3())\n\n  useFrame(() => {\n    const direction = tempVec.copy(ref.current.position).sub(targetPosition).normalize()\n  })\n\n  return <mesh ref={ref} />\n}\n```\n\n<!-- File: packages/eslint-plugin/docs/rules/no-new-in-loop.md (Tokens: ~326 | Category: anthropic-skill) -->\nInstantiating new objects in the frame loop can waste large amounts of memory,\nwhich is especially bad for large CPU containers such as Three.js classes and any GPU resource as there is no reliable garbage collection.\nInstead create once in a `useMemo` or a single shared reference outside of the component.\n\n#### ❌ Incorrect\n\nThis creates a new vector 60+ times a second allocating large amounts of memory.\n\n```js\nfunction MoveTowards({ x, y, z }) {\n  const ref = useRef()\n\n  useFrame(() => {\n    ref.current.position.lerp(new THREE.Vector3(x, y, z), 0.1)\n  })\n\n  return <mesh ref={ref} />\n}\n```\n\n#### ✅ Correct\n\nThis creates a vector outside of the frame loop to be reused each frame.\n\n```js\nconst tempVec = new THREE.Vector3()\n\nfunction MoveTowards({ x, y, z }) {\n  const ref = useRef()\n\n  useFrame(() => {\n    ref.current.position.lerp(tempVec.set(x, y, z), 0.1)\n  })\n\n  return <mesh ref={ref} />\n}\n```\n\nThis creates a vector once outside of the frame loop inside a `useMemo` to be reused each frame.\n\n```js\nfunction MoveTowards({ x, y, z }) {\n  const ref = useRef()\n  const tempVec = useMemo(() => new THREE.Vector3())\n\n  useFrame(() => {\n    ref.current.position.lerp(tempVec.set(x, y, z), 0.1)\n  })\n\n  return <mesh ref={ref} />\n}\n```\n\n<!-- File: packages/eslint-plugin/README.md (Tokens: ~854 | Category: plugin-manifest) -->\n# @react-three/eslint-plugin\n\n[![Version](https://img.shields.io/npm/v/@react-three/eslint-plugin?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/eslint-plugin)\n[![Twitter](https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/pmndrs)\n[![Discord](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000)](https://discord.gg/ZZjjNvJ)\n[![Open Collective](https://img.shields.io/opencollective/all/react-three-fiber?style=flat&colorA=000000&colorB=000000)](https://opencollective.com/react-three-fiber)\n[![ETH](https://img.shields.io/badge/ETH-f5f5f5?style=flat&colorA=000000&colorB=000000)](https://blockchain.com/eth/address/0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682)\n[![BTC](https://img.shields.io/badge/BTC-f5f5f5?style=flat&colorA=000000&colorB=000000)](https://blockchain.com/btc/address/36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH)\n\nAn ESLint plugin which provides lint rules for [@react-three/fiber](https://github.com/pmndrs/react-three-fiber).\n\n## Installation\n\n```bash\nnpm install @react-three/eslint-plugin --save-dev\n```\n\n## Configuration\n\nUse the recommended [config](#recommended) to get reasonable defaults:\n\n```json\n\"extends\": [\n  \"plugin:@react-three/recommended\"\n]\n```\n\nIf you do not use a config you will need to specify individual rules and add extra configuration.\n\nAdd \"@react-three\" to the plugins section.\n\n```json\n\"plugins\": [\n  \"@react-three\"\n]\n```\n\nEnable the rules that you would like to use.\n\n```json\n\"rules\": {\n  \"@react-three/no-clone-in-frame-loop\": \"error\"\n}\n```\n\n## Rules\n\n✅ Enabled in the `recommended` [configuration](#recommended).<br>\n🔧 Automatically fixable by the `--fix` [CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).<br>\n💡 Manually fixable by [editor suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).\n\n<!-- START_RULE_CODEGEN -->\n<!-- @command yarn codegen:eslint -->\n\n| Rule                                                            | Description                                                                                | ✅  | 🔧  | 💡  |\n| --------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | --- | --- | --- |\n| <a href=\"./docs/rules/no-clone-in-loop.md\">no-clone-in-loop</a> | Disallow cloning vectors in the frame loop which can cause performance problems.           | ✅  |     |     |\n| <a href=\"./docs/rules/no-new-in-loop.md\">no-new-in-loop</a>     | Disallow instantiating new objects in the frame loop which can cause performance problems. | ✅  |     |     |\n\n<!-- END_CODEGEN -->\n\n## Shareable configs\n\n### Recommended\n\nThis plugin exports a `recommended` configuration that enforces rules appropriate for everyone using React Three Fiber.\n\n```json\n\"extends\": [\n  \"plugin:@react-three/recommended\"\n]\n```\n\n### All\n\nThis plugin also exports an `all` configuration that includes every available rule.\n\n```json\n\"extends\": [\n  \"plugin:@react-three/all\"\n]\n```\n\n<!-- File: packages/fiber/readme.md (Tokens: ~2893 | Category: plugin-manifest) -->\n<h1>react-three-fiber</h1>\n\n[![Version](https://img.shields.io/npm/v/@react-three/fiber?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/fiber)\n[![Downloads](https://img.shields.io/npm/dt/react-three-fiber.svg?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/fiber)\n[![Twitter](https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/pmndrs)\n[![Discord](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000)](https://discord.gg/ZZjjNvJ)\n[![Open Collective](https://img.shields.io/opencollective/all/react-three-fiber?style=flat&colorA=000000&colorB=000000)](https://opencollective.com/react-three-fiber)\n[![ETH](https://img.shields.io/badge/ETH-f5f5f5?style=flat&colorA=000000&colorB=000000)](https://blockchain.com/eth/address/0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682)\n[![BTC](https://img.shields.io/badge/BTC-f5f5f5?style=flat&colorA=000000&colorB=000000)](https://blockchain.com/btc/address/36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH)\n\nreact-three-fiber is a <a href=\"https://reactjs.org/docs/codebase-overview.html#renderers\">React renderer</a> 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 @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 React's scheduling abilities.\n\n#### Can it keep up with frequent feature updates to Threejs?\n\nYes. It merely expresses Threejs in JSX: `<mesh />` becomes `new THREE.Mesh()`, and that happens dynamically. 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<table>\n  <tbody>\n    <tr>\n      <td>Let's make a re-usable component that has its own state, reacts to user-input and participates in the render-loop. (<a href=\"https://codesandbox.io/s/rrppl0y8l4?file=/src/App.js\">live demo</a>).</td>\n      <td>\n        <a href=\"https://codesandbox.io/s/rrppl0y8l4\">\n          <img src=\"https://i.imgur.com/sS4ArrZ.gif\" />\n        </a>\n      </td>\n    </tr>\n  </tbody>\n</table>\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) => (ref.current.rotation.x += delta))\n  // Return the view, these are regular Threejs elements expressed in JSX\n  return (\n    <mesh\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      <boxGeometry args={[1, 1, 1]} />\n      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />\n    </mesh>\n  )\n}\n\ncreateRoot(document.getElementById('root')).render(\n  <Canvas>\n    <ambientLight />\n    <pointLight position={[10, 10, 10]} />\n    <Box position={[-1.2, 0, 0]} />\n    <Box position={[1.2, 0, 0]} />\n  </Canvas>,\n)\n```\n\n<details>\n  <summary>Show TypeScript example</summary>\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<THREE.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    <mesh\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      <boxGeometry args={[1, 1, 1]} />\n      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />\n    </mesh>\n  )\n}\n\ncreateRoot(document.getElementById('root') as HTMLElement).render(\n  <Canvas>\n    <ambientLight />\n    <pointLight position={[10, 10, 10]} />\n    <Box position={[-1.2, 0, 0]} />\n    <Box position={[1.2, 0, 0]} />\n  </Canvas>,\n)\n```\n\nLive demo: https://codesandbox.io/s/icy-tree-brnsm?file=/src/App.tsx\n\n</details>\n\n<details>\n  <summary>Show React Native example</summary>\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 react\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) => (mesh.current.rotation.x += delta))\n  return (\n    <mesh\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      <boxGeometry args={[1, 1, 1]} />\n      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />\n    </mesh>\n  )\n}\nexport default function App() {\n  return (\n    <Canvas>\n      <ambientLight />\n      <pointLight position={[10, 10, 10]} />\n      <Box position={[-1.2, 0, 0]} />\n      <Box position={[1.2, 0, 0]} />\n    </Canvas>\n  )\n}\n```\n\n</details>\n\n---\n\n# Documentation, tutorials, examples\n\nVisit [docs.pmnd.rs](https://docs.pmnd.rs/react-three-fiber)\n\n<a href=\"https://docs.pmnd.rs/react-three-fiber\"><img src=\"/docs/preview.jpg\"></a>\n\n# Fundamentals\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/manual/#en/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/API) to see what the various settings and hooks do.\n\nSome reading material:\n\n- [Threejs-docs](https://threejs.org/docs)\n- [Threejs-examples](https://threejs.org/examples)\n- [Threejs-fundamentals](https://threejs.org/manual/#en/fundamentals)\n- [three.js-journey](https://threejs-journey.com)\n- [Discover Threejs](https://discoverthreejs.com)\n- [Do's and don'ts](https://discoverthreejs.com/tips-and-tricks) for performance and best practices\n- [react-three-fiber alligator.io tutorial](https://alligator.io/react/react-with-threejs) by [@dghez\\_](https://twitter.com/dghez_)\n\n# Ecosystem\n\n- [`@react-three/gltfjsx`](https://github.com/pmndrs/gltfjsx) &ndash; turns GLTFs into JSX components\n- [`@react-three/drei`](https://github.com/pmndrs/drei) &ndash; useful helpers for react-three-fiber\n- [`@react-three/postprocessing`](https://github.com/pmndrs/react-postprocessing) &ndash; post-processing effects\n- [`@react-three/flex`](https://github.com/pmndrs/react-three-flex) &ndash; flexbox for react-three-fiber\n- [`@react-three/xr`](https://github.com/pmndrs/react-xr) &ndash; VR/AR controllers and events\n- [`@react-three/cannon`](https://github.com/pmndrs/use-cannon) &ndash; physics based hooks\n- [`@react-three/a11y`](https://github.com/pmndrs/react-three-a11y) &ndash; real a11y for your scene\n- [`zustand`](https://github.com/pmndrs/zustand) &ndash; state management\n- [`react-spring`](https://github.com/pmndrs/react-spring) &ndash; a spring-physics-based animation library\n- [`react-use-gesture`](https://github.com/pmndrs/react-use-gesture) &ndash; mouse/touch gestures\n- [`leva`](https://github.com/pmndrs/leva) &ndash; create GUI controls in seconds\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<a href=\"https://opencollective.com/react-three-fiber#backers\" target=\"_blank\">\n  <img src=\"https://opencollective.com/react-three-fiber/backers.svg?width=890\"/>\n</a>\n\n#### Contributors\n\nThis project exists thanks to all the people who contribute.\n\n<a href=\"https://github.com/pmndrs/react-three-fiber/graphs/contributors\">\n  <img src=\"https://opencollective.com/react-three-fiber/contributors.svg?width=890\" />\n</a>\n\n<!-- File: packages/test-renderer/README.md (Tokens: ~777 | Category: plugin-manifest) -->\n# React Three Test Renderer ⚛️🔼🧪\n\n[![Version](https://img.shields.io/npm/v/@react-three/test-renderer?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/test-renderer)\n[![Downloads](https://img.shields.io/npm/dt/@react-three/test-renderer.svg?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/test-renderer)\n[![Twitter](https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/pmndrs)\n[![Twitter](https://img.shields.io/twitter/follow/_josh_ellis_?label=%40_josh_ellis_&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/_josh_ellis_)\n[![Discord](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000)](https://discord.gg/ZZjjNvJ)\n\n`@react-three/test-renderer` is a React testing <a href=\"https://reactjs.org/docs/codebase-overview.html#renderers\">renderer</a> for threejs in node.\n\n```bash\nyarn add @react-three/fiber three\nyarn add -D @react-three/test-renderer\n```\n\n---\n\n## The problem\n\nYou've written a complex and amazing webgl experience using [`@react-three/fiber`](https://github.com/pmndrs/react-three-fiber) and you want to test it to make sure it works even after you add even more features.\n\nYou go to use `react-dom` but hang on, `THREE` elements aren't in the DOM! You decide to use `@react-three/test-renderer` you can see the container & the canvas but you can't see the tree for the scene!? That's because `@react-three/fiber` renders to a different react root with it's own reconciler.\n\n## The solution\n\nYou use `@react-three/test-renderer` ⚛️-🔼-🧪, an experimental React renderer using `@react-three/fiber` under the hood to expose the scene graph wrapped in a test instance providing helpful utilities to test with.\n\nEssentially, this package makes it easy to grab a snapshot of the Scene Graph rendered by `three` without the need for webgl & browser.\n\n---\n\n## Usage\n\nRTTR is testing library agnostic, so we hope that it works with libraries such as [`jest`](https://jestjs.io/), [`jasmine`](https://jasmine.github.io/) etc.\n\n```tsx\nimport ReactThreeTestRenderer from '@react-three/test-renderer'\n\nconst renderer = await ReactThreeTestRenderer.create(\n  <mesh>\n    <boxGeometry args={[2, 2]} />\n    <meshStandardMaterial\n      args={[\n        {\n          color: 0x0000ff,\n        },\n      ]}\n    />\n  </mesh>,\n)\n\n// assertions using the TestInstance & Scene Graph\nconsole.log(renderer.toGraph())\n```\n\n---\n\n## API\n\n- [React Three Test Renderer API](/packages/test-renderer/markdown/rttr.md)\n- [React Three Test Instance API](/packages/test-renderer/markdown/rttr-instance.md)\n</yakaai_skills>"}