XRHitTestResult
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The XRHitTestResult
interface of the WebXR Device API contains a single result of a hit test. You can get an array of XRHitTestResult
objects for a frame by calling XRFrame.getHitTestResults()
.
Properties
None.
Methods
XRHitTestResult.createAnchor()
-
Returns a
Promise
that resolves with anXRAnchor
created from the hit test result. XRHitTestResult.getPose()
-
Returns the
XRPose
of the hit test result relative to the given base space.
Examples
Getting XRHitTestResult
objects within the frame loop
In addition to showing XRHitTestResult
within a frame loop, this example demonstrates a few things you must do before requesting this object. While setting up the session, specify "hit-test"
as one of the requiredFeatures
. Next, call XRSession.requestHitTestSource()
with the desired references. (Obtain this by calling XRSession.requestReferenceSpace()
.) This returns a XRHitTestSource
. That you will use in the frame loop to get XRHitTestResult
objects.
const xrSession = navigator.xr.requestSession("immersive-ar", { requiredFeatures: ["local", "hit-test"] }); let hitTestSource = null; xrSession.requestHitTestSource({ space : viewerSpace, // obtained from xrSession.requestReferenceSpace("viewer"); offsetRay : new XRRay({y: 0.5}) }).then((viewerHitTestSource) => { hitTestSource = viewerHitTestSource; }); // frame loop function onXRFrame(time, xrFrame) { let hitTestResults = xrFrame.getHitTestResults(hitTestSource); // do things with the hit test results }
Getting the hit test result's pose
Use getPose()
to query the result's pose.
let hitTestResults = xrFrame.getHitTestResults(hitTestSource); if (hitTestResults.length > 0) { let pose = hitTestResults[0].getPose(referenceSpace); }
Creating an anchor from a hit test result
Once you find intersections on real-world surfaces using hit testing, you can create an XRAnchor
to attach a virtual object to that location.
hitTestResult.createAnchor().then((anchor) => { // add anchored objects to the scene }, (error) => { console.error("Could not create anchor: " + error); });
Specifications
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
XRHitTestResult |
81 |
81 |
No |
No |
No |
No |
No |
81 |
No |
No |
No |
13.0 |
createAnchor |
85 |
85 |
No |
No |
No |
No |
No |
85 |
No |
No |
No |
No |
getPose |
81 |
81 |
No |
No |
No |
No |
No |
81 |
No |
No |
No |
13.0 |
See also
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/XRHitTestResult