AR content missing on device but can be viewed in chrome webXR emulator

Hello,
I am trying to place a three.js scene into the AR world.
I can view the content in Chrome WebXR emulator but from my device, I get a black screen in iPhone(12) and in the case of Android (OnePlus 7T) the camera is on but the scene is not projected.
I have attached a screen recording from my iPhone.

  • three.js and gltfLoader version: 128

I am not getting any errors in the console, so I am out of leads. Please throw some light on how can I fix this.

Have you tried using the model-viewer library?
There you can stipulate multiple viewer types and it will choose the one supported by the device.
https://modelviewer.dev/

It also has the handy ability to convert .glb to .usdz when viewing on iOS, so you can generate one model for both platforms.