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

时间:2020-10-16    作者:玉龙之乡    分类: 转载


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

 

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

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

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

主线程代码:

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

 

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

 
  1. onmessage = function(evt) {
  2. JSZipUtils.getBinaryContent( "数据包N.zip", {
  3. callback: function(err, data) {
  4. var zipdata = new JSZip(data);
  5. var filei = zipdata.file("数据包N.json");
  6. postMessage(filei.asText());
  7. }
  8. });
  9. }

实际效果如下图

 总结:

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

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

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

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

手机扫描二维码
阅读体验更佳