如何用echarts-gl或者threejs绘制三维天线增益效果图

Question

需求描述

最近遇到个需求，要求在web上绘制无线基站上天线的3D增益效果图（天线辐射方向图），绘制完成后的大致效果如下：

数据来源是两组极坐标数据，格式如下：（角度，增益值），角度范围：0-359，每个角度上都有一个增益值，两组数据分别为水平方向的增益和垂直方向的增益，现在要根据这两组数据，这两组数据是后端返给前端的，前端要用这些数据动态的把3d增益效果图绘制出来。

数据来源：

这个是水平方向的增益图投影，生成这个投影的数据就是一个角度对应一个增益。

这个是垂直方向的增益图投影。

目前的探索

我了解了下web端的3d绘图技术，发现echarts-gl可以绘制曲面图，但是它目前支持的是用曲面参数方程的方式来配置绘制一些规则的曲面，比如：波浪曲面，球面，复杂的零件，但仍是有规则的曲面，而我的数据源是两个极坐标下的坐标集合，转换为三维坐标（在球坐标系下转换）后，坐标是没有规律的，因为每个点的球半径不同。

求助

我该如何处理我的数据从而使得echarts-gl能够用这些数据将曲面绘制出来，或者有没有其他的解决方案，比如threejs可以将图形绘制出来，麻烦对echarts-gl、threejs、webgl比较熟悉的朋友给指点下。

Answer 1

咳咳，自己来回答下吧。最终我还是采用echarts-gl绘制出来了，不过单靠它是绘制不出来的，需要给它提供一个“插值函数”，基本思路如下：
提供一个插值函数 l = f(h, v, hgain, vgain)(h为点经过z轴与x-z曲面的夹角，v为点经过z轴与z轴正方向的夹角, hgain为已知的一个水平切面增益数组，vgain为已知的一个垂直切面增益数组)
该函数可以计算出天线曲面上的所有点的增益（球半径），这样就知道了该点在空间中的笛卡尔坐标
x = l sin(v) cos(h)
y = l sin(v) sin(h)
z = l cos(v)
然后再利用echarts-gl提供的参数方程绘制曲面的方法来绘制3d天线曲面。
这个插值函数很关键，但我这里由于商业保密原因不方便提供出来，贴几个绘制出来的图吧：

Answer 2

threejs可以将二维平面沿z轴拉伸为三维几何体，不知道这一点对题主来说是否有用