{"_id":"@davidyaha/expo-three","_rev":"3-98b4217e23f67a205b8f3712e0d94b62","name":"@davidyaha/expo-three","dist-tags":{"latest":"3.0.0-alpha.9"},"versions":{"3.0.0-alpha.7":{"name":"@davidyaha/expo-three","version":"3.0.0-alpha.7","description":"Utilities for using THREE.js on Expo","homepage":"https://github.com/expo/expo-three#readme","repository":{"type":"git","url":"git+https://github.com/expo/expo-three.git"},"bugs":{"url":"https://github.com/expo/expo-three/issues"},"main":"lib/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","lint":"eslint .","prettier":"eslint . --fix"},"directories":{"example":"examples","lib":"lib"},"keywords":["expo","three.js","graphics","opengl","gl","arkit"],"author":{"name":"Nikhilesh Sigatapu"},"license":"MIT","dependencies":{"@expo/browser-polyfill":"^0.0.1-alpha.3","color-temperature":"0.2.7","expo-asset-utils":"^0.0.4-alpha.2","three":"0.88.0"},"peerDependencies":{"expo":">= 31.0.0","react-native":"*","three":"0.88.0"},"devDependencies":{"babel-jest":"^23.0.1","babel-preset-expo":"^4.0.0","babel-preset-react-native":"^4.0.0","eslint":"^4.19.1","eslint-config-react-native-prettier":"^1.0.1","flow-bin":"^0.26.0","jest":"^23.1.0","prettier":"^1.13.5"},"eslintConfig":{"extends":"expo"},"gitHead":"73466c5f30f49ee52dae74425218896621bdaef2","_id":"@davidyaha/expo-three@3.0.0-alpha.7","_npmVersion":"6.4.1","_nodeVersion":"9.11.2","_npmUser":{"name":"davidyaha","email":"davidyaha@gmail.com"},"dist":{"integrity":"sha512-C06L3NA/2MDx5pp6tHGmkkAnbf2f4q1GKvB9C75cCSQK8Fi9g2hKMYYESvlpgseeg0KSSDaAhbGol5dkGU8Deg==","shasum":"40f91e58568ab01e622efa97b8208bbe914db4d8","tarball":"https://registry.npmjs.org/@davidyaha/expo-three/-/expo-three-3.0.0-alpha.7.tgz","fileCount":33,"unpackedSize":202046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQLFOCRA9TVsSAnZWagAACxYP+gPxyuCN7uw2CitzfYjW\nakbOG4rpzrWAOiZAzW2cHWxRRCgu7r83nIgkv5VfdPtEFZzipdTQpUDsUbO1\nylskXlRS2htwck1rIPXz7jNOnpDu7WCQuWdvx1Vginwgaiw0W3M/q9M5nJpQ\nOts+vneqchrIPxfyMnzMk+I8+5eUegtIlMyZby4au+UYdVaEzFNyFvXhwRte\npmae94qC8KEhGGOX4odUV4Tilw8qyG1FwvxFRMS1pNFZ2EfrpVgot5c6GnC/\nrdoiSSbAulw563qUl0WDdxlcnNusmnialaZ3h2nBkxCmtz2ZyGaabzDXVmWi\nu2+KuFgw1t6SF3NLPSRt5H0vYHncGFqv6Kt8q7KrZrYN2jnhe4OO3tL7ItNE\nlm2qlkhtgz/dirCkipKcQwqIl6LyLUcFIGGhWdCLQFpPcjXohtqgsaT6fDya\nyrUMJUW4LuR+aeH4viLvCZA7/OfomcorCenPxHhIboo4yua3BuLaPXvv+q7x\nFaSm15d8tTWT3+BEZSepOYHc8+dk71F0e5FudVaaeXaDskJL0Qq1MJxJ5b8i\n8LAPZZzCoC7SdovFg6QOZDDzm1xzwYOrKZ94NgSte5wxV594cEzAw0I/Yt3d\n+OpvADgm+K5m6FE+jiKpK0Fu3b4gE4w3skU1buPnG8SEFb6E3mi7LSb09a31\n/ux2\r\n=pzKq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFYwRDqhxeoYQzfnqn7LZNDHVJFk8EzKLlMPb3AiEiP4AiBDKNtW3d3TFBOMbcQ0HTWZPPmTgkJqEYtG3dV54jskiQ=="}]},"maintainers":[{"name":"davidyaha","email":"davidyaha@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-three_3.0.0-alpha.7_1547743565345_0.8191319988300225"},"_hasShrinkwrap":false},"3.0.0-alpha.8":{"name":"@davidyaha/expo-three","version":"3.0.0-alpha.8","description":"Utilities for using THREE.js on Expo","homepage":"https://github.com/expo/expo-three#readme","repository":{"type":"git","url":"git+https://github.com/expo/expo-three.git"},"bugs":{"url":"https://github.com/expo/expo-three/issues"},"main":"lib/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","lint":"eslint .","prettier":"eslint . --fix"},"directories":{"example":"examples","lib":"lib"},"keywords":["expo","three.js","graphics","opengl","gl","arkit"],"author":{"name":"Nikhilesh Sigatapu"},"license":"MIT","dependencies":{"@expo/browser-polyfill":"^0.0.1-alpha.3","color-temperature":"0.2.7","expo-asset-utils":"^0.0.4-alpha.2","three":"^0.100.0"},"peerDependencies":{"expo":">= 31.0.0","react-native":"*","three":"0.88.0"},"devDependencies":{"babel-jest":"^23.0.1","babel-preset-expo":"^4.0.0","babel-preset-react-native":"^4.0.0","eslint":"^4.19.1","eslint-config-react-native-prettier":"^1.0.1","flow-bin":"^0.26.0","jest":"^23.1.0","prettier":"^1.13.5"},"eslintConfig":{"extends":"expo"},"gitHead":"73466c5f30f49ee52dae74425218896621bdaef2","_id":"@davidyaha/expo-three@3.0.0-alpha.8","_npmVersion":"6.4.1","_nodeVersion":"9.11.2","_npmUser":{"name":"davidyaha","email":"davidyaha@gmail.com"},"dist":{"integrity":"sha512-0VVIBcEbyeHduHwvW3OVrrXgEmomJwdiRg97uKPl3GRUkmvnbT/7LdG2PzOJfV36QKghSH9xuxtAzw03c+5L1w==","shasum":"9d5add5aad46728fb2048f85cfa8176dd9e2d5d1","tarball":"https://registry.npmjs.org/@davidyaha/expo-three/-/expo-three-3.0.0-alpha.8.tgz","fileCount":33,"unpackedSize":202333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQLYqCRA9TVsSAnZWagAAoZ0P/AxhLbw/T3eGodcHmpXi\nfoY37a9VMMXCEOSo84R7h3Mj2M8jr28xhWymPtwL400VWN3uopY8wZ3R2Yz2\nA/IE29ikeVeLhr9tk/NUH8etNhINJCx0VYx93rdheRvxCLO6qBAyWaDjaBrw\nfOeBjUZJlimEvdU8Nf1t/aOnfZYPg8tsESMUJyzjP3KkIEIWFM0hr4dPGgf+\nyIfWkeoyRMerpnUW844wck65fuNyTqw4Kj4d992Ge10b5MAVaCYpeXNFkXEo\nH34rOdS7N0ndVcFcGqfuHePGpQEUUTU19/AU36QMeM4n7sRtXe4Oh4as8CuH\nWtysayFWLcrIR6XdKbdpiZD/Dl5TJ7GK3bPTz1p4Dzy4jpdPkT4+sKW7OCl/\nPHte0WCTF2VkKQ6nZGeeFr7Q9sjbuOikyrHEWpLRAVo4mL/yr8+3q7ekrFHe\nKIdPqRH3BDjhfSbpISakykU6YZrKdHVi88qJJ1IQDrFPc7lDpz5tfQvWbeXm\nDLWjiJqMTn/3eYIiR+IVgefEQp+vc0UFCClvMCBrUMT5r67zKCBGRSCtqOtF\nF9e769OUjCmN1Ua1Pr4JF3yxUk4AW7LSmRl1S0LjJwkRemfR6BS4gpeghw3b\n+7UxTVww1Iwv7446/PUHdKhvNDjtKLyYlINI28tfnAxiseWQPpH4TLneDGXV\nV9IM\r\n=hcQ2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZYmmh+VulTBlVhkvY3fr7jlDFyAHBfUAkykGIOAdXFAiEAiGbWK9hLTlfRymO6J/eQqtv3dOytFwtibRqFxHNyctw="}]},"maintainers":[{"name":"davidyaha","email":"davidyaha@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-three_3.0.0-alpha.8_1547744809884_0.9786870629071949"},"_hasShrinkwrap":false},"3.0.0-alpha.9":{"name":"@davidyaha/expo-three","version":"3.0.0-alpha.9","description":"Utilities for using THREE.js on Expo","homepage":"https://github.com/expo/expo-three#readme","repository":{"type":"git","url":"git+https://github.com/expo/expo-three.git"},"bugs":{"url":"https://github.com/expo/expo-three/issues"},"main":"lib/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","lint":"eslint .","prettier":"eslint . --fix"},"directories":{"example":"examples","lib":"lib"},"keywords":["expo","three.js","graphics","opengl","gl","arkit"],"author":{"name":"Nikhilesh Sigatapu"},"license":"MIT","dependencies":{"@expo/browser-polyfill":"^0.0.1-alpha.3","color-temperature":"0.2.7","expo-asset-utils":"^0.0.4-alpha.2","three":"^0.100.0"},"peerDependencies":{"expo":">= 31.0.0","react-native":"*","three":"0.88.0"},"devDependencies":{"babel-jest":"^23.0.1","babel-preset-expo":"^4.0.0","babel-preset-react-native":"^4.0.0","eslint":"^4.19.1","eslint-config-react-native-prettier":"^1.0.1","flow-bin":"^0.26.0","jest":"^23.1.0","prettier":"^1.13.5"},"eslintConfig":{"extends":"expo"},"gitHead":"73466c5f30f49ee52dae74425218896621bdaef2","_id":"@davidyaha/expo-three@3.0.0-alpha.9","_npmVersion":"6.4.1","_nodeVersion":"9.11.2","_npmUser":{"name":"davidyaha","email":"davidyaha@gmail.com"},"dist":{"integrity":"sha512-bmzkEXipD6lh7mpdUTdFsQd3azDpsNEJqxFdqpiY/iR2y5jXXXC5diKPmNQ1HEWZAE3b0eOLxGsPPBmt0l3lwQ==","shasum":"fa0c888fc1b585826b62633b1f7f9bf612c6605d","tarball":"https://registry.npmjs.org/@davidyaha/expo-three/-/expo-three-3.0.0-alpha.9.tgz","fileCount":34,"unpackedSize":222228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQLqXCRA9TVsSAnZWagAAMC4QAJKqhCUgY0hD1hKjYiwQ\ni5gEK2Uywm+o46Q2ySoWBw5Su2Koo4V1CV+zAS0weO8x1mfsu0ZE07N3OY47\nKeX1ksfeHRdYUrOWAswmb1sXZ726chycoJzc1lVe6wc7tuJG2ATo51fmwt/G\nyrbrZHYlfN36SfqE2FG2CSgCt3nKrtbqeowYV9B3neqN8r0GdRZ28qPviJel\nO0D3WDmbQF+4MJ+EqTemvNs0L34WiOTisksnVtJ2793hLdx6BZB+4tEvq7C8\nuiUqisVsLJXPng8t7LN1jBaPfmRqaJZ267SF+mkONBBvgkd8ULV1YlWyHSzf\nDDTDH4FOlI3pr6VMWbFUSVp7Zcii4pJz65OtE7nh3Zqy5Nd1vcF4F5RG/AWm\nx8BtnQXlmdbkfjh/MBT/pW0wmhojkwXrx8SNPsAzFjmlGJ4invjg8cWETlor\n/EHldT0xIi/XKW8SbkVSwYJFkd80zgq6pNDuYfM6VsAig+xpBWF50QrzbJ1x\ns1nWoSD04hR7a3O6VFRWDlmEiHk91tckZ0moPFI0QQm/z+jRM9CWIFYywDAn\npHmlFpfXOU4ru5oaRAuTnVAVWAkjn3R6vaFK7HLTaYtwxaYfzIVT0aBe58wH\nMMwr7ky3jDFIJy5UARzE6We4Z/7d7GVaDz17Viih3PwdXG5sVCkNJBKMMx6n\nWtgy\r\n=2jUu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZl0fOrm57H6wHNzHlw+XHnAXRWGVrdico9tgvxI18BgIhAIo4mWm05t6UTu+i7uF0d9YUruV1GIMMeHOa8CdkZ+5v"}]},"maintainers":[{"name":"davidyaha","email":"davidyaha@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-three_3.0.0-alpha.9_1547745942911_0.40825998182475587"},"_hasShrinkwrap":false}},"time":{"created":"2019-01-17T16:46:05.167Z","3.0.0-alpha.7":"2019-01-17T16:46:05.471Z","modified":"2022-04-05T03:06:30.080Z","3.0.0-alpha.8":"2019-01-17T17:06:50.076Z","3.0.0-alpha.9":"2019-01-17T17:25:43.006Z"},"maintainers":[{"name":"davidyaha","email":"davidyaha@gmail.com"}],"description":"Utilities for using THREE.js on Expo","homepage":"https://github.com/expo/expo-three#readme","keywords":["expo","three.js","graphics","opengl","gl","arkit"],"repository":{"type":"git","url":"git+https://github.com/expo/expo-three.git"},"author":{"name":"Nikhilesh Sigatapu"},"bugs":{"url":"https://github.com/expo/expo-three/issues"},"license":"MIT","readme":"[![NPM](https://nodei.co/npm/expo-three.png)](https://nodei.co/npm/expo-three/)\n\n# expo-three\n\nTools for using three.js to build native 3D experiences 💙\n\n### Installation\n\n```bash\nyarn add three expo-three\n```\n\n### Usage\n\nImport the library into your JavaScript file:\n\n```js\nimport ExpoTHREE from 'expo-three';\n```\n\nGet a global instance of `three.js` from `expo-three`:\n\n```js\nimport { THREE } from 'expo-three';\n```\n\nYou can also import AR tools:\n\n```js\n// This alias is useful cuz Expo.AR could collide.\nimport { AR as ThreeAR } from 'expo-three';\n```\n\n> `ExpoTHREE.AR` is not the same as `Expo.AR`. Think of `Expo.AR` as a data provider for `ExpoTHREE.AR` to visualize.\n\n## Creating a Renderer\n\n### `ExpoTHREE.Renderer({ gl: WebGLRenderingContext, width: number, height: number, pixelRatio: number, ...extras })`\n\nGiven a `gl` from an\n[`Expo.GLView`](https://docs.expo.io/versions/latest/sdk/gl-view.html), return a\n[`THREE.WebGLRenderer`](https://threejs.org/docs/#api/renderers/WebGLRenderer)\nthat draws into it.\n\n```js\nconst renderer = new ExpoTHREE.Renderer(props);\nor;\n/// A legacy alias for the extended renderer\nconst renderer = ExpoTHREE.createRenderer(props);\n// Now just code some three.js stuff and add it to this! :D\n```\n\n### `ExpoTHREE.loadAsync()`\n\nA function that will asynchronously load files based on their extension.\n\n> **Notice**: Remember to update your `app.json` to bundle obscure file types!\n\n```json\n\"packagerOpts\": {\n  \"assetExts\": [\n    \"dae\",\n    \"obj\",\n    \"mtl\"\n  ]\n}\n```\n\n#### Props\n\n| Property      |           Type            | Description                                                      |\n| ------------- | :-----------------------: | ---------------------------------------------------------------- |\n| resource      |       PossibleAsset       | The asset that will be parsed asynchornously                     |\n| onProgress    |       (xhr) => void       | A function that is called with an xhr event                      |\n| assetProvider | () => Promise<Expo.Asset> | A function that is called whenever an unknown asset is requested |\n\n##### PossibleAsset Format\n\nexport type PossibleAsset = Expo.Asset | number | string | AssetFormat;\n\n```js\ntype PossibleAsset = number | string | Expo.Asset;\n```\n\n- `number`: Static file reference `require('./model.*')`\n- `Expo.Asset`: [Expo.Asset](https://docs.expo.io/versions/latest/sdk/asset.html)\n- `string`: A uri path to an asset\n\n#### Returns\n\nThis returns many different things, based on the input file.\nFor a more predictable return value you should use one of the more specific model loaders.\n\n#### Example\n\nA list of supported formats can be found [here](/examples/loader)\n\n```js\nconst texture = await ExpoTHREE.loadAsync('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');\n```\n\n## Loaders\n\n> Don't forget to add your extensions to `expo.packagerOpts.assetExts` in the `app.json`\n\n### loadAsync(assetReference, onProgress, onAssetRequested)\n\nA universal loader that can be used to load images, models, scenes, and animations.\nOptionally more specific loaders are provided with less complexity.\n\n```js\n// A THREE.Texture from a static resource.\nconst texture = await ExpoTHREE.loadAsync(require('./icon.png'));\nconst obj = await ExpoTHREE.loadAsync(\n  [\n    require('./cartman.obj'),\n    require('./cartman.mtl')\n  ],\n  null,\n  (imageName) => resources[imageName]\n);\nconst { scene } = await ExpoTHREE.loadAsync(\n  resources['./kenny.dae'],\n  onProgress,\n  resources\n);\n```\n\n### loadObjAsync({ asset, mtlAsset, materials, onAssetRequested, onMtlAssetRequested })\n\n#### Props\n\n- `asset`: a `obj` model reference that will be evaluated using `AssetUtils.uriAsync`\n- `mtlAsset`: an optional prop that will be loaded using `loadMtlAsync()`\n- `onAssetRequested`: A callback that is used to evaluate urls found within the `asset` and optionally the `mtlAsset`. You can also just pass in a dictionary of key values if you know the assets required ahead of time.\n- `materials`: Optionally you can provide an array of materials returned from `loadMtlAsync()`\n- `onMtlAssetRequested`: If provided this will be used to request assets in `loadMtlAsync()`\n\nThis function is used as a more direct method to loading a `.obj` model.\nYou should use this function to debug when your model has a corrupted format.\n\n```js\nconst mesh = await loadObjAsync({ asset: 'https://www.members.com/chef.obj' })\n```\n\nSee: [MTL Loader Demo](/example/screens/Loaders/MtlLoaderExample.js)\n\n### loadTextureAsync({ asset })\n\n#### Props\n\n- `asset`: an `Expo.Asset` that could be evaluated using `AssetUtils.resolveAsync` if `localUri` is missing or the asset hasn't been downloaded yet.\n\nThis function is used as a more direct method to loading an image into a texture.\nYou should use this function to debug when your image is using an odd extension like `.bmp`.\n\n```js\nconst texture = await loadTextureAsync({ asset: require('./image.png') })\n```\n\n### loadMtlAsync({ asset, onAssetRequested })\n\n#### Props\n\n- `asset`: a `mtl` material reference that will be evaluated using `AssetUtils.uriAsync`\n- `onAssetRequested`: A callback that is used to evaluate urls found within the `asset`, optionally you can just pass in a dictionary of key values if you know the assets required ahead of time.\n\n```js\nconst materials = await loadMtlAsync({\n  asset: require('chef.mtl'),\n  onAssetRequested:\n  modelAssets\n})\n```\n\nSee: [MTL Loader Demo](/example/screens/Loaders/MtlLoaderExample.js)\n\n### loadDaeAsync({ asset, onAssetRequested, onProgress })\n\n#### Props\n\n- `asset`: a reference to a `dae` scene that will be evaluated using `AssetUtils.uriAsync`\n- `onAssetRequested`: A callback that is used to evaluate urls found within the `asset`, optionally you can just pass in a dictionary of key values if you know the assets required ahead of time.\n- `onProgress`: An experimental callback used to track loading progress.\n\n```js\nconst { scene } = await loadDaeAsync({\n  asset: require('chef.dae'),\n  onAssetRequested: modelAssets,\n  onProgress: () => {}\n})\n```\n\nSee: [Collada Loader Demo](/example/screens/Loaders/DaeLoaderExample.js)\n\n## AR\n\nTools and utilites for working with ARKit in Expo.\n\nHere is an example of a basic AR enabled scene. [Also in snack form!](https://snack.expo.io/@bacon/basic-ar-scene)\n\n```js\nimport { AR } from 'expo';\nimport ExpoTHREE, { AR as ThreeAR, THREE } from 'expo-three';\nimport React from 'react';\nimport { View as GraphicsView } from 'expo-graphics';\n\nexport default class App extends React.Component {\n  render() {\n    // You need to add the `isArEnabled` & `arTrackingConfiguration` props.\n    return (\n      <GraphicsView\n        style={{ flex: 2 }}\n        onContextCreate={this.onContextCreate}\n        onRender={this.onRender}\n        onResize={this.onResize}\n        isArEnabled\n        isArRunningStateEnabled\n        isArCameraStateEnabled\n        arTrackingConfiguration={AR.TrackingConfigurations.World}\n      />\n    );\n  }\n\n  onContextCreate = ({ gl, scale: pixelRatio, width, height }) => {\n    AR.setPlaneDetection(AR.PlaneDetectionTypes.Horizontal);\n\n    this.renderer = new ExpoTHREE.Renderer({\n      gl,\n      pixelRatio,\n      width,\n      height,\n    });\n\n    this.scene = new THREE.Scene();\n    this.scene.background = new ThreeAR.BackgroundTexture(this.renderer);\n    this.camera = new ThreeAR.Camera(width, height, 0.01, 1000);\n  };\n\n  onResize = ({ x, y, scale, width, height }) => {\n    this.camera.aspect = width / height;\n    this.camera.updateProjectionMatrix();\n    this.renderer.setPixelRatio(scale);\n    this.renderer.setSize(width, height);\n  };\n\n  onRender = () => {\n    this.renderer.render(this.scene, this.camera);\n  };\n}\n```\n\n#### Enabling AR:\n\n- `Expo.GLView`: call `Expo.AR.startAsync(gl)` after `Expo.GLView.onContextCreate` has been called.\n- `expo-graphics`: you need to add the `isArEnabled` & `arTrackingConfiguration` props.\n\n### `new ExpoTHREE.AR.BackgroundTexture(renderer: WebGLRenderingContext)`\n\nextends a [`THREE.Texture`](https://threejs.org/docs/#api/textures/Texture) that\nreflects the live video feed of the AR session. Usually this is set as the\n`.background` property of a\n[`THREE.Scene`](https://threejs.org/docs/#api/scenes/Scene) to render the video\nfeed behind the scene's objects.\n\n```js\n// viewport width/height & zNear/zFar\nscene.background = new ExpoTHREE.AR.BackgroundTexture(renderer);\n```\n\nSee: [Basic Demo](/example/screens/AR/Basic.js)\n\n### `new ExpoTHREE.AR.Camera(width: number, height: number, zNear: number, zFar: number)`\n\nextends a [`THREE.PerspectiveCamera`](https://threejs.org/docs/#api/cameras/PerspectiveCamera)\nthat automatically updates its view and projection matrices to reflect the AR\nsession camera. `width, height` specify the dimensions of the target viewport to\nrender to and `near, far` specify the near and far clipping distances\nrespectively. The `THREE.PerspectiveCamera` returned has its `updateMatrixWorld`\nand `updateProjectionMatrix` methods overriden to update to the AR session's\nstate automatically.\n`THREE.PerspectiveCamera` that updates it's transform based on the device's orientation.\n\n```js\n// viewport width/height & zNear/zFar\nconst camera = new ExpoTHREE.AR.Camera(width, height, 0.01, 1000);\n```\n\nSee: [Basic Demo](/example/screens/AR/Basic.js)\n\n### `new ExpoTHREE.AR.Light()`\n\n`THREE.PointLight` that will update it's color and intensity based on ARKit's assumption of the room lighting.\n\n```js\nrenderer.physicallyCorrectLights = true;\nrenderer.toneMapping = THREE.ReinhardToneMapping;\n\nconst arPointLight = new ExpoTHREE.AR.Light();\narPointLight.position.y = 2;\nscene.add(arPointLight);\n\n// You should also add a Directional for shadows\nconst shadowLight = new THREE.DirectionalLight();\nscene.add(shadowLight);\n// If you would like to move the light (you would) then you will need to add the lights `target` to the scene.\n// The shadowLight.position adjusts one side of the light vector, and the target.position represents the other.\nscene.add(shadowLight.target);\n\n...\n// Call this every frame:\narPointLight.update()\n```\n\nSee: [Model Demo](/example/screens/AR/Model.js)\n\n### `new ExpoTHREE.AR.MagneticObject()`\n\nA `THREE.Mesh` that sticks to surfaces.\nUse this as a parent to models that you want to attach to surfaces.\n\n```js\nconst magneticObject = new ExpoTHREE.AR.MagneticObject();\nmagneticObject.maintainScale = false; // This will scale the mesh up/down to preserve it's size regardless of distance.\nmagneticObject.maintainRotation = true; // When true the mesh will orient itself to face the camera.\n\n// screenCenter is a normalized value = { 0.5, 0.5 }\nconst screenCenter = new THREE.Vector2(0.5, 0.5);\n...\n\n// Call this every frame to update the position.\nmagneticObject.update(camera, screenCenter);\n```\n\nSee: [Model Demo](/example/screens/AR/Model.js)\n\n### `new ExpoTHREE.AR.ShadowFloor()`\n\nA transparent plane that extends `THREE.Mesh` and receives shadows from other meshes.\nThis is used to render shadows on real world surfaces.\n\n```js\nrenderer.gammaInput = true;\nrenderer.gammaOutput = true;\nrenderer.shadowMap.enabled = true;\nconst shadowFloor = new ExpoTHREE.AR.ShadowFloor({ width: 1, height: 1, opacity: 0.6 }); // The opacity of the shadow\n```\n\nSee: [Model Demo](/example/screens/AR/Model.js)\n\n### `new ExpoTHREE.AR.CubeTexture()`\n\nUsed to load in a texture cube or skybox.\n\n- `assetForDirection`: This function will be called for each of the 6\n  directions.\n  - `({ direction })`: A direction string will be passed back looking for the\n    corresponding image. You can send back: `static resource`, `localUri`,\n    `Expo.Asset`, `remote image url`\n- `directions`: The order that image will be requested in. The default value is:\n  `['px', 'nx', 'py', 'ny', 'pz', 'nz']`\n\nExample:\n\n```js\nconst skybox = {\n\tnx: require('./nx.jpg'),\n\tny: require('./ny.jpg'),\n\tnz: require('./nz.jpg'),\n\tpx: require('./px.jpg'),\n\tpy: require('./py.jpg'),\n\tpz: require('./pz.jpg')\n}\nconst cubeTexture = new CubeTexture()\nawait cubeTexture.loadAsync({assetForDirection: ({ direction }) => skybox[direction]})\nscene.background = cubeTexture\n```\n\n### `new ExpoTHREE.AR.Points()`\n\nA utility object that renders all the raw feature points.\n\n```js\nconst points = new ExpoTHREE.AR.Points();\n// Then call this each frame...\npoints.update();\n```\n\nSee: [Points Demo](/example/screens/AR/Points.js)\n\n### `new ExpoTHREE.AR.Planes()`\n\nA utility object that renders all the ARPlaneAnchors\n\n```js\nconst planes = new ExpoTHREE.AR.Planes();\n// Then call this each frame...\nplanes.update();\n```\n\nSee: [Planes Demo](/example/screens/AR/Planes.js)\n\n## AR Functions\n\nThree.js calculation utilites for working in ARKit.\nMost of these functions are used for calculating the surfaces.\nYou should see if `ExpoTHREE.AR.MagneticObject()` has what you need before digging into these.\n[You can also check out this example provided by Apple](https://developer.apple.com/sample-code/wwdc/2017/PlacingObjects.zip)\n\n### hitTestWithFeatures(camera: THREE.Camera, point: THREE.Vector2, coneOpeningAngleInDegrees: number, minDistance: number, maxDistance: number, rawFeaturePoints: Array<any>)\n\n#### Props\n\n- camera: THREE.Camera\n- point: THREE.Vector2\n- coneOpeningAngleInDegrees: number\n- minDistance: number\n- maxDistance: number\n- rawFeaturePoints: Array<any>\n\n### hitTestWithPoint(camera: THREE.Camera, point: THREE.Vector2)\n\n#### Props\n\n- camera: THREE.Camera\n- point: THREE.Vector2\n\n### unprojectPoint(camera: THREE.Camera, point: THREE.Vector2)\n\n#### Props\n\n- camera: THREE.Camera\n- point: THREE.Vector2\n\n### hitTestRayFromScreenPos(camera: THREE.Camera, point: THREE.Vector2)\n\n#### Props\n\n- camera: THREE.Camera\n- point: THREE.Vector2\n\n### hitTestFromOrigin(origin: THREE.Vector3, direction: THREE.Vector3, rawFeaturePoints: ?Array<any>)\n\n#### Props\n\n- origin: THREE.Vector3\n- direction: THREE.Vector3\n- rawFeaturePoints: ?Array<any>\n\n### hitTestWithInfiniteHorizontalPlane(camera: THREE.Camera, point: Point, pointOnPlane: THREE.Vector3)\n\n#### Props\n\n- camera: THREE.Camera\n- point: THREE.Vector2\n- pointOnPlane: THREE.Vector3\n\n### rayIntersectionWithHorizontalPlane(rayOrigin: THREE.Vector3, direction: THREE.Vector3, planeY: number)\n\n#### Props\n\n- rayOrigin: THREE.Vector3\n- direction: THREE.Vector3\n- planeY: number\n\n### convertTransformArray(transform: Array<number>): THREE.Matrix4\n\n#### Props\n\n- transform: Array<number>\n\n### positionFromTransform(transform: THREE.Matrix4): THREE.Vector3\n\n#### Props\n\n- transform: THREE.Matrix4\n\n### worldPositionFromScreenPosition(camera: THREE.Camera, position: THREE.Vector2, objectPos: THREE.Vector3, infinitePlane = false, dragOnInfinitePlanesEnabled = false, rawFeaturePoints = null): { worldPosition: THREE.Vector3, planeAnchor: ARPlaneAnchor, hitAPlane: boolean }\n\n#### Props\n\n- camera: THREE.Camera\n- position: THREE.Vector2\n- objectPos: THREE.Vector3\n- infinitePlane = false\n- dragOnInfinitePlanesEnabled = false\n- rawFeaturePoints = null\n\n### positionFromAnchor(anchor: ARAnchor): THREE.Vector3\n\n#### Props\n\n- anchor: { worldTransform: Matrix4 }\n\n### improviseHitTest(point, camera: THREE.Camera): ?THREE.Vector3\n\n#### Props\n\n- point: THREE.Vector2\n- camera: THREE.Camera\n\n---\n\n## `ExpoTHREE.utils`\n\n### `ExpoTHREE.utils.alignMesh()`\n\n#### Props\n\n```js\ntype Axis = {\n  x?: number,\n  y?: number,\n  z?: number,\n};\n```\n\n| Property |    Type     | Description                       |\n| -------- | :---------: | --------------------------------- |\n| mesh     | &THREE.Mesh | The mesh that will be manipulated |\n| axis     |    ?Axis    | Set the relative center axis      |\n\n#### Example\n\n```js\nExpoTHREE.utils.alignMesh(mesh, { x: 0.0, y: 0.5 });\n```\n\n---\n\n### `ExpoTHREE.utils.scaleLongestSideToSize()`\n\n#### Props\n\n| Property |    Type     | Description                                                  |\n| -------- | :---------: | ------------------------------------------------------------ |\n| mesh     | &THREE.Mesh | The mesh that will be manipulated                            |\n| size     |   number    | The size that the longest side of the mesh will be scaled to |\n\n#### Example\n\n```js\nExpoTHREE.utils.scaleLongestSideToSize(mesh, 3.2);\n```\n\n---\n\n### `ExpoTHREE.utils.computeMeshNormals()`\n\nUsed for smoothing imported geometry, specifically when imported from `.obj` models.\n\n#### Props\n\n| Property |    Type     | Description                                       |\n| -------- | :---------: | ------------------------------------------------- |\n| mesh     | &THREE.Mesh | The mutable (inout) mesh that will be manipulated |\n\n#### Example\n\n````js\nExpoTHREE.utils.computeMeshNormals(mesh);\n```\n\n---\n\n## THREE Extensions\n\n### `suppressExpoWarnings`\n\nA function that suppresses EXGL compatibility warnings and logs them instead.\nYou will need to import the `ExpoTHREE.THREE` global instance to use this. By\ndefault this function will be activated on import.\n\n* `shouldSuppress`: boolean\n\n```js\nimport { THREE } from 'expo-three';\nTHREE.suppressExpoWarnings();\n````\n\n---\n\n## Links\n\nSomewhat out of date\n\n- [Loading Text](https://github.com/EvanBacon/expo-three-text)\n- [ARKit Tutorial](https://blog.expo.io/introducing-expo-ar-mobile-augmented-reality-with-javascript-powered-by-arkit-b0d5a02ff23)\n- [ARKit Example](https://snack.expo.io/@bacon/arkit-example)\n\n- [three.js docs](https://threejs.org/docs/)\n\n- [Random Demos](https://github.com/EvanBacon/expo-three-demo)\n- [Game: Expo Sunset Cyberspace](https://github.com/EvanBacon/Sunset-Cyberspace)\n- [Game: Crossy Road](https://github.com/EvanBacon/Expo-Crossy-Road)\n- [Game: Nitro Roll](https://github.com/EvanBacon/Expo-Nitro-Roll)\n- [Game: Pillar Valley](https://github.com/EvanBacon/Expo-Pillar-Valley)\n- [Voxel Terrain](https://github.com/EvanBacon/Expo-Voxel)\n","readmeFilename":"README.md"}