I loaded a glb file using THREE.js GLTFLoader and then exported it to usdz using USDZ Exporter. When I tried to open it in the browser, it showed up in Safari but didn't appear in ARkit in object mode. Instead, it appeared above my head in AR mode. This is a simple file.
This was my attempt to make it work.
const loader = new GLTFLoader().setPath(`${origin}${folderPath}`);
loader.load(modelName, async function (gltf) {
model = gltf.scene;
scene.add(model);
const exporter = new USDZExporter();
const arraybuffer = await exporter.parse(model );
const blob = new Blob([arraybuffer], { type: 'application/octet-stream' });
const link = document.getElementById('usdz-link');
link.style.display = ''
link.href = URL.createObjectURL(blob);
I also tried centering the glb model with this code.
const box = new THREE.Box3().setFromObject(gltf.scene);
const center = box.getCenter(new THREE.Vector3());
var sceneCopy=gltf.scene.clone();
sceneCopy.position.x += (gltf.scene.position.x - center.x);
sceneCopy.position.y += (gltf.scene.position.y - center.y);
sceneCopy.position.z += (gltf.scene.position.z - center.z);
However, using sceneCopy to export to usdz did not solve the issue.