本文介绍了基于three.js开发地图引擎的过程，包括城市建筑的批量生成、浮动标注的实现、图标告警闪烁、城市流光效果、区域轮廓绘制、告警动画圈和热力图的制作。作者分享了各种技术细节，如使用geojson解析建筑数据、合并mesh以优化性能、创建浮动标注的两种方法等，并探讨了扫描效果和后期泛光的实现策略。文章适合three.js初学者和三维可视化开发者阅读。
最近在做自己的地图引擎，基于three.js，站在巨人的肩膀上，稍等补充地址出来，大家有兴趣的可以体验一下，在线地址。
城市场景、小场景，我觉得是未来三维可视化的重点方向，市场上基于three.js的三维引擎也不少，比如蜂鸟云地图、thing.js、木棉树，本篇博客主要介绍一些基本场景的实现方式，目的是让初学者只使用three.js也能轻松构建简易的城市场景。
一、城市建筑
城市建筑是城市场景中不可缺少的部分，城市建筑因为其海量性的特点，因此只能批量生成。我们需要先获取城市的建筑面数据，即底部为任意多边形，包含高度属性的面数据，大部分的做法是面数据保存于geojson（地理格式的json）中，然后前端进行解析。
我们根据基础面数据和高度，构建底部面、侧面以及顶部面，并使用earcut将底面、侧面、顶面切成一个个绘制需要的三角形的顶点和索引的组合，关于方法，我此前已经做过介绍，需要补充的是城市建筑常会进行贴图展示，所以我们计算三角面的时候需要对三角面的纹理坐标uv（用于映射贴图到多边形中的位置）进行计算，最终赋值到Geometry的faceVertexUvs[0]中。
var geometry = new THREE.Geometry();
geometry.
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
