How to draw three-dimensional Antenna gain effect Diagram with echarts-gl or threejs

requirements description

recently encountered a demand to draw the 3D gain effect map (antenna radiation pattern) of the antenna on the wireless base station on web. The approximate effect of the drawing is as follows:

clipboard.png

::0-3593d

:

clipboard.png


clipboard.png

this is the vertical projection of the gain chart.

current exploration

I learned about the 3D drawing technology on the lower web, and found that echarts-gl can draw surface maps, but at present, it supports the use of surface parameter equations to configure and draw some regular surfaces, such as: wavy surface , spherical , is a complex part, but it is still a regular surface , and my data source is a set of coordinates in two polar coordinates, which are transformed into three-dimensional coordinates (converted under the spherical coordinate system). The coordinates are irregular because the radius of the sphere at each point is different.

ask for help

how should I deal with my data so that echarts-gl can use this data to draw surfaces, or is there any other solution, such as threejs, which can draw graphics? please give some advice to friends who are familiar with echarts-gl, threejs and webgl.

Three.js webgl echarts
Apr.27,2021

threejs can stretch a two-dimensional plane into three-dimensional geometry along the z-axis. I wonder if this is useful to the subject

ahem, answer it yourself. In the end, I used echarts-gl to draw it, but it can't be drawn by it alone, so we need to provide it with an "interpolation function". The basic idea is as follows:
provides an interpolation function l = f (h, v, hgain, vgain) (h, which is the angle between the point passing through the z axis and the Xmurz surface, v is the angle between the point passing through the z axis and the positive direction of the z axis, and hgain is a known array of horizontal section gains. Vgain is a known array of vertical section gains)
this function calculates the gain (spherical radius) of all points on the antenna surface. In this way, we know the Cartesian coordinates of the point in space
x = l sin (v) cos (h)
y = l sin (v) sin (h)
z = l cos (v)
and then draw the 3D antenna surface by using the parametric equation method provided by echarts-gl.
this interpolation function is very critical, but it is not convenient for me to provide it here because of commercial secrecy. Post some drawn pictures:


Previous: How to do the effect that can be poked around by sliding?

Next: What is the reason why Access-Control will report name.toUpperCase is added to axios request interception?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b37e3b-2c0c2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b37e3b-2c0c2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?