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

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