GUI controls not working React babylonjs immersive-ar

I was creating a web app using react Babylon but GUI controls are not working in the immersive mode (not able to click the button) but I cried creating the same scene in the playground, GUI controls are working fine in immersive - ar. Is there any specific way to enable GUI in immersive -ar in react Babylon?

I am not sure how you attached everything to react, so it is hard to say. Don’t forget - the pointer events in AR are emulated by us. It is not a native html event and cannot be used outside of Babylon. Thenative event is “select”, but this will provide you with the native XR event and not the babylon event.

I am using Non Declarative Approach in React Babylon and enabling immersive-ar in OnSceneMount

If it does work in the playground, it means that the event work internally in Babylon. You will need to check the connection to react and see how you can get those events working there as well.
I don’t have a lot of experience with babylon-react, but maybe @brianzinn can help here.

hi @surabhi_arora can you share the playground you refer to and some sample code for react? Also, indicate which libraries you are using as well, if any, for your onSceneMount.

1 Like

Got the issue!
adaptToDeviceRatio={true} was creating the problem
Removing it from the engine tag solves the issue.

@surabhi_arora - that setting should only affect performance and not functionality. Would be curious if you tried with different device pixel ratios (I have 1.5 and 2.0 screens). It could be how you have done CSS on the canvas itself with fixed width or maybe not resizing correctly. Would be really useful to see a repro as with that setting off I have not seen issues except for the lower quality/pixelation.