Three.js提高加载模型速度的方法总结
1 参考资料1
Three.js模型加载速度(模型太大):http://www.yanhuangxueyuan.com/doc/Three.js/ModelTooBig.html
Threejs开发项目加载的模型,可能会比较大,模型三角形面数越多,一方面是threejs渲染模型的性能下降,另一方面是加载模型的时间比较长,影响体验。
因为三维模型文件往往比较大,所以Web3D项目相比较普通的前端web项目,需要加载文件体积比较大,需要花费的时间自然比较多,加载时间比较长的情况下,对于用户来说体验肯定不太好。
1.1 使用二进制格式
使用不同文件格式,文件的大小会有所不同,如果同一个模型,导出二进制.fbx大小要比文本格式的.obj文件要小1~2倍。常见的GLTF格式可以是文本格式,也可以使二进制格式,为了更好的传输性能可以选择二进制格式,.glTF打包转化为.glb二进制文件。
1.2 减面和法线贴图
一般3D美术导出模型的时候,会进行减面操作,并导出模型的法线贴图,比如你只是加载一个机械零件模型(非批量),你可以让3D美术进行减面然后导出法线贴图,这样的话在不影响曲面显示质量前提下,减少模型三角形面数,一方面可以降低模型文件大小提高网络传输性能,另一方面可以提高threejs渲染模型的渲染性能。
1.3 加载进度条
因为Web3D项目加载时间相对普通web页面时间比较长,如果用户一直等着,web页面没有什么反应,可能会关掉,这种情况下,可以在web页面放置一个进度条实时显示模型文件加载进度。
如何获得三维模型文件的加载进度可以查看threejs文档关于FileLoader类的介绍,至于web进度条,可以通过普通HTML和CSS代码去实现,然后和threejs加载进度数据进行绑定即可。
1.4 动态分批加载
如果一个场景中,有多个网格模型模型,比如室内设计效果展示,里面有沙发、椅子、电视等三维模型,这时候把这些模型分别单独建立一个文件,threejs可以按照一定的顺序分别先后加载这些单独的网格模型文件,然后插入到场景中。这样的话,用户可以以最快速度查看到场景中的部分模型,不用一直等待,没有什么反应,用户体验更好。
- 1vue和el-table使用经验-如何刷新表格数据10965
- 2three.js加载3D瓦片和3dtiles数据生成交互式地图的开源项目9511
- 3Microsoft Visual C++ Redistributable是什么,有什么作用?7288
- 4mybatis使用经验——mybatis-spring-boot-starter和mybatis的版本对应关系表(持续更新~)5870
- 5uni-app使用经验—vue页面和html页面如何互相调用接口并传参5490
- 6Intellij IDEA下的版本控制VCS的启用与关闭4927
- 7Spring学习经验—@ResponseBody注解的使用说明4908
- 8Druid异常解决经验—java.sql.SQLException url not set4523
- 9如何用批处理命令(bat脚本)启动和停止windows服务4304
- 10nuxt.js项目中如何添加和使用全局变量4166
- 11解决SpringBoot使用maven下载不了jar包的问题3504
- 12linux中解压tar.gz文件报错“gzip: stdin: invalid compressed data--format violated”3407
- 13nuxtjs asyncData使用经验—如何发起多个axios请求并携带参数3255
- 14在Nuxt.js项目的head中引用外部js文件3096
- 15在NVIDIA控制面板设置参数时提示“拒绝访问 无法应用选定的设置到您的系统”的解决方法之一3073