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 in secure contexts (HTTPS), in some or all supporting browsers.

Experimental:This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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().

Instance properties

None.

Instance methods

XRHitTestResult.createAnchor()Experimental: Returns a Promise that resolves with an XRAnchor created from the hit test result.
XRHitTestResult.getPose()Experimental: 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