{"id":25077346,"url":"https://github.com/expo/expo-three-ar","last_synced_at":"2025-04-15T02:52:12.939Z","repository":{"id":35091076,"uuid":"205473550","full_name":"expo/expo-three-ar","owner":"expo","description":"Utilities for using Expo AR with THREE.js","archived":false,"fork":false,"pushed_at":"2022-12-10T00:34:47.000Z","size":2612,"stargazers_count":75,"open_issues_count":31,"forks_count":13,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-15T02:52:00.131Z","etag":null,"topics":["ar-session","arkit","arplaneanchor","camera","expo","model-demo","props","react","react-native","surfaces","three","vector2","video-feed"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/expo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-31T00:18:19.000Z","updated_at":"2025-03-19T10:48:20.000Z","dependencies_parsed_at":"2022-09-18T20:42:11.487Z","dependency_job_id":null,"html_url":"https://github.com/expo/expo-three-ar","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/expo%2Fexpo-three-ar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/expo%2Fexpo-three-ar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/expo%2Fexpo-three-ar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/expo%2Fexpo-three-ar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/expo","download_url":"https://codeload.github.com/expo/expo-three-ar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248997086,"owners_count":21195797,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ar-session","arkit","arplaneanchor","camera","expo","model-demo","props","react","react-native","surfaces","three","vector2","video-feed"],"created_at":"2025-02-07T02:24:41.013Z","updated_at":"2025-04-15T02:52:12.917Z","avatar_url":"https://github.com/expo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003e This package is no longer supported as Expo Go's built-in AR support is no longer supported. This package may be reused in the future if new native package is created. \n\n\n# expo-three-ar\n\nTools for using three.js to build native AR experiences with Expo. This library is **iOS** only.\n\n\u003e This library is a side-project and should not be considered production ready\n\n### Installation\n\n```bash\nyarn add three expo-three-ar\n```\n\n### Usage\n\nImport the library into your JavaScript file:\n\n```js\nimport * as ThreeAR from 'expo-three-ar';\n```\n\n### Enabling AR\n\n- `expo-gl`: call `AR.startAsync(gl)` after `GLView.onContextCreate` has been called.\n- `expo-graphics`: you need to add the `isArEnabled={true}` prop\n\n## API\n\n### `new 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 \u0026 zNear/zFar\nscene.background = new BackgroundTexture(renderer);\n```\n\n### `new 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 \u0026 zNear/zFar\nconst camera = new Camera(width, height, 0.01, 1000);\n```\n\n### `new 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 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\n### `new 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 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\n### `new 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 ShadowFloor({\n  width: 1,\n  height: 1,\n  opacity: 0.6,\n}); // The opacity of the shadow\n```\n\n### `new Points()`\n\nA utility object that renders all the raw feature points.\n\n```js\nconst points = new Points();\n// Then call this each frame...\npoints.update();\n```\n\n### `new Planes()`\n\nA utility object that renders all the ARPlaneAnchors\n\n```js\nconst planes = new Planes();\n// Then call this each frame...\nplanes.update();\n```\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 `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\u003cany\u003e)\n\n#### Props\n\n- camera: `THREE.Camera`\n- point: `THREE.Vector2`\n- coneOpeningAngleInDegrees: `number`\n- minDistance: `number`\n- maxDistance: `number`\n- rawFeaturePoints: `Array\u003cany\u003e`\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\u003cany\u003e)\n\n#### Props\n\n- origin: `THREE.Vector3`\n- direction: `THREE.Vector3`\n- rawFeaturePoints: `?Array\u003cany\u003e`\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\u003cnumber\u003e): THREE.Matrix4\n\n#### Props\n\n- transform: `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: `boolean = false`\n- dragOnInfinitePlanesEnabled: `boolean = false`\n- rawFeaturePoints: `any = 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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexpo%2Fexpo-three-ar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexpo%2Fexpo-three-ar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexpo%2Fexpo-three-ar/lists"}