可视化项目中经常会加载进模型,我的业务中,有个大楼的3D模型,一共有3个FBX模型,加起来30兆左右,使用公司之前的加载
组件加载一共耗费了将近20多秒。而且浏览器会卡顿
优化前:
模型显示花了10多秒,显示完后到能操作又消耗了10多秒,并且加载期间导致我的首屏动画无法逐帧显示,严重影响了效果的展
示,后来推测可能是js阻塞造成的,查看了之前FBX加载源码后发现了问题所在,解析FBX二进制,加上解析树的数据,工程量非常
之大。于是想到了利用worker解决这个问题。把所有的解析代码抽出来所谓独立的线程执行
核心的优化代码:
import setData from './setData.js'
/**
* 将arraybuffer解析成fbx信息树
* @private
*/
async function fbxParse(FBXBuffer,sourceDire){
if ( !isFbxFormatBinary( FBXBuffer ) ){
console.error("the arraybuffer of parse is not Fbx Format Binary");
return;
}
let fbxTree;
if(window.Worker){