web3d项目开发中，往往会因为3d模型文件过大而出现加载速度过慢的问题，
glb格式的文件要比gltf文件小一些，这里我们可以将gltf格式的3d模型转为glb格式文件，再进行zip压缩处理，前端请求zip再对zip进行解压渲染处理。

可以让建模师帮忙导出为glb格式文件也可以自己使用Blender导出glb格式文件.

请求zip文件并解压渲染代码实例。

代码实例

function handleProgress (progressEvent) {
  console.log('handleProgress', progressEvent.loaded, progressEvent.total)
  var div = document.getElementById('LoadingInfo')
  div.style.display = 'flex'
  div.innerText = `加载模型中:${(progressEvent.loaded / progressEvent.total * 100).toFixed(0)}%`
  if ((progressEvent.loaded / progressEvent.total * 100).toFixed(0) >= 100) {
    div.style.display = 'none'
  }
}
axios.get('assets/model.zip', {
  responseType: 'arraybuffer',
  onDownloadProgress: (progressEvent) => {
    let percentCompleted = Math.round(progressEvent.loaded * 100 / progressEvent.total)
    console.log(progressEvent.lengthComputable)
    console.log(percentCompleted)
    var div = document.getElementById('LoadingInfo')
    div.style.display = 'flex'
    div.innerText = `下载模型中:${percentCompleted}%`
    // if (progressEvent.lengthComputable >= 100) {
    //   div.style.display = 'none'
    // }
  }
}).then(resp => {
  let files = new window.File([resp.data], 'zipFile', { type: 'zip' })
  var new_zip = new JSZip()
  // 解压缩文件对象
  new_zip.loadAsync(files)
    .then(function (result) {
      // 压缩包的模型文件列表
      let fileList = result.files
      for (let key in fileList) {
        // 读取模型文件内容
        new_zip.file(key).async('arraybuffer').then(content => {
          // Blob构造文件地址，通过url加载模型
          let blob = new Blob([content])
          console.log(blob)
          let modelUrl = URL.createObjectURL(blob)
          loader.load(modelUrl, function (gltf) {
            var scale = 0.09
            gltf.scene.position.set(0, 8, 0)
            gltf.scene.rotation.set(-0.1, 0, 0)
            gltf.scene.scale.set(scale, scale, scale)
          }, handleProgress)
        })
      }
    })
})

实例代码

项目环境基于vue3 vite js node.js 14