W3cubDocs

/Web APIs

XRHitTestResult

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

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	68	No	No	81	No	58	No	13.0
`createAnchor`	85	85	No	No	71	No	No	85	No	60	No	14.0
`getPose`	81	81	No	No	68	No	No	81	No	58	No	13.0