Three.js Web3D大屏可视化

3,179 阅读1分钟

比较常见的大屏数据可视化,一般通过CSS、SVG、Canvas等技术很容易实现,这些大屏可视化,通常是2D可视化,有了WebGL技术支持,给大屏可视化增加一个维度,实现3D可视化,效果更好,预览3D效果

WebGL引擎

直接使用原生webgl,代码量肯定比较大,这里选择了WebGL最流行的一款3D引擎Three.js。

地球效果

地球效果,比如国家边界线是通过全世界world.json生成,边界线使用three.js的line模型绘制,注意把平面经纬度坐标转化为球面坐标。

关键点:经纬度坐标转球面坐标

飞线效果

飞线效果使用过一系列点Points渲染,主要根据点的顺序,设置Points模型点渲染的尺寸,这里通过修改shader代码实现。

飞线轨迹线

飞线的轨迹线,可以使用多种方式实现,比如贝赛尔曲线,样条曲线,圆弧先,上面案例使用的时候圆弧线,然后注意旋转变换,和飞线的起始经纬度坐标对应起来即可。