如何通过viewer.loadModel()加载API返回的GLTF压缩包模型？

我正在开发大型项目，需使用viewer.loadModel()加载GLTF模型。当前与合作方协作，从其API获取包含gltf文件和二进制文件的压缩包，客户端基于React+TypeScript开发。

当前尝试的加载代码 #

const gltfBytes = Uint8Array.from(window.atob(response), (c) => c.charCodeAt(0));
const zip = new JSZip();
await zip.loadAsync(gltfBytes);
const files = zip.files;
const gltf = await files["scene.gltf"].async("uint8array");
const bin = await files["scene.bin"].async("uint8array");
const gltfBlob = new Blob([gltf], {type: "model/gltf+json"});
const binBlob = new Blob([bin], {type: "application/octet-stream"});
const gltfUrl = URL.createObjectURL(gltfBlob);
//const binUrl = URL.createObjectURL(binBlob);
viewer.loadModel(gltfUrl.substring("blob:".length) + ".gltf", null);

错误现象 #

我尝试了多种viewer.loadModel()的参数组合，但均未成功。生成的URL格式为http://localhost:3000/05bff201-dd63-47fb-800d-3860dd3c676b.gltf，使用该URL调用时，加载一段时间后提示"Network problems"（网络问题）。

疑问 #

是客户端实现方式有误，还是通过API传输GLTF及其二进制文件的整体方案本身不合理？

已尝试的调用方式 #

viewer.loadModel(gltfUrl + ".gltf", null);
viewer.loadModel(gltfUrl.substring("blob:".length) + ".gltf", null);
viewer.loadModel(gltfUrl.substring("blob:".length), {binary: binUrl.substring("blob:".length)}, null);

内容的提问来源于stack exchange，提问作者mgerhardt