{"_id":"@codyjasonbennett/xr","_rev":"3-37ecc61345ecc1e6f141537740c326a0","name":"@codyjasonbennett/xr","dist-tags":{"latest":"3.4.1"},"versions":{"3.3.0":{"name":"@codyjasonbennett/xr","version":"3.3.0","description":"React components and hooks for creating VR/AR applications with react-three-fiber","keywords":["xr","ar","vr","react","three","react-three-fiber"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/pmndrs/react-xr.git"},"bugs":{"url":"https://github.com/pmndrs/react-xr/issues"},"homepage":"https://github.com/pmndrs/react-xr#readme","main":"dist/index.cjs.js","module":"dist/index.js","types":"dist/index.d.ts","sideEffects":false,"scripts":{"prebuild":"rimraf dist && npm run typegen","build":"rollup -c","prepare":"yarn prebuild && yarn build","eslint":"eslint src/**/*.{js,ts,jsx,tsx}","test":"echo no tests yet","typecheck":"tsc --noEmit --emitDeclarationOnly false --strict --jsx react","typegen":"tsc --emitDeclarationOnly"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged --pattern '**/*.*(js|jsx|ts|tsx)'"}},"devDependencies":{"@babel/core":"7.9.0","@babel/plugin-transform-modules-commonjs":"7.9.0","@babel/plugin-transform-parameters":"7.9.5","@babel/plugin-transform-runtime":"7.9.0","@babel/plugin-transform-template-literals":"7.8.3","@babel/preset-env":"7.9.5","@babel/preset-react":"7.9.4","@babel/preset-typescript":"^7.9.0","@react-three/fiber":"^6.0.3","@types/jest":"^25.2.1","@types/lodash-es":"^4.17.3","@types/react":"^17.0.5","@types/react-dom":"^17.0.3","@types/three":"^0.134.0","@types/webxr":"^0.2.3","@typescript-eslint/eslint-plugin":"^2.29.0","@typescript-eslint/parser":"^2.29.0","babel-eslint":"^10.1.0","babel-plugin-transform-react-remove-prop-types":"^0.4.24","eslint":"^6.8.0","eslint-config-prettier":"^6.11.0","eslint-plugin-import":"^2.20.2","eslint-plugin-react":"^7.19.0","eslint-plugin-react-hooks":"^3.0.0","husky":"^4.2.5","jest":"^25.4.0","prettier":"^2.0.5","pretty-quick":"^2.0.1","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup":"^2.26.4","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-json":"^4.0.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-size-snapshot":"^0.12.0","three":"^0.134.0","typescript":"^4.2.3"},"peerDependencies":{"@react-three/fiber":">=6.0.3","react":">=17.0","react-dom":">=17.0","three":">=0.134"},"dependencies":{"@webxr-input-profiles/motion-controllers":"^1.0.0","react-merge-refs":"^1.1.0","three-stdlib":"^2.7.2"},"gitHead":"cb52875166757b1a18348baa7c50bf8ee5e3bb64","_id":"@codyjasonbennett/xr@3.3.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-Qs/lrc7jpAxnuTea4iT4awCFPmfDylXzxQxvFUDs2UI/X7NB3f+4wuDMyiMcCC0BMK2gOkXizCfcO2UGwgDYSQ==","shasum":"421851f69744e6bf22c4b6d1ba364cbcdee5f873","tarball":"https://registry.npmjs.org/@codyjasonbennett/xr/-/xr-3.3.0.tgz","fileCount":35,"unpackedSize":141752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+As0CRA9TVsSAnZWagAAUOEQAIUQY/uexmcCcDZucTBv\nhreHiypMLjGQ59wfwf37wOf4Q5Trptfo+AwiG2CfFcX8P51eX6xQgne+1uSJ\nwIu+cJ8ZDammPfaM30s+OKOdU2j+Os7jAqw+8nPLa8cHis6bZIN3jK0vbsyE\nC8tTdthtMKrST6wnDCio1WCTA1hbQvIBXzXb7KE0dG2KvZVz1Gc9pzUvzryK\npbJtWz2IV8qlj6/SKCrRkpCpJUI2POtRjLxqdY4kRIw3V+l/F+8JgjTgMG8i\nWV3fdv6Mtzc2/7MJW8glaKNExT6dYZTvlCb2d/i0rHvJIcR15ZlvzbCksPzB\ndzx6g7mbSCbAiR/6h4s1cqNCskJFw3XR63U0sGL6eupaIovMme3NpDGQwEgd\n7Dcexn8tARWL5oWI/7UdLBJ+QziC4dsFQ9pqXTASqjUme38s1Mh44EvzwMn/\nAt5Ovqk0TEG5iEQneBZLEZBj23IbYQpQMnWPZtMwb+pM8avXQjviP/kjQzWL\nxo1AetLBoJDqMkUOnRmlou5t9yN9ZeQv35Yxj9TrTl1t2lgBmdPTPEyesVbZ\nEKFKR3Cu/hsHw49V8K0BNDjlmCv1lU359kMjjyKbx+4NIzsP68Q8pL5/y1o0\nrkLPzJrWSbCVR7B9BdKedmT6C+zM1PiwdgT7/BhMtMgCrnmPe2z7Av1i8Eyj\nJFl0\r\n=3mk7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzUHEV8iDWcfB+GNzH8RNNEcfmqL64jcbzh9pzNYz1owIgSS0FQKZ47d3EfPN7prm4Y/XTXddJmPBQROzroESp658="}]},"_npmUser":{"name":"codyjasonbennett","email":"hi@codyb.co"},"directories":{},"maintainers":[{"name":"codyjasonbennett","email":"hi@codyb.co"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/xr_3.3.0_1643645748048_0.8009072213501278"},"_hasShrinkwrap":false},"3.4.0":{"name":"@codyjasonbennett/xr","version":"3.4.0","description":"React components and hooks for creating VR/AR applications with react-three-fiber","keywords":["xr","ar","vr","react","three","react-three-fiber"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/pmndrs/react-xr.git"},"bugs":{"url":"https://github.com/pmndrs/react-xr/issues"},"homepage":"https://github.com/pmndrs/react-xr#readme","author":{"name":"Oleksandr Dubenko","url":"https://github.com/sniok"},"maintainers":[{"name":"codyjasonbennett","email":"hi@codyb.co"}],"main":"dist/index.cjs.js","module":"dist/index.js","types":"dist/index.d.ts","sideEffects":false,"scripts":{"prebuild":"rimraf dist && npm run typegen","build":"rollup -c","prepare":"yarn prebuild && yarn build","lint":"eslint src/**/*.{js,ts,jsx,tsx} && prettier src/**/*.{js,ts,jsx,tsx} --check","lint-fix":"prettier src/**/*.{js,ts,jsx,tsx} --write && eslint src/**/*.{js,ts,jsx,tsx} --fix","test":"echo no tests yet","typecheck":"tsc --noEmit --emitDeclarationOnly false --strict --jsx react","typegen":"tsc --emitDeclarationOnly"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged --pattern '**/*.*(js|jsx|ts|tsx)'"}},"devDependencies":{"@babel/core":"7.17.0","@babel/eslint-parser":"^7.17.0","@babel/plugin-transform-modules-commonjs":"7.16.8","@babel/plugin-transform-parameters":"7.16.7","@babel/plugin-transform-runtime":"7.17.0","@babel/plugin-transform-template-literals":"7.16.7","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"^7.16.7","@react-three/fiber":"^7.0.26","@types/jest":"^25.2.1","@types/lodash-es":"^4.17.6","@types/react":"^17.0.39","@types/react-dom":"^17.0.11","@types/three":"^0.137.0","@typescript-eslint/eslint-plugin":"^5.11.0","@typescript-eslint/parser":"^5.11.0","babel-plugin-transform-react-remove-prop-types":"^0.4.24","eslint":"^8.8.0","eslint-config-prettier":"^8.3.0","eslint-plugin-import":"^2.25.4","eslint-plugin-react":"^7.28.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^4.2.5","jest":"^25.4.0","prettier":"^2.5.1","pretty-quick":"^3.1.3","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup":"^2.67.1","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-json":"^4.0.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-size-snapshot":"^0.12.0","three":"^0.137.5","typescript":"^4.5.5"},"peerDependencies":{"@react-three/fiber":">=6.0.3","react":">=17.0","react-dom":">=17.0","three":">=0.137"},"dependencies":{"react-merge-refs":"^1.1.0","three-stdlib":"^2.8.6"},"licenseText":"MIT License\n\nCopyright (c) 2020-2022 Poimandres\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@codyjasonbennett/xr@3.4.0","dist":{"shasum":"daa3659c3b50a54e645355a10ceb0bb8aaa7a3b9","integrity":"sha512-U+WrH+PzWb2kD4W3vb2EQIbVWLYx1lf7nRTvEQC4laaXnnO7ec+rJqwJipw8nD/8/+5/EtPAe5TcWcOInOdRjw==","tarball":"https://registry.npmjs.org/@codyjasonbennett/xr/-/xr-3.4.0.tgz","fileCount":40,"unpackedSize":199343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBnApCRA9TVsSAnZWagAA8eIP/0gJa6xAIr8d4sAh3uR9\nYS8swgOt4/PA6u62Gk8RED7d2QrWPibrcazzkcn5L9D2dQ2wk081NnO39ug3\nd/nhcTejW9zC14nqds+RCKYgkvMR6Fas9VE5KQ6ngoHSKZuPSj3LgSx8QJEd\nsiO9aZ7II1CGuMlD3/u4YazCrgtMKFfo1CsEubngPkLy/1zsq2/vX+lTHJsP\ng+fPpTpHNfX2TKOXsQQBxWNIG4jqDq5fnYp0c7mcgDygPk6Zg9azGTqLIs0c\ntLnzXIkxLwxVyJ+9ix3IUEKpajL5n1fq2TWjpg4n1z/+mX/VBtSjVVfZDUQX\nm77aanAZC0sUjP9HrDJPvjymiJR9lm5+TzQbtw3FTqGSNhZMlWbcIR45FaCz\nW4qemmnOB+cdI+JFQCiEonxh7Jyh9z4Yi6CAYPlQMPHR8gTEAovEez+eHgM8\nTVpj84KgMOvk5SwLtKwo1u7kr34eWZ4IbGxgf5MB/CCpWTNCBuAlfzfVZFEz\ncA2AaI8wB79VN/lvuZAV6+ghETckAlas9oE42xXAN1bl+ZInVjMqkrWQTvuD\nl0cNMTOxoTC1ZFwKryaVZsrHINF6poLOcrMNS64KAjbHgK07GD45X8JFDr9v\nGC8zzEo3x4qYzFWyRnKbLnuG7uKQU7o/+wy1uagf7NQCXv29RF7BrFDPkDSj\nH6TG\r\n=B02J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXv9izJY/OOlSNgpIbz6PPmQQQFXStAwygC6d85uPykQIhAK49XKcwYE8KUh/mC6BIjXCKXyLRhGyJxxlFhpw1rD+a"}]},"_npmUser":{"name":"codyjasonbennett","email":"hi@codyb.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/xr_3.4.0_1644589097505_0.04088672490856182"},"_hasShrinkwrap":false},"3.4.1":{"name":"@codyjasonbennett/xr","version":"3.4.1","description":"React components and hooks for creating VR/AR applications with react-three-fiber","keywords":["xr","ar","vr","react","three","react-three-fiber"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/pmndrs/react-xr.git"},"bugs":{"url":"https://github.com/pmndrs/react-xr/issues"},"homepage":"https://github.com/pmndrs/react-xr#readme","author":{"name":"Oleksandr Dubenko","url":"https://github.com/sniok"},"maintainers":[{"name":"codyjasonbennett","email":"hi@codyb.co"}],"main":"dist/index.cjs.js","module":"dist/index.js","types":"dist/index.d.ts","sideEffects":false,"scripts":{"prebuild":"rimraf dist && npm run typegen","build":"rollup -c","prepare":"yarn prebuild && yarn build","lint":"eslint src/**/*.{js,ts,jsx,tsx} && prettier src/**/*.{js,ts,jsx,tsx} --check","lint-fix":"prettier src/**/*.{js,ts,jsx,tsx} --write && eslint src/**/*.{js,ts,jsx,tsx} --fix","test":"echo no tests yet","typecheck":"tsc --noEmit --emitDeclarationOnly false --strict --jsx react","typegen":"tsc --emitDeclarationOnly"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged --pattern '**/*.*(js|jsx|ts|tsx)'"}},"devDependencies":{"@babel/core":"7.17.0","@babel/eslint-parser":"^7.17.0","@babel/plugin-transform-modules-commonjs":"7.16.8","@babel/plugin-transform-parameters":"7.16.7","@babel/plugin-transform-runtime":"7.17.0","@babel/plugin-transform-template-literals":"7.16.7","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"^7.16.7","@react-three/fiber":"^7.0.26","@types/jest":"^25.2.1","@types/lodash-es":"^4.17.6","@types/react":"^17.0.39","@types/react-dom":"^17.0.11","@types/three":"^0.137.0","@typescript-eslint/eslint-plugin":"^5.11.0","@typescript-eslint/parser":"^5.11.0","babel-plugin-transform-react-remove-prop-types":"^0.4.24","eslint":"^8.8.0","eslint-config-prettier":"^8.3.0","eslint-plugin-import":"^2.25.4","eslint-plugin-react":"^7.28.0","eslint-plugin-react-hooks":"^4.3.0","husky":"^4.2.5","jest":"^25.4.0","prettier":"^2.5.1","pretty-quick":"^3.1.3","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","rollup":"^2.67.1","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-json":"^4.0.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-size-snapshot":"^0.12.0","three":"^0.137.5","typescript":"^4.5.5"},"peerDependencies":{"@react-three/fiber":">=6.0.3","react":">=17.0","react-dom":">=17.0","three":">=0.137"},"dependencies":{"react-merge-refs":"^1.1.0","three-stdlib":"^2.8.6"},"licenseText":"MIT License\n\nCopyright (c) 2020-2022 Poimandres\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@codyjasonbennett/xr@3.4.1","dist":{"shasum":"8c28a59601c86671058c131e64c2c1dd3e5830dd","integrity":"sha512-YhM6Q94IWC+RhLP3ehb/IniVtpNpUP1djmmIIvLukBoi1k9eNGMEjrhGQis82lYr9f9LAQqSNIqkuIJddiibeg==","tarball":"https://registry.npmjs.org/@codyjasonbennett/xr/-/xr-3.4.1.tgz","fileCount":40,"unpackedSize":199270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCIEwCRA9TVsSAnZWagAAUFIP/Ap2OSLFk708RQXqr4BE\n94Zz5FX58aAtM/pxy6lKRk76uYrlRucKwMZU6Xe7aWWKH1pomMFJH5QO0Mfm\nGX6Th0bTGEHzmrkcyudaJXLCOtEm66aEGMKvuoPpv9dceiAT/4TXbX72EE41\nwTdWxvLvVxIyY4jMORogWGMpqXJIRVXM6MiK9lqXlEg5q7Vy8cr0S3W1uNof\nqGBeOUgzfyaUMj/BKSPC6CEv8hmqJz0VNfHwHLmFhCsHNH5DPv/Di0SYZtYJ\np6lRaeQLceAcrh1Fh9kxKUH+X/5IgIzob+zdqoiYnweno+MA2HbciEBCGfWl\nrKmbIRVrZgVJADPHlKVXmExW86BmhGgbFeYE374xrpCmHdu5Y1x6LWtd82Ms\nKxHDY/863ndaUYLS3RSsuv9uiU8d9FFpn0P/fZObWiysRuBLoCNGXtMQ3QBe\nVOddPNBXnUBGpQpIM6gMEtFfelvgrxAysGWZjawwLHhiX73Vi0cdOPYbGF0W\nhtUUVN4Jn2l1LfxhoBECNdYrlHqYKr/B/5fLYX34nVXkrvsWpErAHN2vrwy6\n6OfDOfb3QQSuYYxy44dAzJQpy0nYHhpPfdnKXzx8cd1w9Il9PdvCq/P6mAxS\n25gr7ryuuMOO7i7+iLvm+kq/HYwh/jfKsxvZFX3XlmIEfVLpFbd2OCmWd+CM\nPmyy\r\n=mwLp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGVvYk7CMujKE1umI9qWE640LvbIkK+xQ/Gf6VeErOqlAiBkE4e0J7rXomHlpmKKnsFRT3FsmhTfikma+i1fPOBFFQ=="}]},"_npmUser":{"name":"codyjasonbennett","email":"hi@codyb.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/xr_3.4.1_1644724527903_0.31609170546241216"},"_hasShrinkwrap":false}},"time":{"created":"2022-01-31T16:15:48.004Z","3.3.0":"2022-01-31T16:15:48.188Z","modified":"2022-04-05T00:10:17.440Z","3.4.0":"2022-02-11T14:18:17.642Z","3.4.1":"2022-02-13T03:55:28.309Z"},"maintainers":[{"name":"codyjasonbennett","email":"hi@codyb.co"}],"description":"React components and hooks for creating VR/AR applications with react-three-fiber","homepage":"https://github.com/pmndrs/react-xr#readme","keywords":["xr","ar","vr","react","three","react-three-fiber"],"repository":{"type":"git","url":"git+https://github.com/pmndrs/react-xr.git"},"bugs":{"url":"https://github.com/pmndrs/react-xr/issues"},"license":"MIT","readme":"

@react-three/xr

\n\n[![Version](https://img.shields.io/npm/v/@react-three/xr?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/xr)\n[![Downloads](https://img.shields.io/npm/dt/@react-three/xr.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/xr)\n[![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.gg/poimandres)\n\nReact components and hooks for creating VR/AR applications with [@react-three/fiber](https://github.com/pmndrs/react-three-fiber)\n\n```\nnpm install @react-three/xr\n```\n\n

\n \n \n \n \n \n

\n\n

\n These demos are real, you can click them! They contain the full code, too.\n

\n\n## Getting started\n\nAdd `VRCanvas` or `ARCanvas` component (or replace your existing react-three-fiber `Canvas` component)\n\n```jsx\nimport { VRCanvas } from '@react-three/xr'\n\nfunction App() {\n return (\n \n {/* All your regular react-three-fiber elements go here */}\n \n```\n\n## Adding controllers to the scene\n\nTo get started with default controller models add `DefaultXRControllers` component. It will fetch appropriate input profile models. You can learn more [here](https://github.com/immersive-web/webxr-input-profiles/tree/main/packages/motion-controllers).\n\n```jsx\nimport { VRCanvas, DefaultXRControllers } from '@react-three/xr'\n\n\n \n```\n\nYou can access controllers' state (position, orientation, etc.) by using `useXR()` hook\n\n```jsx\nconst { controllers } = useXR()\n```\n\n## Interactions\n\nTo interact with objects using controllers you can use `` component or `useInteraction` hook. They allow adding handlers to your objects. All interactions are use rays that are shot from the controllers.\n\n### ``\n\nUse this component to wrap your objects and pass handlers as props. Supports select, hover, blur and squeeze events.\n\n```jsx\nconst [isHovered, setIsHovered] = useState(false)\n\nreturn (\n console.log('clicked!')} onHover={() => setIsHovered(true)} onBlur={() => setIsHovered(false)}>\n \n \n)\n```\n\n### ``\n\nWrap any object with a `RayGrab` component to make it grabbable\n\n```jsx\n\n \n\n```\n\n### `useInteraction`\n\nAttach handler to an existing object in a scene\n\n```jsx\nconst ref = useResource()\n\nuseInteraction(ref, 'onSelect', () => console.log('selected!'))\n\nreturn \n```\n\n## Events\n\nTo handle controller events that are not bound to any object in the scene you can use `useXREvent()` hook.\n\nEvery controller emits following events: select, selectstart, selectend, squeeze, squeezestart, squeezeend.\n\n```jsx\nuseXREvent('squeeze', (e) => console.log('squeeze event has been triggered'))\n```\n\nit supports optional third parameter with options\n\n```jsx\nuseXREvent('squeeze', () => console.log('Left controller squeeze'), { handedness: 'left' })\n```\n\n## VRCanvas, ARCanvas componentss\n\nExtended react-three-fiber [Canvas](https://docs.pmnd.rs/react-three-fiber/api/canvas) that includes:\n\n- Button to start VR session\n- Color management\n- VR Mode\n- react-xr context\n\nFor VR apps use `VRCanvas` and for AR apps use `ARCanvas`\n\n```jsx\nimport { VRCanvas } from '@react-three/xr'\n\n\n {/* All your regular react-three-fiber elements go here */}\n```\n\n## `useXR`\n\nHook that can only be used by components inside `XRCanvas` component.\n\n```jsx\nconst { controllers, player, isPresenting } = useXR()\n```\n\nControllers is an array of `XRController` objects\n\n```jsx\ninterface XRController {\n grip: Group\n controller: Group\n inputSource: XRInputSource\n // ...\n // more in XRController.ts\n}\n```\n\n`grip` and `controller` are ThreeJS groups that have the position and orientation of xr controllers. `grip` has an orientation that should be used to render virtual objects such that they appear to be held in the user’s hand and `controller` has an orientation of the preferred pointing ray.\n\n\n\n`inputSource` is the WebXR input source [(MDN)](https://developer.mozilla.org/en-US/docs/Web/API/XRInputSource). Note that it will not be available before controller is connected.\n\n## `useXRFrame`\n\nAccepts a callback which will be invoked in the animation loop of an active XR session.\n[(MDN)](https://developer.mozilla.org/en-US/docs/Web/API/XRSession/requestAnimationFrame)\n\n```jsx\nuseXRFrame((time, xrFrame) => {\n // do something on each frame of an active XR session\n})\n```\n\n## `useController`\n\nUse this hook to get an instance of the controller\n\n```jsx\nconst leftController = useController('left')\n```\n\n## useHitTest\n\n[codesandbox](https://codesandbox.io/s/react-xr-usehittest-demo-5iff9?file=/src/App.tsx)\n\nUse this hook to perform a hit test for an AR environment\n\nTo enable hit testing in your AR app add `sessionInit` prop to `ARCanvas` like this\n\n```jsx\n\n```\n\nAnd then in your component handle hit with `useHitTest` hook\n\n```jsx\nuseHitTest((hitMatrix, hit) => {\n // use hitMatrix to position any object on the real life surface\n})\n```\n\n## ``\n\nAdd hands model for hand-tracking. Works out of the box on Oculus Browser v13, and can be enabled on versions as low as v10.2 with #webxr-hands experimental flag enabled.\n\n```jsx\n\n \n```\n\n### Custom hands model\n\nWhile a default model is provided, you might want to use a different model that fit your design.\nIt can work with any glTF model as long as they're ready for WebXR handtracking. If you don't specify a model for one hand it'll use the default one.\n\n```jsx\n\n```\n\n## Player\n\n`player` group contains camera and controllers that you can use to move player around\n\n```jsx\nconst { player } = useXR()\n\nuseEffect(() => {\n player.position.x += 5\n}, [])\n```\n","readmeFilename":"README.md","author":{"name":"Oleksandr Dubenko","url":"https://github.com/sniok"}}