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 an XRAnchor 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

Specification
WebXR Hit Test Module # xr-hit-test-result-interface

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
14.0


getPose
81
81
No
No
No
No
No
81
No
No
No
13.0



See also
 XRTransientInputHitTestResult XRPose XRAnchor 


Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide.


Last modified: Feb 18, 2022, by MDN contributors


    
{'path': 'public/docs/dom/xrhittestresult.html', 'source': 'DevDocs.IO'}