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()-
Returns a
Promisethat resolves with anXRAnchorcreated from the hit test result. XRHitTestResult.getPose()-
Returns the
XRPoseof 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 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
XRHitTestResult
|
|
|
|
|
|
|
|
|
|
|
|
|
createAnchor
|
|
|
|
|
|
|
|
|
|
|
|
|
getPose
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.