使用ThreeJs搭建BIM模型浏览器-第十步 加载优化

最近在尝试了新的传输方式。不过对QModel而言，影响不是很大，因为QModel这个产品只有首次加载是需要从服务器下载模型数据的。

 

首先，把原本的模型文件拆分成多份了。原本只有一个zip数据压缩包，现在改为在服务端拆解为N份，根据构件数量每500个压缩为一个包，同时把数据转换为utf8array.然后生成一个索引文件A。

前端首先请求索引文件A。得到数据包的数量，然后进入本文重点。

主线程根据解析索引文件，知道了一共有N个数据包，然后开始启用worker下载。如下

主线程代码：

  var worker = new Worker("worker.js");
                                worker.postMessage({m: 模型N}); //向worker发送数据
                                worker.onmessage = function(evt) { //接收worker传过来的数据函数
                                    var resulti = JSON.parse(evt.data);
                                  //开始解析resulti

                                }

 

然后创建一个worker.js，多线程进行传输并解压。

onmessage = function(evt) {
    JSZipUtils.getBinaryContent( "数据包N.zip", {
        callback: function(err, data) {
            var zipdata = new JSZip(data);
            var filei = zipdata.file("数据包N.json");
            postMessage(filei.asText());

        }
    });
}

实际效果如下图

 总结：

1、由于个人服务器原因，带宽就那么大，一个线程跑满和10个线程同时下载，完全没有效率的差异。所以下载起来是一样的。需要硬件支持才体现出传输的优化。

2、数据解析放到线程里面，确实会提升一些效率。

3、下一步优化，可以考虑在worker里面直接把数据转换成Utf8Array或者ArrayBuffer，PostMessage是可以移交这一类对象的控制权的。