three.js如何提高模型加载速度

JavaScript018

three.js如何提高模型加载速度,第1张

方法如下：

二进制格式：

使用不同文件格式，文件的大小会有所不同，如果同一个模型，导出二进制.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文件了。