如何使用JSZip读取GLB文件？

GLB是二进制格式的3D模型文件，不能直接用async("string")读取——字符串编码会破坏二进制数据的完整性。下面是正确的操作步骤：

1. 读取原始二进制数据 #

使用async("arraybuffer")获取GLB文件的原始二进制缓冲区，这是处理二进制文件的标准方式：

zip.file("your-model.glb").async("arraybuffer").then(function(buffer) {
  // buffer 就是GLB文件的原始二进制数据
});

2. （可选）转换为Base64字符串 #

如果需要将二进制数据转为Base64格式（比如生成Data URL），可以通过以下函数转换：

// 将ArrayBuffer转为Base64字符串
function arrayBufferToBase64(buffer) {
  const uint8Array = new Uint8Array(buffer);
  let binary = '';
  const len = uint8Array.byteLength;
  for (let i = 0; i < len; i++) {
    binary += String.fromCharCode(uint8Array[i]);
  }
  return btoa(binary);
}

// 结合读取流程使用
zip.file("your-model.glb").async("arraybuffer").then(function(buffer) {
  const glbBase64 = arrayBufferToBase64(buffer);
  // 可以生成Data URL用于加载
  const dataUrl = `data:model/gltf-binary;base64,${glbBase64}`;
});

3. 直接加载到3D库（如Three.js） #

如果你的目标是将GLB加载到Three.js这类3D引擎中，无需转Base64，直接用ArrayBuffer即可：

// 假设已引入Three.js和GLTFLoader
zip.file("your-model.glb").async("arraybuffer").then(function(buffer) {
  const loader = new GLTFLoader();
  loader.parse(buffer, '', function(gltf) {
    // 将模型添加到场景
    scene.add(gltf.scene);
  });
});

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