方法如下:
二进制格式:
使用不同文件格式,文件的大小会有所不同,如果同一个模型,导出二进制.fbx大小要比文本格式的.obj文件要小1~2倍。常见的GLTF格式可以是文本格式,也可以使二进制格式,为了更好的传输性能可以选择二进制格式,.glTF打包转化为.glb二进制文件。
减面和法线贴图:
一般3D美术导出模型的时候,会进行减面操作,并导出模型的法线贴图,比如你只是加载一个机械零件模型(非批量),你可以让3D美术进行减面然后导出法线贴图。
这样的话在不影响曲面显示质量前提下,减少模型三角形面数,一方面可以降低模型文件大小提高网络传输性能,另一方面可以提高threejs渲染模型的渲染性能。
加载进度条:
因为Web3D项目加载时间相对普通web页面时间比较长,如果用户一直等着,web页面没有什么反应,可能会关掉,这种情况下,可以在web页面放置一个进度条实时显示模型文件加载进度。
如何获得三维模型文件的加载进度可以查看threejs文档关于FileLoader类的介绍,至于web进度条,可以通过普通HTML和CSS代码去实现,然后和threejs加载进度数据进行绑定即可。
动态分批加载:
如果一个场景中,有多个网格模型模型,比如室内设计效果展示,里面有沙发、椅子、电视等三维模型,这时候把这些模型分别单独建立一个文件,threejs可以按照一定的顺序分别先后加载这些单独的网格模型文件,然后插入到场景中。
这样的话,用户可以以最快速度查看到场景中的部分模型,不用一直等待,没有什么反应,用户体验更好。
解决办法:换一个js包含的方式,让javascript加载速度倍增。把通常加载方式:
<script src="xxxx.js"></script>
改变成:
<script type="text/javascript">
document.write("<scr"+"ipt src=\"xxx.js\"></sc"+"ript>")
</script>
-------------------------------------
举个例子:
比如下面是申请的站长统计代码,以前尽管是把它放在页面的最底部,但还是拖累页面加载进度。
<script src="http://s69.cnzz.com/stat.php?id=265381&web_id=265381&show=pic" language="JavaScript" charset="gb2312"></script>
我们可以把它换成这样的方式来加载(任然放在页面最底部):
<<script type="text/javascript">>
document.write("<<scr"+"ipt src=\"http://69.cnzz.com/stat.php?id=2651&web_id=2681&show=pic\" language=\"JavaScript\" charset=\"gb2312\"></sc"+"ript>>")
<</script>>
速度快多了。
其它的js如法炮制,广告的,页面特效的。。。
最后再废话几句:
用
<<script type="text/javascript">>
document.write("<<scr"+"ipt src=\"xxx.js\"></sc"+"ript>>")
<</script>>
的方式,还可实现按需按条件的来加载你要的JS文件:
<<script type="text/javascript">>
if ( 心情好 ) {document.write("<<scr"+"ipt src=\"xxx.js\"></sc"+"ript>>")}
<</script>>
这样要是“心情不好”,就自然不会载入你不想要的JS文件了。