USDZExporter does not work in iphone

Hello, everybody!
I am trying to export GLTF model to GLB and USDZ file in react project.
GLTF model is loading image dynamically.
If export GLTF model to GLB and USDZ file, GLB model is working well in Android but USDZ is not working well in iphone.
USDZ should be a model that image loaded in prebuilt GLTF model.
But current this is a only image model.
This is my code.

And this is my exported usdz file. You can check this file in your iphone.
dog.usdz (16 Bytes)

Is there any way to fix this bug?
Please let me know if you have experience with this issue.
Thank you.

Could you share the original glTF/GLB file? And does converting it to USDZ on three.js editor work for you?

Thank you for your reply.
How are you?

This is the original GLTF model.

And this is an exported GLB and USDZ file.

I want a GLB and USDZ model that replaces the default image to a new image(this is one user uploaded) from the prebuilt GLTF model.
I think GLB is good but USDZ is bad.
If you have a solution to fix this bug, please help me.
Thank you.

The USDZ in your first post is tiny (16 bytes) so I think something must be wrong there, but the version in the last post, and what i’m getting when exporting the USDZ from the three.js Editor, both look fine to me. So it does seem like USDZExporter can handle the file.

In the original code there might be some issue with how the file is being downloaded, could you share that code or post a live demo?

Thank you for your reply.
First post, I think I send you the wrong USDZ file due to my carelessness.
But second file is correct.
When exporting GLTF to GLB and USDZ file, exported files are stored in server and File download is linked a URL to file path in server.
So I think there might be no issue with how the file is being downloaded.
I want to get a USDZ model like GLB model.

I will share my code with you. (3.9 MB)

If you have time to check my code, I appreciate you.
Sorry for bothering you…

It looks like USDZExporter is doing the right thing here and creating a valid file. A quick way I’m testing this is to drop this bit of code into a three.js official example that load a glTF file:

const exporter = new USDZExporter();
const arraybuffer = await exporter.parse( gltf.scene );
const usdz = new Blob( [ arraybuffer ], { type: 'application/octet-stream' } );

You can open the printed URL in your browser and it should download the file. You’ll need to rename it with a .usdz extension but after doing that it does seem to work fine. Beyond that I suspect the issue is related to the server upload + download round trip. If you have the option of downloading the file directly in the browser rather than uploading, that would simplify things, otherwise I think you may need to get help from someone more familiar with React, as this is a bit more React code than I’m comfortable debugging.

Thank you for your reply.
Looking forward to our cooperation in IT Development in the future.

And hope you are safe from COVID-19.
Best regards.

Hello. How are you?
Sorry for bothering you again.
I deployed my Three.js project on AWS and tested AR in the iphone and safari browser.
The 3D model is rendering correctly but I can’t find the AR button there.
The section on rendering 3D models is as follows:
Please help me how to solve this problem.
Thank you.