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 anXRAnchor
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
Specification |
---|
WebXR Hit Test Module # xr-hit-test-result-interface |
Browser compatibility
BCD tables only load in the browser