草原上的建筑- 草原上的建筑模型-玉龍之鄉

最近在尝试了新的传输方式。不过对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是可以移交这一类对象的控制权的。

原文https://blog.csdn.net/ztz87

评论一下 分享本文 联系站长

• 版权申明：此文如未标注转载均为本站原创，自由转载请表明出处《 草原上的建筑- 草原上的建筑模型-玉龍之鄉》。
• 本文网址：https://liangzhidong.cn/?post=161
• 上篇文章：陈春花：如何让自己不被替代？
• 下篇文章：使用ThreeJs搭建BIM模型浏览器，第九步-性能优化(2)