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

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.

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