关于Web端三维模型文件大、加载慢的思考

最近有一个项目是要求能够实现一个网页，这个网页上要加载一个小镇，给的模型比较大，然后就被网络加载速度的问题所困扰

1.发现问题

就拿下面的例子来看，这里是在three.js中加载一个模型大小只有2.5Mb的模型（hb_01.fbx），可以看到在页面的整个加载过程中，它占了99%的时间，用了4.86s

（plus：这个加载分析是点开开发人员工具，看网络那一栏）

同时你可能会发现你第一次加载慢，第二次就快了，这是因为浏览器有缓存的原因，去掉缓存的方法如下（Chrome浏览器）：更多工具里面清除浏览数据

2. three.js中的解决方案

1.1 gltf-pipline

使用gltf-pipline，这个方法可以把模型压缩很多，它压缩之后并不是可以直接使用的模型文件，还需要解压，我试了一下，这个方法还是很好用的，大部分情况应该都可以适用，使用这个方法可以直接将200M的文件压缩到只有10-30M内。

1.2 分离重复模型

这个方法适用于那种有较多重复建筑的情况

1.3 3d Max优化减面

在修改器中选择专业优化，然后可以在优化级别中选择减少多少的顶点数，这个方法实打实的减面和顶点，感觉不是很实用

如下就是减少了50%顶点数的效果（右）

3. cesium中的考虑

尝试用lod

3.1 3d tile

在介绍Lod之前我们先介绍一下什么是瓦片（3d tile），简单来说就是将模型划分为一块一块的，然后一块一块的加载显示，就如下所示：

3d tile文件的格式如下（没有带lod的瓦片,一共四块）：

(带了lod的一片瓦片)

都是通过一个json文件来组织一块块瓦片或不同层级的瓦片，模型用的b3dm格式

3.2 Lod

Lod即（Level of Details），简称为多细节层次。LOD技术根据模型的节点在显示环境中所处的位置(Screen Size)和重要度，来决定物体渲染的资源分配，降低非重要物体的面数和细节数，从而获得高效率的渲染计算。

就类似吃鸡跳伞的时候，我们看到的景象由远到近是越来越清晰的，简单的理解就是我们距离场景比较远的时候加载的物体比较多，这时候渲染低精度的模型，当我们距离物体比较近的时候，看到的物体比较少，加载高精度的模型。

lod其实就带在了3d tile中，层级越高模型文件更大

3.3 实际实现遇到的问题

先展示一下预期的效果：

模型瓦片从中间向外拓展渲染出来，拉近模型的时候清晰度会变高，效果非常好，在网络上运行也比较流畅。

转到目前的模型上时出现了问题，上面展示的模型文件是倾斜摄影(osgb)文件转过来的，它的每一个瓦片就非常小都是以KB为单位计算的，整体并不大，所以在放在网络上效果也很好，我自己的模型文件是fbx格式的，我通过cesiumlab将它转为3d tile，改变不同的参数，转出来的文件还是很大，一个瓦片都是几十M（不确定什么问题），在网络上还是特别的慢。

4. 提高网络性能

我自己使用的网络是腾讯云的轻量应用服务器，带宽只有4M/s,所以加载就很慢，使用更好的服务器速度肯定会上来，还有可以使用cdn，这个我打算去用的，但是在网站备案的时候要求网站至少剩余3个月的使用时间，所以先搁置了，cdn的费用并不高，建议试试

5.提高人机交互体验感

比如使用进度条就有助于提升体验感。