Hello, newbie here!
Apologies if my question is a bit basic.
I’m trying to add AR support to my existing Babylon.js setup. So far, I’ve managed to successfully load a sample car model.
Here’s the code I’m working with:
public async testARSupport() {
// Hide other meshes since I only want to show the car
let meshToHide = this.scene.getMeshById("Sphere_low");
if (meshToHide) {
meshToHide.isVisible = false;
}
// Enable WebXR AR support with the 'hit-test' feature
const xr = await this.scene.createDefaultXRExperienceAsync({
uiOptions: {
sessionMode: "immersive-ar",
},
optionalFeatures: true,
});
const xrFeaturesManager = xr.baseExperience.featuresManager;
xrFeaturesManager.enableFeature(WebXRBackgroundRemover.Name);
const domOverlayFeature = xrFeaturesManager.enableFeature(
WebXRFeatureName.DOM_OVERLAY,
1,
{
element: "#rootUI",
},
undefined,
false
) as WebXRDomOverlay;
xr.baseExperience.onStateChangedObservable.add((eventData: WebXRState) => {
console.log(domOverlayFeature.domOverlayType);
});
// Enable pointer selection (handles multi-touch and ray pointer interaction)
xrFeaturesManager.enableFeature(
WebXRFeatureName.POINTER_SELECTION,
"latest",
{
xrInput: xr.input,
enablePointerSelectionOnAllControllers: true,
}
);
}
I’ve also added multi-touch support so the user can interact with the car using pan, rotate, and pinch gestures. For that, I’m using scene.onPointerObservable like this:
this.scene.onPointerObservable.add((pointerInfo, eventState) => {
console.log(pointerInfo);
if (pointerInfo.type === PointerEventTypes.POINTERMOVE) {
console.log('AR: POINTER X:', pointerInfo.event.clientX);
console.log('AR: POINTER Y:', pointerInfo.event.clientY);
}
});
However, it’s only detecting one touch at a time. Am I missing something here?
I’d like to be able to capture at least two touches to detect gestures like pan, rotate, or pinch.
Any help would be greatly appreciated!
Pinging XR expert @RaananW – thank you in advance!
