XRHitTestResult
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.
Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
TheXRHitTestResult interface of theWebXR Device API contains a single result of a hit test. You can get an array ofXRHitTestResult objects for a frame by callingXRFrame.getHitTestResults().
Instance properties
None.
Instance methods
XRHitTestResult.createAnchor()ExperimentalReturns a
Promisethat resolves with anXRAnchorcreated from the hit test result.XRHitTestResult.getPose()ExperimentalReturns the
XRPoseof the hit test result relative to the given base space.
Examples
GettingXRHitTestResult objects within the frame loop
In addition to showingXRHitTestResult 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 therequiredFeatures. Next, callXRSession.requestHitTestSource() with the desired references. (Obtain this by callingXRSession.requestReferenceSpace().) This returns aXRHitTestSource. That you will use in the frame loop to getXRHitTestResult 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 loopfunction onXRFrame(time, xrFrame) { let hitTestResults = xrFrame.getHitTestResults(hitTestSource); // do things with the hit test results}Getting the hit test result's pose
UsegetPose() 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 anXRAnchor 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 |