Three.js地球开发—3D经纬度等比地图，3D飞行航线最终效果

Posted 2021-07-23 weixin_43787178

大致原理：

一. 3D经纬度等比地图思路：
通过读取解析json格式存储的世界地图坐标信息，实现3D球面的地图经纬度等比映射，基于此还可以进行更多的开发。

二. D动态航线思路：
2.1 先绘制二维XOY平面绘制关于Y轴对称的飞行圆弧轨迹线
借助Three.js的ArcCurve创建圆弧曲线，绘制二维XOY平面绘制关于Y轴对称的飞行圆弧轨迹线；

2.2 三维空间中绘制任意两点的飞行圆弧轨迹线
在三维空间中绘制任意两点的飞行圆弧轨迹线，借助之前在XOY平面的绘制的关于Y轴对称的轨迹线，通过一系列旋转得到任意三维空间中两点的轨迹线。可以看作一个求逆的过程；把3D球面上任意的两个飞线起点和结束点绕球心旋转到到XOY平面上，同时保持关于y轴对称，借助旋转得到的新起点和新结束点绘制一个圆弧，最后把绘制的圆弧反向旋转到原来的起点和结束点即可。

2.3 三维轨迹动态飞线特效
主要是shader的应用。

最终效果：