Three.js 模型加载速度 模型太大 - 文章教程

Three.js 模型加载速度 模型太大

发布于 2021-09-05 字数 1595 浏览 1203 评论 0

Threejs 开发项目加载的模型,可能会比较大,模型三角形面数越多,一方面是threejs渲染模型的性能下降,另一方面是加载模型的时间比较长,影响体验。

因为三维模型文件往往比较大,所以 Web3D 项目相比较普通的前端web项目,需要加载文件体积比较大,需要花费的时间自然比较多,加载时间比较长的情况下,对于用户来说体验肯定不太好。

二进制格式

使用不同文件格式,文件的大小会有所不同,如果同一个模型,导出二进制.fbx大小要比文本格式的.obj文件要小1~2倍。常见的GLTF格式可以是文本格式,也可以使二进制格式,为了更好的传输性能可以选择二进制格式,.glTF打包转化为.glb二进制文件。

减面和法线贴图

一般3D美术导出模型的时候,会进行减面操作,并导出模型的法线贴图,比如你只是加载一个机械零件模型(非批量),你可以让3D美术进行减面然后导出法线贴图,这样的话在不影响曲面显示质量前提下,减少模型三角形面数,一方面可以降低模型文件大小提高网络传输性能,另一方面可以提高threejs渲染模型的渲染性能。

加载进度条

因为Web3D项目加载时间相对普通web页面时间比较长,如果用户一直等着,web页面没有什么反应,可能会关掉,这种情况下,可以在web页面放置一个进度条实时显示模型文件加载进度。

如何获得三维模型文件的加载进度可以查看threejs文档关于FileLoader类的介绍,至于web进度条,可以通过普通HTML和CSS代码去实现,然后和threejs加载进度数据进行绑定即可。

动态分批加载

如果一个场景中,有多个网格模型模型,比如室内设计效果展示,里面有沙发、椅子、电视等三维模型,这时候把这些模型分别单独建立一个文件,threejs可以按照一定的顺序分别先后加载这些单独的网格模型文件,然后插入到场景中。这样的话,用户可以以最快速度查看到场景中的部分模型,不用一直等待,没有什么反应,用户体验更好。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

泛泛之交

这个人比较懒,什么都没有填写!

20 文章
3 评论
21167 人气
更多

推荐作者

qianbiandeboy

文章 0 评论 0

少女净妖师

文章 2 评论 0

zangqw

文章 0 评论 0

qq_7HKsl

文章 0 评论 0

伪装你

文章 1 评论 0