使用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是可以移交這一類對象的控制權的。