{"_id":"5bec8a15287d1b00426efe48","project":"578c4badbd223d2000cc1441","version":{"_id":"5bec8a15287d1b00426efe54","project":"578c4badbd223d2000cc1441","__v":0,"forked_from":"5ba2b5747091250003437507","createdAt":"2018-04-23T20:03:35.726Z","releaseDate":"2018-04-23T20:03:35.726Z","categories":["5bec8a15287d1b00426efdc6","5bec8a15287d1b00426efdc7","5bec8a15287d1b00426efdc8","5bec8a15287d1b00426efdc9","5bec8a15287d1b00426efdca","5bec8a15287d1b00426efdcb","5bec8a15287d1b00426efdcc","5bec8a15287d1b00426efdcd","5bec8a15287d1b00426efdce"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.12.0","version":"2.12.0"},"category":{"_id":"5bec8a15287d1b00426efdcd","project":"578c4badbd223d2000cc1441","version":"5bec8a15287d1b00426efe54","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2018-05-24T22:57:04.021Z","from_sync":false,"order":4,"slug":"augmented-reality","title":"Augmented Reality"},"user":"579a69d53de0a217007eda56","githubsync":"","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2018-05-24T23:01:54.729Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"Viro supports numerous mechanisms through which users can interact with both the real world and the virtual UI. These are detailed below.\n[block:api-header]\n{\n  \"title\": \"AR Hit Testing\"\n}\n[/block]\n```<ViroARScene>``` has a variety of methods used to \"hit-test\" against the real-world. These hit tests can be used to determine, to the best of Viro's ability, what real-world features exist at a given point on the 2D screen. Note that since a single 2D point on the view corresponds to a 3D ray in the scene, multiple results may be returned (each at a different depth). The results may be anchors -- like planes -- or they may be feature points that have not yet been fully identified.\n\nIn the example below we perform an AR hit test using a ray. For more detail on AR hit tests, see the [ViroARScene](doc:viroarscene) and [ARHitTestResult](doc:viroarscene#ARHitTestResult) references.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"      this.refs[\\\"arscene\\\"].performARHitTestWithRay(orientation.forward).then((results)=>{\\n  for (var i = 0; i < results.length; i++) {\\n    let result = results[i];\\n    if (result.type == \\\"ExistingPlaneUsingExtent\\\") {\\n       // We hit a plane, do something!\\n    }\\n  }\\n})\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Fixed to World Dragging\"\n}\n[/block]\nNormally when dragging a ```<ViroNode>``` (by setting its ```onDrag``` property) the Node, when dragged, stays at a fixed distance from from the user, as though the user is dragging the Node across the inner surface of a sphere. This is called ```FixedDistance``` dragging. \n\nViro also supports ```FixedToWorld``` dragging in AR, where instead of keeping a dragged Node's distance from the user fixed, the dragged Node's distance is instead determined by its intersection with the nearest real-world object. This is useful for dragging a virtual object across a real-world surface, for example. To enable this, set the node's ```dragType``` property to ```FixedToWorld```.\n[block:api-header]\n{\n  \"title\": \"Fixed to Plane Dragging\"\n}\n[/block]\nFixed to Plane dragging enables you to specify a plane atop which a ```<ViroNode>``` can be dragged. The node will not be able to leave this plane. You can also specify a maximum distance away from the camera that the node can travel, to prevent users from dragging the node out to infinity. To do this, set the node's ```dragType``` property to ```FixedToPlane```. Then to define the plane, set the ```dragPlane``` property. You define the plane along which the Node can be dragged by specifying any point on the plane, and the normal vector of the plane.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"dragPlane: PropTypes.shape({\\n  planePoint  : PropTypes.arrayOf(PropTypes.number),\\n  planeNormal : PropTypes.arrayOf(PropTypes.number),\\n  maxDistance : PropTypes.number\\n}),\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIn the example below we allow a Box to only be dragged about a horizontal plane one meter below us, and we stop it from traveling more than five meters away from us.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ViroNode position={[0, -1, -1]} \\n          dragType=\\\"FixedToPlane\\\"\\n          dragPlane={{planePoint:[0, -1, 0], \\n                      planeNormal:[0, 1, 0],\\n                      maxDistance:5}}\\n</ViroNode>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"ar-interaction","type":"basic","title":"Interaction"}
Viro supports numerous mechanisms through which users can interact with both the real world and the virtual UI. These are detailed below. [block:api-header] { "title": "AR Hit Testing" } [/block] ```<ViroARScene>``` has a variety of methods used to "hit-test" against the real-world. These hit tests can be used to determine, to the best of Viro's ability, what real-world features exist at a given point on the 2D screen. Note that since a single 2D point on the view corresponds to a 3D ray in the scene, multiple results may be returned (each at a different depth). The results may be anchors -- like planes -- or they may be feature points that have not yet been fully identified. In the example below we perform an AR hit test using a ray. For more detail on AR hit tests, see the [ViroARScene](doc:viroarscene) and [ARHitTestResult](doc:viroarscene#ARHitTestResult) references. [block:code] { "codes": [ { "code": " this.refs[\"arscene\"].performARHitTestWithRay(orientation.forward).then((results)=>{\n for (var i = 0; i < results.length; i++) {\n let result = results[i];\n if (result.type == \"ExistingPlaneUsingExtent\") {\n // We hit a plane, do something!\n }\n }\n})", "language": "javascript" } ] } [/block] [block:api-header] { "title": "Fixed to World Dragging" } [/block] Normally when dragging a ```<ViroNode>``` (by setting its ```onDrag``` property) the Node, when dragged, stays at a fixed distance from from the user, as though the user is dragging the Node across the inner surface of a sphere. This is called ```FixedDistance``` dragging. Viro also supports ```FixedToWorld``` dragging in AR, where instead of keeping a dragged Node's distance from the user fixed, the dragged Node's distance is instead determined by its intersection with the nearest real-world object. This is useful for dragging a virtual object across a real-world surface, for example. To enable this, set the node's ```dragType``` property to ```FixedToWorld```. [block:api-header] { "title": "Fixed to Plane Dragging" } [/block] Fixed to Plane dragging enables you to specify a plane atop which a ```<ViroNode>``` can be dragged. The node will not be able to leave this plane. You can also specify a maximum distance away from the camera that the node can travel, to prevent users from dragging the node out to infinity. To do this, set the node's ```dragType``` property to ```FixedToPlane```. Then to define the plane, set the ```dragPlane``` property. You define the plane along which the Node can be dragged by specifying any point on the plane, and the normal vector of the plane. [block:code] { "codes": [ { "code": "dragPlane: PropTypes.shape({\n planePoint : PropTypes.arrayOf(PropTypes.number),\n planeNormal : PropTypes.arrayOf(PropTypes.number),\n maxDistance : PropTypes.number\n}),", "language": "javascript" } ] } [/block] In the example below we allow a Box to only be dragged about a horizontal plane one meter below us, and we stop it from traveling more than five meters away from us. [block:code] { "codes": [ { "code": "<ViroNode position={[0, -1, -1]} \n dragType=\"FixedToPlane\"\n dragPlane={{planePoint:[0, -1, 0], \n planeNormal:[0, 1, 0],\n maxDistance:5}}\n</ViroNode>", "language": "javascript" } ] } [/block]