A three-dimensional antenna pattern generation method based on ThreeJS

Abstract

A kind of ThreeJS-based three-dimensional antenna pattern generation method, main steps include: reading antenna gain data;Processing antenna gain data;Generation three-dimensional antenna pattern;Three-dimensional model is exported as glb / gltf format;Load and visualize the three-dimensional antenna pattern.The method utilizes ThreeJS framework to realize the generation of three-dimensional antenna pattern and export as glb format, for project scene, avoid directly reading the large amount of original data of antenna pattern, effectively improve the scene display efficiency.

Description

Technical Field

[0001] This invention relates to the field of computer graphics technology, and in particular to a method for generating three-dimensional antenna patterns based on ThreeJS. Background Technology

[0002] In 3D simulation platforms for satellite communications, it's necessary to display the antenna gain information of satellites in orbit. A 3D antenna pattern is a very intuitive way to visualize this information. In a 3D simulation platform based on WebGL technology, which enables 3D visualization and interaction in a web browser, the WebGL framework used is Cesium. Within this framework, there are two ways to load 3D models: one is to directly read data such as JSON or CSV and display it through certain algorithms and interfaces; the other is to use third-party software to pre-generate a 3D model in glb or gltf format and then load this 3D model into the project scene. Because antenna pattern data is large, using the first method to read and load data would affect scene display efficiency. Since antenna pattern data remains largely unchanged during satellite movement, the second method—loading the pre-generated 3D model into the scene for display—is preferable.

[0003] Currently, 3D antenna patterns can be generated in Matlab based on antenna gain data, but the antenna patterns generated by Matlab cannot be exported to formats such as glb for use in project scenarios. Summary of the Invention

[0004] This disclosure provides a method for generating 3D antenna patterns based on ThreeJS. It utilizes the ThreeJS framework to read antenna pattern data, generates a GLB / GLTF model through the interfaces provided by ThreeJS, exports the model, and finally loads and visualizes the antenna pattern model in the project scene. The main steps include: (1) Read antenna gain data: Read the raw antenna gain data in batches in JavaScript. The format is JSON. One antenna pattern corresponds to one JSON data. Read the Azimuth (azimuth angle), Elevation (elevation angle), and GainB (gain value) fields in the JSON file.

[0005] (2) Process antenna gain data and generate three-dimensional antenna pattern: Use the ThreeJS framework to process the values ​​of Azimuth (azimuth), Elevation (elevation), and GainB (gain value); calculate Geometry and Material values ​​to generate a three-dimensional model.

[0006] (3) Export the 3D model as glb / gltf format: Export the 3D model in glg / gltf format.

[0007] (4) Load and visualize the 3D antenna pattern: In the project scene, load the 3D model based on the Cesium engine.

[0008] Specifically, it includes the following steps: S1, read the raw antenna gain data from the JSON file; S2 uses the ThreeJS framework to process antenna gain data and generate a 3D antenna pattern. S3 uses ThreeJS to export 3D models as glb or gltf formats; S4 loads the 3D antenna pattern into the Cesium scene.

[0009] Furthermore, step S1 specifically includes: In JavaScript, read raw antenna gain data in batches, in JSON format. One antenna pattern corresponds to one JSON data. Read the azimuth, elevation, and gain value fields from the JSON file.

[0010] Furthermore, step S2 specifically includes: S21, convert the azimuth, elevation, and gain data obtained in step S1 into x, y, and z values ​​in the ThreeJS three-dimensional coordinate system; S22 generates Geometry and Material data, which are used to represent the geometry and material of the 3D model, respectively. S23: Generate a mesh based on the previously calculated Geometry and Material, i.e., the grid structure of the 3D model, and load it into the scene.

[0011] Furthermore, step S21 specifically includes: (1) Normalize the gain value and map it to the interval [0,1]; (2) Calculate the x, y, and z values ​​in the ThreeJS three-dimensional coordinate system.

[0012] Furthermore, step S22 specifically includes: (1) Generate Geometry data Use the ConvexGeometry function in three.js to generate Geometry data; (2) Generate Material data Assign a color value to each coordinate point, and interpolate the color value of the coordinate point according to the gain. In the three-dimensional coordinate system, the closer to the origin, the smaller the gain and the cooler the color; the farther away from the origin, the larger the gain and the warmer the color. Use the ThreeJS interface to generate Material data.

[0013] Furthermore, in step S22, the specific method for assigning a color value to each coordinate point includes: Obtain the coordinates (x, y, z) of each point in the geometry of the 3D model, and calculate the radius (i.e., gain) from each point to the origin using the coordinates. The formula is as follows: ; Based on the gain value, the color value is calculated using piecewise linear interpolation based on the color gradient.

[0014] Compared with existing technologies, the beneficial effects of this disclosure are: ① It utilizes the ThreeJS framework to generate and export three-dimensional antenna radiation patterns in glb format for use in project scenarios; ② It avoids directly reading large amounts of raw data from antenna radiation patterns, thus improving scene display efficiency; ③ It is simple to calculate. Attached Figure Description

[0015] The above and other objects, features and advantages of this disclosure will become more apparent from the more detailed description of exemplary embodiments of this disclosure taken in conjunction with the accompanying drawings, in which the same reference numerals generally represent the same components.

[0016] Figure 1 This is an overall flowchart of an exemplary embodiment according to the present disclosure; Figure 2 This is the raw data format for antenna gain; Figure 3 A diagram showing Azimuth and Elevation; Figure 4 This is a schematic diagram of the ThreeJS 3D coordinate system; Figure 5 A 3D antenna pattern with color representation generated for ThreeJS; Figure 6 3D antenna radiation pattern and elevation view generated by ThreeJS; Figure 7 A top view of a 3D antenna pattern generated by ThreeJS; Figure 8 Load antenna direction in Cesium Figure 3 Schematic diagram of the 3D model. Detailed Implementation

[0017] Preferred embodiments of the present disclosure will now be described in more detail with reference to the accompanying drawings. While preferred embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be implemented in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that the present disclosure will be thorough and complete, and will fully convey the scope of the present disclosure to those skilled in the art.

[0018] This disclosure provides a method for generating three-dimensional antenna patterns based on ThreeJS. In one exemplary implementation, the process is as follows: Figure 1 As shown, the main steps include: 1. Read antenna pattern data in JSON format, such as... Figure 2 As shown, retrieve the Azimuth (azimuth), Elevation (elevation), and GaindB fields. The azimuth and elevation angles are as follows: Figure 3 As shown.

[0019] 2. Convert the Azimuth (azimuth), Elevation (elevation), and GaindB data into x, y, and z values ​​in the ThreeJS 3D coordinate system. The ThreeJS 3D coordinate system is as follows: Figure 4 As shown.

[0020] The calculation method is as follows: 2.1 Normalization Processing Map the gain values ​​to the interval [0,1], where the minimum gain corresponds to 0 and the maximum gain corresponds to 1. Calculate the mapped gain values.

[0021] 2.2 Calculate the x, y, and z values ​​in the ThreeJS 3D coordinate system.

[0022] Specific methods: ① Variable definition: r: Distance (radius) from the point to the origin; elevation: angle of elevation (unit: degrees), representing the angle between the object and the horizontal plane; azimuth: Azimuth (unit: degrees), representing the angle in the horizontal plane relative to a reference direction (usually the x-axis); Auxiliary functions: Angle to radian function:

[0023] ② Calculate the polar angle (the angle downwards from the y-axis). Since ThreeJS often uses polar angles pointing downwards from the y-axis, we first convert the elevation angle to a polar angle:

[0024] And convert it to radians:

[0025] ③ Calculate the y-coordinate

[0026] ④ Calculate the projection length on the xz plane.

[0027] ⑤ Calculate the azimuth angle in radians.

[0028] ⑥ Calculate the x and z coordinates

[0029]

[0030] The three-dimensional coordinates are obtained as (x, y, z).

[0031] 3. Use the ThreeJS interface to generate Material data 3.1 Generating Geometry Data Generate Geometry data using the ConvexGeometry function in three.js. const geometry = new ConvexGeometry( verticesList ); 3.2 Generating Material Data Assign a color value to each coordinate point, and interpolate the color value based on the gain. In a 3D coordinate system, the closer to the center point, the lower the gain and the cooler the color; the farther away from the center point, the higher the gain and the warmer the color. A color diagram is shown below. Figure 5 As shown.

[0032] 3.2.1 The number of generated geometry coordinate points does not match the number of gains in the original data. Therefore, it is necessary to first obtain the geometry coordinate values, and then calculate the radius (i.e., the gain value) from these coordinate values ​​to the origin. The formula is: .

[0033] 3.2.2 Based on the gain value, the color value is calculated using piecewise linear interpolation based on the color gradient.

[0034] Specific methods: ① Input variables Normalized parameters (e.g., position scale, time progress, etc.) Color sequence:

[0035] Among them, each color The range of each component is ; ②Pretreatment Define the number of color segments: N = number of color segments - 1 = 4 - 1 = 3 ③ Determine the color range Calculate the index of the current color segment:

[0036] Calculate the interpolation coefficients within this segment: t = r*Nk ④ Boundary treatment when (Right now )hour:

[0037] ⑤ Color interpolation calculation when When interpolating between two adjacent colors: set up:

[0038] The final color for:

[0039] ⑥ Output results: Add the calculated color components to the output sequence. .

[0040] 3.2.3 Generating Material Data Using the ThreeJS Interface const colors = new Float32Array(colorList); geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); const material = new THREE.MeshBasicMaterial( { vertexColors: true} ).

[0041] 4. Generate Mesh data and load it into the scene. The mesh is generated based on the previously calculated Geometry and Material and loaded into the scene. Antenna Figure 3 3D model such as Figure 6 , Figure 7 As shown.

[0042] 5. Export as glb using ThreeJS.

[0043] 6. Load the 3D antenna pattern into the Cesium scene, such as... Figure 8 As shown.

[0044] The above technical solutions are merely exemplary embodiments of the present invention. For those skilled in the art, based on the application methods and principles disclosed in the present invention, it is easy to make various types of improvements or modifications, and not limited to the methods described in the specific embodiments of the present invention. Therefore, the methods described above are merely preferred and not restrictive.

Claims

1. A method for generating three-dimensional antenna patterns based on ThreeJS, characterized in that, Includes the following steps: S1, read the raw antenna gain data from the JSON file; S2 uses the ThreeJS framework to process antenna gain data and generate a 3D antenna pattern. S3 uses ThreeJS to export 3D models as glb or gltf formats; S4 loads the 3D antenna pattern into the Cesium scene.

2. The method according to claim 1, characterized in that, Step S1 specifically includes: In JavaScript, read raw antenna gain data in batches, in JSON format. One antenna pattern corresponds to one JSON data. Read the azimuth, elevation, and gain value fields from the JSON file.

3. The method according to claim 1 or 2, characterized in that, Step S2 specifically includes: S21, convert the azimuth, elevation, and gain data obtained in step S1 into x, y, and z values ​​in the ThreeJS three-dimensional coordinate system; S22 generates Geometry and Material data, which are used to represent the geometry and material of the 3D model, respectively. S23: Generate a mesh based on the previously calculated Geometry and Material, i.e., the grid structure of the 3D model, and load it into the scene.

4. The method according to claim 3, characterized in that, Step S21 specifically includes: (1) Normalize the gain value and map it to the interval [0,1]; (2) Calculate the x, y, and z values ​​in the ThreeJS three-dimensional coordinate system.

5. The method according to claim 3, characterized in that, Step S22 specifically includes: (1) Generate Geometry data Use the ConvexGeometry function in three.js to generate Geometry data; (2) Generate Material data Assign a color value to each coordinate point, and interpolate the color value of the coordinate point according to the gain. In the three-dimensional coordinate system, the closer to the origin, the smaller the gain and the cooler the color; the farther away from the origin, the larger the gain and the warmer the color. Use the ThreeJS interface to generate Material data.

6. The method according to claim 5, characterized in that, In step S22, the specific method for assigning a color value to each coordinate point includes: Obtain the coordinates (x, y, z) of each point in the geometry of the 3D model, and calculate the radius (i.e., gain) from each point to the origin using the coordinates. The formula is as follows: ; Based on the gain value, the color value is calculated using piecewise linear interpolation based on the color gradient.

Images