{"_id":"@codyjasonbennett/r3f-test","name":"@codyjasonbennett/r3f-test","dist-tags":{"latest":"8.17.3"},"versions":{"8.17.3":{"name":"@codyjasonbennett/r3f-test","version":"8.17.3","description":"A React renderer for Threejs","keywords":["react","renderer","fiber","three","threejs"],"author":{"name":"Paul Henschel","url":"https://github.com/drcmda"},"license":"MIT","maintainers":[{"name":"codyjasonbennett","email":"hi@codyb.co"}],"bugs":{"url":"https://github.com/pmndrs/react-three-fiber/issues"},"homepage":"https://github.com/pmndrs/react-three-fiber#readme","repository":{"type":"git","url":"git+https://github.com/pmndrs/react-three-fiber.git"},"collective":{"type":"opencollective","url":"https://opencollective.com/react-three-fiber"},"main":"dist/react-three-fiber.cjs.js","module":"dist/react-three-fiber.esm.js","types":"dist/react-three-fiber.cjs.d.ts","react-native":"native/dist/react-three-fiber-native.cjs.js","sideEffects":false,"preconstruct":{"entrypoints":["index.tsx","native.tsx"]},"scripts":{"prebuild":"cp ../../readme.md readme.md"},"dependencies":{"@babel/runtime":"^7.17.8","@types/debounce":"^1.2.1","@types/react-reconciler":"^0.26.7","@types/webxr":"*","base64-js":"^1.5.1","buffer":"^6.0.3","debounce":"^1.2.1","its-fine":"^1.0.6","react-reconciler":"^0.27.0","scheduler":"^0.21.0","suspend-react":"^0.1.3","zustand":"^3.7.1"},"peerDependencies":{"expo":">=43.0","expo-asset":">=8.4","expo-gl":">=11.0","expo-file-system":">=11.0","react":">=18.0","react-dom":">=18.0","react-native":">=0.64","three":">=0.133"},"peerDependenciesMeta":{"react-dom":{"optional":true},"react-native":{"optional":true},"expo":{"optional":true},"expo-asset":{"optional":true},"expo-file-system":{"optional":true},"expo-gl":{"optional":true}},"_id":"@codyjasonbennett/r3f-test@8.17.3","dist":{"shasum":"fee9f984c6078d2d17e7ffd6558cc6764ce2e7f3","integrity":"sha512-eyUHe72qeBuE/cEweVdCXatfFyz2xkIMyC6hdqqSH1NDV1R+JvBNxHv935t2reYRYUC7A5HRKE01in1rg4m2Eg==","tarball":"https://registry.npmjs.org/@codyjasonbennett/r3f-test/-/r3f-test-8.17.3.tgz","fileCount":23,"unpackedSize":469258,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZFUbkDMgDs5J2fB3MCXPj5qb6Xw8VEmA1Xpy3rwk/1AIhAP+eA1rBVlmQjjyXtx/t4nZy4T0C6iPw1etA7cbf7Vlj"}]},"_npmUser":{"name":"codyjasonbennett","email":"hi@codyb.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/r3f-test_8.17.3_1723304483635_0.002481029131711443"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-10T15:41:23.529Z","8.17.3":"2024-08-10T15:41:23.797Z","modified":"2024-08-10T15:41:24.084Z"},"maintainers":[{"name":"codyjasonbennett","email":"hi@codyb.co"}],"description":"A React renderer for Threejs","homepage":"https://github.com/pmndrs/react-three-fiber#readme","keywords":["react","renderer","fiber","three","threejs"],"repository":{"type":"git","url":"git+https://github.com/pmndrs/react-three-fiber.git"},"author":{"name":"Paul Henschel","url":"https://github.com/drcmda"},"bugs":{"url":"https://github.com/pmndrs/react-three-fiber/issues"},"license":"MIT","readme":"<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@beta react@rc\n# Start\nexpo start\n```\n\nSome configuration may be required to tell the Metro bundler about your assets if you use `useLoader` or Drei abstractions like `useGLTF` and `useTexture`:\n\n```js\n// metro.config.js\nmodule.exports = {\n  resolver: {\n    sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'cjs'],\n    assetExts: ['glb', 'png', 'jpg'],\n  },\n}\n```\n\n```tsx\nimport React, { useRef, useState } from 'react'\nimport { Canvas, useFrame } from '@react-three/fiber/native'\nfunction Box(props) {\n  const mesh = useRef(null)\n  const [hovered, setHover] = useState(false)\n  const [active, setActive] = useState(false)\n  useFrame((state, delta) => (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/docs/index.html#manual/en/introduction/Creating-a-scene). Keep that site open.\n2. When you know what a scene is, a camera, mesh, geometry, material, fork the [demo above](https://github.com/pmndrs/react-three-fiber#what-does-it-look-like).\n3. [Look up](https://threejs.org/docs/index.html#api/en/objects/Mesh) the JSX elements that you see (mesh, ambientLight, etc), _all_ threejs exports are native to three-fiber.\n4. Try changing some values, scroll through our [API](https://docs.pmnd.rs/react-three-fiber/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","readmeFilename":"readme.md"}