Hit Test

Hit Test refers to the process of determining the point of intersection between a ray (or a touch) and the objects in a 3D scene. It is an essential feature in interactive 3D applications as it allows users to interact with 3D objects by pointing, touching, or selecting them. This technique is widely used in scenarios like object selection, aiming, placement, and other interactions within a virtual or augmented environment.

In the following example, a floating marker (a donut-shaped object) appears on real-world surfaces detected by the device’s camera. The scene allows the user to look around and interact with the environment, while the system continuously analyzes the surroundings to find flat surfaces, like floors or tables, and places the marker on them when detected. If no surface is found, the marker disappears.

🥽📱

To experience the following example, an XR headset or a mobile with AR capabilities is required. Additionally, if you are using an XR headset, you may need to configure your environment (for instance, for Oculus Quest 3, refer to this guide for instructions on setting up your space).

const xrExperience = useXrExperience();
const torusRef = useRef<Mesh>(null);
 
useEffect(() => {
    const featuresManager = xrExperience.baseExperience.featuresManager;
    const xtTest = featuresManager.enableFeature(WebXRHitTest, 'latest') as WebXRHitTest;
    xtTest.onHitTestResultObservable.add(result => {
        const torus = torusRef.current!;
        if (result.length) {
            torus.isVisible = true;
            result[0].transformationMatrix.decompose(torus.scaling, torus.rotationQuaternion as Quaternion, torus.position);
        } else {
            torus.isVisible = false;
        }
    });
}, []);
 
// ...
 
<>
    <torus ref={torusRef} name='torus' options={{ diameter: 0.15, thickness: 0.05 }} isVisible={torusRef.current?.isVisible} rotationQuaternion={new Quaternion()}>
        <standardMaterial name='material' diffuseColor={Color3.FromHexString('#1e90ff')} />
    </torus>
</>

Video captured with Oculus Quest 3.

Learn More

For landing zones, advanced use cases and customizations, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/webXR/WebXRSelectedFeatures/WebXTTeleportation/.

Augmented/Mixed Reality Anchors