使用three.js/webgl开发智慧城市场景的一些总结_three.js智慧城市

最近在做自己的地图引擎，基于three.js，站在巨人的肩膀上，稍等补充地址出来，大家有兴趣的可以体验一下，在线地址。
城市场景、小场景，我觉得是未来三维可视化的重点方向，市场上基于three.js的三维引擎也不少，比如蜂鸟云地图、thing.js、木棉树，本篇博客主要介绍一些基本场景的实现方式，目的是让初学者只使用three.js也能轻松构建简易的城市场景。
一、城市建筑
城市建筑是城市场景中不可缺少的部分，城市建筑因为其海量性的特点，因此只能批量生成。我们需要先获取城市的建筑面数据，即底部为任意多边形，包含高度属性的面数据，大部分的做法是面数据保存于geojson（地理格式的json）中，然后前端进行解析。
我们根据基础面数据和高度，构建底部面、侧面以及顶部面，并使用earcut将底面、侧面、顶面切成一个个绘制需要的三角形的顶点和索引的组合，关于方法，我此前已经做过介绍，需要补充的是城市建筑常会进行贴图展示，所以我们计算三角面的时候需要对三角面的纹理坐标uv（用于映射贴图到多边形中的位置）进行计算，最终赋值到Geometry的faceVertexUvs[0]中。

var geometry = new THREE.Geometry();
geometry.vertices = vertices;
geometry.faces = faces;
geometry.faceVertexUvs[0] = uvs;
1
2
3
4

随着mesh越来越多，场景中每帧的绘制次数也越来越多，为了减少绘制的次数，提高性能，我们需要将mesh进行合并，THREE.Geometry中提供了merge方法给我们使用，如果是THREE.BufferGeometry，我们可以直接将绘制数据进行合并。

二、浮动标注
关于浮动标注的实现方式，这里有两种，分别说一下优劣点。
1.以THREE.Sprite类创建
根据标注内容生成Sprite的贴图，优点是具有深度信息，缺点是样式不够灵活，只能整体鼠标交互。
2.以dom创建
即以dom创建，然后浮动在地图容器上，优点是方便、样式灵活多变，缺点是需要实时更新dom浮动的位置，且没有深度信息（没有近大远小）。

三、图标告警闪烁
three.js中，顶点颜色、材质颜色和透明度、纹理采样颜色三者是相辅相成的，三者rgba相乘为最终的颜色，我们只需要更改材质的颜色，就可以实现THREE.Sprite类颜色的更改，如果逐帧更改图标颜色，既可以达到闪烁的效果。

四、城市流光
流光可以表达城市中的车辆轨迹等，这里我采用了宽线+纹理的方式，组织两份线顶点数据，其中一份向当前拐点的法向量正方向偏移，另一份向当前拐点的法向量反方向偏移，偏移距离为当前地图分辨率下，像素长度为半个线宽的距离。
关于数据处理和计算过程，可以参考THREE.js的MeshLine
基于此，我们可以做交通导航线、流光等效果。

五、区域轮廓
在场景中，区域轮廓我们可以构建类似于墙的几何来表达，通过墙的构造点以及高度信息，构造出所有的三角面片。

六、告警动画圈

七、热力图
后续会补充三维热力图

八、后期泛光

九、扫描效果
扫描效果在webgl中简单的方法就是在每个片元着色器中追加扫描着色器片段，判断每个片元的世界坐标与扫描中心点的距离，然后根据距离给与不同的着色。我这边的方法是使用后期处理的方式实现，即不需要更改材质的着色器片段，适用于场景中的所有图层，所有的扫描相关的着色器片段，都在帧缓冲中进行，并最终输出到屏幕。

	十、其他待续
1