从threejs usdzExporter转换的文件未显示在Iphone上

Question

我使用THRE.js GLTFLoader加载glb文件，然后使用USDZ Exporter将其导出到USDZ，然后当我尝试在浏览器上打开它时，它在saferi上打开，但在对象模式下没有显示在arkit上在AR模式下出现在我的头顶上，这是一个简单的文件

https://drive.google.com/file/d/1uAZNZLWI-zdtjcetfT2tIBh9a0tyzGyi/view?usp=sharing

这是我的试用

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);

我也试着用这个代码来集中glb模型

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);

然后使用sceneCopy导出到usdz，但不幸的是，这对我的没有帮助

Answer 1

我想我们通过slack回答了这个问题，但我会把它放在这里结束。。

模型的偏移量需要接近原点，才能在iPad/iPhone上的快速浏览查看器中正确显示。

您可以通过更改这三条线来手动设置偏移。。。https://github.com/wallabyway/quicklook-example/blob/6f1e1453b983e0effc4ad82b2eda5eac905865a9/alliedbim-piping.gltf#L1023-L1025

这与这3个值相反：

与这3个值相反：https://github.com/wallabyway/quicklook-example/blob/6f1e1453b983e0effc4ad82b2eda5eac905865a9/alliedbim-piping.gltf#L1044-11046

基本上，当您在forge-convert-utils中使用过滤时，center选项不考虑偏移。

有一个GitHub回购功能请求来修复此问题。。。

https://github.com/petrbroz/forge-convert-utils/issues/44

以及具有可能解决方案的分支。https://github.com/petrbroz/forge-convert-utils/commit/bb4bd0a13c685c34966a3bf5c2784ba9b1343a7d