threeJS大文件加载优化（JSzip压缩传输）

最新推荐文章于 2026-03-27 03:19:39 发布

原创

最新推荐文章于 2026-03-27 03:19:39 发布 · 6.9k 阅读

标签

#three.js #javascript #vue.js

收录于

需求：

threeJS加载在线的obj/stl模型，模型最大可达200-300兆，模型加载时因文件较大网络传输慢，模型更新保存崩溃，需进行优化处理。

解决方案：

获取在线的压缩文件链接，采用JSzip进行在线解压和在线压缩更新，提高性能。优化后经测试模型压缩率可达90%以上，模型加载速度大大提升，由原来的几分钟加载提升到几秒。

具体方法：

1. 获取服务器上的模型压缩文件的文件流，构造文件对象和加载地址，加载模型文件

（注：涉及到二进制流读取、文件解压和文件构造，文件类型需全部设为arraybuffer，否则会出现压缩文件损坏，文件字节长度不一致的错误，在这个坑里爬了好久，特此记录）

let loader = new THREE.STLLoader();
axios.get(zipUrl, {responseType: "arraybuffer"}).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])
                le