Method and system for three-dimensional earth display based on threejs quadtree structure

Abstract

The application relates to the technical field of geographic information, in particular to a three-dimensional earth display method and system based on a threejs quadtree structure; technical problems: the prior art has the problems of large calculation amount, difficult tile node management, and unclear structure; a three-dimensional earth display method and system based on a threejs quadtree structure, which comprises the following steps: firstly, constructing a quadtree node, and then calculating a corresponding earth surface grid model according to tile row and column numbers and level data; compared with the prior art, the application has the problems of unclear structure, being not conducive to tile node state management, being not conducive to subsequent expansion of program functions by non-computer professionals, and being relatively awkward in the implementation of the Lovel of detail mode, poor visual effect during level switching, and large calculation amount; the application constructs a map structure model through a quadtree structure, the data structure is clear, the node management is facilitated, the program function expansion is facilitated, the LOD process is faster, and the calculation amount is reduced.

Description

Technical Field

[0001] This invention relates to the field of geographic information technology, and in particular to a method and system for displaying a three-dimensional earth based on a quadtree structure using Three.js. Background Technology

[0002] In virtual 3D Earth systems and GIS-based digital twin platforms, the display of the 3D Earth is one of the core functions. These systems typically rely on underlying WEBGL technology to construct and render 3D Earth models. Triangular meshes, as the basic element for constructing 3D models, are widely used due to their simplicity, effectiveness, and versatility across various systems. Composed of triangles, triangular meshes can carry vector information to represent the front and back of an object, while also supporting texture mapping, allowing complex Earth surface features to be presented through mapped image data. Furthermore, the calculation of model appearance, such as highlights and shadows, also depends on the fine division of triangular meshes and the accurate calculation of light incidence angles.

[0003] Three.js, as a mature WebGL development framework, provides powerful support for developing various 3D applications. However, in the current technology, the 3D earth system built based on WebGL and Three.js still has some significant problems. First, the unclear structure caused by the low-level language development makes the state management of tile nodes complex and difficult. Second, for non-computer professionals, the expansion and maintenance of program functions become particularly tricky. Furthermore, when implementing Level of Detail (LOD), existing methods are often cumbersome, with poor visual effects when switching levels and large computational load, affecting system performance and user experience.

[0004] In view of the above problems, this invention proposes a method and system for displaying a 3D globe based on a quadtree structure using Three.js; it aims to optimize the management of tile nodes by constructing a clear quadtree structure, while achieving more efficient LOD functionality, thereby solving the technical problems of large computational load, difficult tile node management, and unclear structure in the prior art; through the implementation of this invention, it is expected that while maintaining high-precision 3D globe display, the system performance and user experience will be improved. Summary of the Invention

[0005] To overcome the problems of unclear structure, poor tile node state management, and difficulty in expanding program functionality by non-computer professionals in the development of WEBGL-based low-level languages ​​in virtual 3D earth systems and digital twin GIS platforms, as well as the cumbersome method of implementing Love of Detail, poor visual effects during layer switching, and large computational load.

[0006] The technical solution of this invention is: a method for displaying a 3D Earth based on a quadtree structure using Three.js. First, quadtree nodes are constructed, and then a mesh model of the corresponding Earth surface is calculated based on the tile row and column numbers and hierarchical data. This includes the following steps:

[0007] S101: Construct a quadtree node that corresponds one-to-one with the hierarchical structure of the tile;

[0008] S102: Calculate the latitude and longitude boundaries of the tile geometry managed by this node based on the tile row and column number and the layer.

[0009] S103: Divide the latitude and longitude of the tile geometry into multiple equal radian ranges, and calculate the coordinates of each point of the geometry on the unit sphere according to the corresponding radian.

[0010] S104: Calculate the coordinates of the actual three-dimensional Earth in the WGS84 coordinate system based on the coordinates of the geometric object on the unit sphere.

[0011] S105: Calculate the corresponding UV coordinate values ​​based on the actual coordinate points within the geometry;

[0012] S106: Based on the distance from the camera to each tile model, select to split the nodes of the quadtree structure and merge the leaf nodes to achieve the Level of detail function;

[0013] S107: Display the 3D Earth model on the system and show the corresponding level of detail of the tiles.

[0014] Preferably, Three.js is an open-source WebGL framework that provides 3D graphics rendering capabilities. Three.js's material, texture, mesh, and camera functions are used to create and render a 3D Earth model. The Earth's surface mesh model is created using Three.js's Mesh class, textures and colors are added to the mesh model using ShaderMaterial and MeshBasicMaterial material classes, tile images are loaded as textures using the TextureLoader class, and finally the 3D Earth model is added to the Three.js scene and rendered using the Renderer.

[0015] As a preferred option, a quadtree structure is used, specifically: there is only one root node, and each non-leaf node has four child nodes; when constructing the quadtree structure, child nodes are recursively created starting from the root node according to the tile's level and row and column numbers; each non-leaf node contains references to its four child nodes (top left, top right, bottom left, and bottom right); the node data structure contains the node's level, row and column numbers, and references to the corresponding tile geometry.

[0016] As a preferred approach, a quadtree node is constructed that corresponds one-to-one with the hierarchical structure of the tile. Specifically, each node has a row and column number and a hierarchy attribute; each node corresponds to a unique tile; when creating a quadtree node, a unique identifier is assigned to each node, and its row and column number and hierarchy attribute are set; based on the tile's hierarchy and row and column number, the tile geometry is associated with the corresponding quadtree node.

[0017] Preferably, based on the tile row and column number and the layer, the latitude and longitude range corresponding to the tile geometry managed by the node is calculated. Specifically, the width of the corresponding tile under the node layer is calculated using the layer attribute; the four boundaries of the tile are calculated using the row and column number and the tile width; wherein, the width of the tile is calculated using the planar map width defined by the Mercator projection coordinate system and the current layer; and the latitude and longitude range (west, east, south, north) of the tile on the Earth's surface is calculated based on the tile row and column number and the width.

[0018] Preferably, the latitude and longitude of the tile geometry are divided into multiple equal radian ranges. The coordinates of each point on the geometry on the unit sphere are calculated based on the corresponding radian range. Specifically, the latitude and longitude are converted into radian representation, and the geometry is divided into equal radian ranges according to the number of grid points. The coordinates of the grid points on the geometry on the unit sphere are calculated based on the radian range. The specific steps are as follows:

[0019] S601: Convert the latitude and longitude range of the tile into radians;

[0020] S602: Divide the radius of the tile into multiple smaller radius ranges based on the number of grid divisions of the geometry;

[0021] S603: Using the spherical coordinate formula, calculate the coordinates of the corresponding grid point on the unit sphere based on the midpoint of each small radian range.

[0022] Preferably, based on the coordinates of the geometry on the unit sphere, the coordinates of the actual 3D Earth in the WGS84 coordinate system are calculated. Specifically, the coordinates of each grid point on the geometry on the unit sphere are multiplied by the Earth radius defined by the WGS84 coordinate system. The Earth radius (6,378,137 meters) defined by the WGS84 coordinate system is used to convert the coordinates on the unit sphere into actual 3D Earth coordinates. The corresponding UV coordinate values ​​are calculated based on the actual coordinates of the points within the geometry. Specifically, the UV coordinate values ​​of the tile image are calculated based on the actual coordinates of each grid point within the geometry. The UV coordinates of each grid point within the geometry are calculated on the tile image. The UV coordinates are used to map textures onto the 3D model, and the UV coordinate values ​​are calculated based on the resolution of the tile image and the actual coordinates of the grid points.

[0023] Preferably, based on the distance from the camera to each tile model, the node splitting and leaf node merging of the quadtree structure are selected to achieve the Level of Detail (Lofty Detail) function. Specifically, a random point is acquired at each frame on the screen, and the model intersecting the ray is calculated using raycasting. The distance of the model from the camera is then calculated, and finally, the quadtree nodes are split and merged according to a distance threshold to load the lower or upper layer tiles, thus achieving the Lofty Detail function. During each frame rendering, a random point is acquired from the screen, and the raycasting function of three.js is used to calculate the tile model intersecting the point. Based on the distance from the camera to the intersecting tile model and a preset distance threshold, it is decided whether to split or merge the quadtree nodes. If the distance is less than the threshold, the node is split, and a more detailed tile is loaded; if the distance is greater than the threshold, the node is merged, and a coarser tile is loaded.

[0024] Preferably, the boundaries of a tile are calculated using its row and column numbers and tile width. Specifically, the tile width for each level is calculated using the width of the planar map defined by the Mercator projection coordinate system. The specific steps are as follows:

[0025] S901: The width of the tile is calculated using the Earth's semi-circumference in the Mercator projection coordinate system and the current layer; the calculation formula is as follows:

[0026] width = 2 * L / pow(2,z); where L is the half-circumference of the Earth under Mercator projection, and z is the current level;

[0027] S902: Use row and column numbers and tile width to calculate the four boundaries of a tile (latitude and longitude of west, east, south, and north).

[0028] Preferably, an accurate 3D Earth model is constructed based on the tile row and column numbers and hierarchical information, specifically including the following steps:

[0029] A1: Construct a quadtree structure with only one root node. All non-leaf nodes have four child nodes, which corresponds one-to-one with the hierarchical relationship of the tile structure, facilitating the management of tile nodes and the LOD function of the tiles.

[0030] A2: Based on the row and column numbers and layer attributes of the tiles, calculate the top, bottom, left, and right boundaries of the tile model, determine the latitude and longitude range of the model, and then convert the latitude and longitude into a representation in radians.

[0031] A3: Divide the geometry of the tile model into a regular grid, bisect the arc length of the geometry in an equal arc manner, and calculate the coordinates of the point on the unit sphere based on the arc information of each grid point;

[0032] A4: Multiply the coordinates of each grid point on the unit sphere by the radius of the Earth in the WGS84 coordinate system to obtain the actual Earth coordinates.

[0033] A5: Calculate the UV coordinate values ​​of the tile image based on the actual coordinates of each grid point within the geometry;

[0034] A6: Based on the distance between the model and the camera, calculate the ratio to the layer. Finally, based on the threshold, split and merge the quadtree nodes to load the lower or upper layer tiles, thus achieving the Level of detail function.

[0035] A 3D Earth display system based on a quadtree structure using Three.js includes:

[0036] The quadtree construction module is responsible for building the quadtree structure, which corresponds one-to-one with the hierarchical structure of the tiles; each node has a row and column number and a level attribute, and each non-leaf node has four child nodes;

[0037] The tile range calculation module is used to calculate the latitude and longitude boundaries of the tile geometry managed by the node based on the tile's row and column numbers and layer.

[0038] The geometric coordinate calculation module is used to divide the latitude and longitude of the tile geometry into multiple equal radian ranges, calculate the coordinates of each point of the geometry on the unit sphere according to the corresponding radian, and further convert them into actual three-dimensional Earth coordinates in the WGS84 coordinate system.

[0039] The UV coordinate calculation module is used to calculate the corresponding UV coordinate values ​​based on the actual coordinate points within the geometry, so that the texture map can be mapped onto the geometry.

[0040] The LOD management module is used to select the node splitting and leaf node merging of the quadtree structure based on the distance from the camera to each tile model, thereby realizing the Level of Detail function;

[0041] The rendering and display module is used to display a 3D globe model on the system and show the corresponding level of detail in the tiles.

[0042] The beneficial effects of this invention are:

[0043] 1. Compared to the WEBGL-based low-level language development in virtual 3D Earth systems and digital twin GIS platforms, which suffers from unclear structure, difficulty in tile node state management, and simplification of program functionality expansion by non-computer professionals, as well as the cumbersome method of achieving LOD (Level of Detail) with poor visual effects and high computational load, this invention constructs a map structure model using a quadtree structure. This results in a clear data structure, facilitates node management, eliminates the need to consider camera frustum, enables easy program functionality expansion, and significantly reduces computational load during the LOD process.

[0044] 2. A quadtree structure is used to construct the 3D Earth model. This structure has a clear hierarchy and node relationship. Each node corresponds to a specific area on the Earth's surface, and non-leaf nodes have four child nodes, which corresponds one-to-one with the hierarchical relationship of the tile structure. This structure makes the management of tile nodes simpler and more intuitive, which is beneficial to subsequent program development and maintenance.

[0045] 3. By calculating the proportional relationship between the model and the camera based on the distance between the model and the camera, and splitting and merging quadtree nodes according to a threshold, the Level of Detail (LOD) function is realized. This method enables faster loading of lower or upper layer tiles when switching layers, thereby improving the efficiency of LOD. At the same time, due to the clarity of the quadtree structure, unnecessary complexity is reduced in the calculation process, greatly reducing the amount of computation.

[0046] 4. The modular program structure facilitates the expansion and modification of subsequent functions; for non-computer professionals, this structured approach also makes it easier for them to understand and participate in program development; in addition, by optimizing the LOD process and reducing the amount of computation, this invention also improves the user experience when using the three-dimensional earth system, making the system smoother and more efficient. Attached Figure Description

[0047] Figure 1 The diagram shown is a simplified flowchart of the method for displaying a 3D Earth based on a quadtree structure using Three.js according to the present invention.

[0048] Figure 2 The diagram shows a detailed flowchart of the method for displaying a 3D Earth based on a quadtree structure using Three.js, according to the present invention.

[0049] Figure 3 The diagram shown is a schematic of the module structure of the three-dimensional earth display system based on the quadtree structure of ThreeJS according to the present invention.

[0050] Figure 4The diagram shown is a schematic representation of the tile image structure of the three-dimensional Earth display method based on a quadtree structure of ThreeJS according to the present invention. Detailed Implementation

[0051] The present invention will be further described below with reference to the accompanying drawings and embodiments.

[0052] Please see Figure 1-4 This invention provides an embodiment of a method and system for displaying a 3D Earth based on a quadtree structure using Three.js. The method for displaying a 3D Earth based on a quadtree structure using Three.js first constructs quadtree nodes, and then calculates the corresponding mesh model of the Earth's surface based on the tile row and column numbers and hierarchical data; it includes the following steps:

[0053] S101: Construct a quadtree node that corresponds one-to-one with the hierarchical structure of the tile;

[0054] S102: Calculate the latitude and longitude boundaries of the tile geometry managed by this node based on the tile row and column number and the layer.

[0055] S103: Divide the latitude and longitude of the tile geometry into multiple equal radian ranges, and calculate the coordinates of each point of the geometry on the unit sphere according to the corresponding radian.

[0056] S104: Calculate the coordinates of the actual three-dimensional Earth in the WGS84 coordinate system based on the coordinates of the geometric object on the unit sphere.

[0057] S105: Calculate the corresponding UV coordinate values ​​based on the actual coordinate points within the geometry;

[0058] S106: Based on the distance from the camera to each tile model, select to split the nodes of the quadtree structure and merge the leaf nodes to achieve the Level of detail function;

[0059] S107: Display the 3D Earth model on the system and show the corresponding level of detail of the tiles.

[0060] Preferably, Three.js is an open-source WebGL framework that provides 3D graphics rendering capabilities. Three.js's material, texture, mesh, and camera functions are used to create and render a 3D Earth model. The Earth's surface mesh model is created using Three.js's Mesh class, textures and colors are added to the mesh model using ShaderMaterial and MeshBasicMaterial material classes, tile images are loaded as textures using the TextureLoader class, and finally the 3D Earth model is added to the Three.js scene and rendered using the Renderer.

[0061] As a preferred option, a quadtree structure is used, specifically: there is only one root node, and each non-leaf node has four child nodes; when constructing the quadtree structure, child nodes are recursively created starting from the root node according to the tile's level and row and column numbers; each non-leaf node contains references to its four child nodes (top left, top right, bottom left, and bottom right); the node data structure contains the node's level, row and column numbers, and references to the corresponding tile geometry.

[0062] As a preferred approach, a quadtree node is constructed that corresponds one-to-one with the hierarchical structure of the tile. Specifically, each node has a row and column number and a hierarchy attribute; each node corresponds to a unique tile; when creating a quadtree node, a unique identifier is assigned to each node, and its row and column number and hierarchy attribute are set; based on the tile's hierarchy and row and column number, the tile geometry is associated with the corresponding quadtree node.

[0063] Preferably, based on the tile row and column number and the layer, the latitude and longitude range corresponding to the tile geometry managed by the node is calculated. Specifically, the width of the corresponding tile under the node layer is calculated using the layer attribute; the four boundaries of the tile are calculated using the row and column number and the tile width; wherein, the width of the tile is calculated using the planar map width defined by the Mercator projection coordinate system and the current layer; and the latitude and longitude range (west, east, south, north) of the tile on the Earth's surface is calculated based on the tile row and column number and the width.

[0064] Preferably, the latitude and longitude of the tile geometry are divided into multiple equal radian ranges. The coordinates of each point on the geometry on the unit sphere are calculated based on the corresponding radian range. Specifically, the latitude and longitude are converted into radian representation, and the geometry is divided into equal radian ranges according to the number of grid points. The coordinates of the grid points on the geometry on the unit sphere are calculated based on the radian range. The specific steps are as follows:

[0065] S601: Convert the latitude and longitude range of the tile into radians;

[0066] S602: Divide the radius of the tile into multiple smaller radius ranges based on the number of grid divisions of the geometry;

[0067] S603: Using the spherical coordinate formula, calculate the coordinates of the corresponding grid point on the unit sphere based on the midpoint of each small radian range.

[0068] Preferably, based on the coordinates of the geometry on the unit sphere, the coordinates of the actual 3D Earth in the WGS84 coordinate system are calculated. Specifically, the coordinates of each grid point on the geometry on the unit sphere are multiplied by the Earth radius defined by the WGS84 coordinate system. The Earth radius (6,378,137 meters) defined by the WGS84 coordinate system is used to convert the coordinates on the unit sphere into actual 3D Earth coordinates. The corresponding UV coordinate values ​​are calculated based on the actual coordinates of the points within the geometry. Specifically, the UV coordinate values ​​of the tile image are calculated based on the actual coordinates of each grid point within the geometry. The UV coordinates of each grid point within the geometry are calculated on the tile image. The UV coordinates are used to map textures onto the 3D model, and the UV coordinate values ​​are calculated based on the resolution of the tile image and the actual coordinates of the grid points.

[0069] Preferably, based on the distance from the camera to each tile model, the node splitting and leaf node merging of the quadtree structure are selected to achieve the Level of Detail (Lofty Detail) function. Specifically, a random point is acquired at each frame on the screen, and the model intersecting the ray is calculated using raycasting. The distance of the model from the camera is then calculated, and finally, the quadtree nodes are split and merged according to a distance threshold to load the lower or upper layer tiles, thus achieving the Lofty Detail function. During each frame rendering, a random point is acquired from the screen, and the raycasting function of three.js is used to calculate the tile model intersecting the point. Based on the distance from the camera to the intersecting tile model and a preset distance threshold, it is decided whether to split or merge the quadtree nodes. If the distance is less than the threshold, the node is split, and a more detailed tile is loaded; if the distance is greater than the threshold, the node is merged, and a coarser tile is loaded.

[0070] Preferably, the boundaries of a tile are calculated using its row and column numbers and tile width. Specifically, the tile width for each level is calculated using the width of the planar map defined by the Mercator projection coordinate system. The specific steps are as follows:

[0071] S901: The width of the tile is calculated using the Earth's semi-circumference in the Mercator projection coordinate system and the current layer; the calculation formula is as follows:

[0072] width = 2 * L / pow(2,z); where L is the half-circumference of the Earth under Mercator projection, and z is the current level;

[0073] S902: Use row and column numbers and tile width to calculate the four boundaries of a tile (latitude and longitude of west, east, south, and north).

[0074] Preferably, an accurate 3D Earth model is constructed based on the tile row and column numbers and hierarchical information, specifically including the following steps:

[0075] A1: Construct a quadtree structure with only one root node. All non-leaf nodes have four child nodes, which corresponds one-to-one with the hierarchical relationship of the tile structure, facilitating the management of tile nodes and the LOD function of the tiles.

[0076] A2: Based on the row and column numbers and layer attributes of the tiles, calculate the top, bottom, left, and right boundaries of the tile model, determine the latitude and longitude range of the model, and then convert the latitude and longitude into a representation in radians.

[0077] A3: Divide the geometry of the tile model into a regular grid, bisect the arc length of the geometry in an equal arc manner, and calculate the coordinates of the point on the unit sphere based on the arc information of each grid point;

[0078] A4: Multiply the coordinates of each grid point on the unit sphere by the radius of the Earth in the WGS84 coordinate system to obtain the actual Earth coordinates.

[0079] A5: Calculate the UV coordinate values ​​of the tile image based on the actual coordinates of each grid point within the geometry;

[0080] A6: Based on the distance between the model and the camera, calculate the ratio to the layer. Finally, based on the threshold, split and merge the quadtree nodes to load the lower or upper layer tiles, thus achieving the Level of detail function.

[0081] A 3D Earth display system based on a quadtree structure using Three.js includes:

[0082] The quadtree construction module is responsible for building the quadtree structure, which corresponds one-to-one with the hierarchical structure of the tiles; each node has a row and column number and a level attribute, and each non-leaf node has four child nodes;

[0083] The tile range calculation module is used to calculate the latitude and longitude boundaries of the tile geometry managed by the node based on the tile's row and column numbers and layer.

[0084] The geometric coordinate calculation module is used to divide the latitude and longitude of the tile geometry into multiple equal radian ranges, calculate the coordinates of each point of the geometry on the unit sphere according to the corresponding radian, and further convert them into actual three-dimensional Earth coordinates in the WGS84 coordinate system.

[0085] The UV coordinate calculation module is used to calculate the corresponding UV coordinate values ​​based on the actual coordinate points within the geometry, so that the texture map can be mapped onto the geometry.

[0086] The LOD management module is used to select the node splitting and leaf node merging of the quadtree structure based on the distance from the camera to each tile model, thereby realizing the Level of Detail function;

[0087] The rendering and display module is used to display a 3D globe model on the system and show the corresponding level of detail in the tiles.

[0088] Example 1

[0089] Optionally, calculating the UV values ​​of the image includes the following steps:

[0090] A101: Construct a quadtree structure that corresponds one-to-one with the hierarchical structure of the image;

[0091] A102: Calculate the four boundaries of the node, i.e. the latitude and longitude range of east, west, south, and north, based on the node's row and column numbers and layer connection attributes.

[0092] A103: Divide the geometry into multiple equidistant grid points, and calculate the true 3D coordinates in the WGS84 coordinate system based on the radian value of each point;

[0093] A104: Calculate the UV value of the image corresponding to the point based on the three-dimensional coordinates calculated in step A103;

[0094] By constructing a map structure model using a quadtree, the data structure is clear, which is conducive to node management. Furthermore, it eliminates the need to consider the camera's view frustum, facilitating the expansion of program functions, making the LOD process faster, and significantly reducing the amount of computation.

[0095] Example 2

[0096] Optionally, when constructing and splitting / merging quadtree structures, the following steps are included:

[0097] A201: Construct a quadtree structure that corresponds one-to-one with the hierarchical structure of the image. Non-leaf nodes have four child nodes, which are stored in an array, namely the top-left child node, the top-right child node, the bottom-left child node, and the bottom-right child node. Each node has row and column values ​​and hierarchical attributes, represented by x, y, and z respectively.

[0098] A202: Calculate the boundaries of the grid, that is, calculate the limited range of the grid in terms of latitude, longitude, and north / south. The calculation formula is as follows:

[0099] The Earth's semi-circumference under Mercator projection is L = 20037508.342789244, and the Earth's radius under WGS84 coordinate system is R = 6378137.0.

[0100] width = 2 * L / pow(2, z)

[0101] west = (-L + x * width) / R

[0102] east = (-L + (x + 1) * width) / R

[0103] north=atan(sinh((Ly*width) / R))

[0104] south=atan(sinh((L-(y+1)*width) / R))

[0105] A203: Calculate the actual coordinates of each point in the grid. First, convert the boundary information obtained from A202 into radian values. Then, based on the number of segments, calculate the coordinates (vetex(x,y,z)) of each grid point using the following formula:

[0106] vetex.x=R*cos(west+i)*sin(south+j);

[0107] vetex.y = R * cos(south + j);

[0108] vetex.z=R*sin(west+i)*sin(south+j);

[0109] A204: Calculate the UV values ​​of the image. After calculating the actual coordinates of each grid point, it is necessary to determine the correspondence between each point and the image's UV values. The calculation formula is as follows:

[0110] len = length(vetex);

[0111] lat = asin(vetex.y / len);

[0112] lon=atan2(-vetex.z,vetex.x);

[0113] mercator_x = len * longitude;

[0114] mercator_y=len*log(tan(PI / 4.0+lat / 2.0));

[0115] v=(mercator_y-south) / width;

[0116] u=(mercator_x-west) / pow(2,z);

[0117] A205: Load tile imagery. Based on the row and column number and level attributes of the current quadtree node, load satellite imagery with corresponding attributes of x, y, and z.

[0118] A206: Display the 3D globe and add the quadtree structure to the Three.js scene;

[0119] A207: Calculate the distance from the model to the camera, and perform quadtree structure splitting and merging; the calculation formula is as follows:

[0120] threshold=distance / pow(2,maxZ-z)

[0121] If the value exceeds the defined threshold range, a split operation is performed. The node splitting formula is as follows:

[0122] left_top = Node(2x, 2y, z+1)

[0123] right_top = Node(2x+1,2y,z+1)

[0124] left_bottom=Node(2x,2y+1,z+1)

[0125] right_bottom=Node(2x+1,2y+1,z+1)

[0126] The split nodes are then placed sequentially into the array managed by the parent node;

[0127] If the value is less than the defined threshold range, a merging operation is performed. The node notifies the parent node to perform the merging operation, first making the four child nodes invisible, and then reclaiming memory and data.

[0128] By constructing a map structure model using a quadtree, the data structure is clear, which is conducive to node management. Furthermore, it eliminates the need to consider the camera's view frustum, facilitating the expansion of program functions, making the LOD process faster, and significantly reducing the amount of computation.

[0129] The embodiments of the present invention have been described in detail above with reference to the accompanying drawings. However, the present invention is not limited to the above embodiments. Within the scope of knowledge possessed by those skilled in the art, various changes can be made without departing from the spirit of the present invention.

Claims

1. A method for displaying a 3D globe based on a quadtree structure using Three.js, characterized by: First, construct a quadtree node, then calculate the corresponding mesh model of the Earth's surface based on the tile row and column numbers and hierarchical data; this includes the following steps: S101: Construct a quadtree node that corresponds one-to-one with the hierarchical structure of the tile; S102: Calculate the latitude and longitude boundaries of the tile geometry managed by this node based on the tile row and column number and the layer. S103: Divide the latitude and longitude of the tile geometry into multiple equal radian ranges, and calculate the coordinates of each point of the geometry on the unit sphere according to the corresponding radian. S104: Calculate the coordinates of the actual three-dimensional Earth in the WGS84 coordinate system based on the coordinates of the geometric object on the unit sphere. S105: Calculate the corresponding UV coordinate values ​​based on the actual coordinate points within the geometry; S106: During each frame rendering, a random point is obtained from the screen, and the ray detection function of Three.js is used to calculate the tile model that intersects with the random point. The measured distance from the camera to the intersecting tile model is compared with a preset distance threshold, and the quadtree node is split or merged. If the distance is less than the threshold, the node is split and a more refined tile is loaded. If the distance is greater than the threshold, nodes are merged and coarser tiles are loaded to achieve the Level of detail function. S107: Display the 3D Earth model on the system and show the corresponding level of detail of the tiles.

2. The method for displaying a 3D Earth based on a quadtree structure using Three.js according to claim 1, characterized in that: Three.js is an open-source WebGL framework that provides 3D graphics rendering capabilities. Three.js's material, texture, mesh, and camera functions are used to create and render a 3D Earth model. The Earth's surface mesh model is created using Three.js's Mesh class, textures and colors are added to the mesh model using ShaderMaterial and MeshBasicMaterial material classes, tile images are loaded as textures using the TextureLoader class, and finally, the 3D Earth model is added to the Three.js scene and rendered using the Renderer.

3. The method and system for displaying a 3D Earth based on a quadtree structure using Three.js as described in claim 2, characterized in that: The quadtree structure is as follows: there is only one root node, and each non-leaf node has four child nodes. When constructing the quadtree structure, child nodes are recursively created starting from the root node according to the tile's level and row and column numbers. Each non-leaf node contains references to its four child nodes: the top left, top right, bottom left, and bottom right. The node data structure contains the node's level, row and column numbers, and references to the corresponding tile geometry.

4. The method for displaying a 3D Earth based on a quadtree structure using Three.js according to claim 1, characterized in that: Construct a quadtree node that corresponds one-to-one with the hierarchical structure of the tile. Specifically, each node has a row and column number and a level attribute. Each node corresponds to a unique tile; when creating a quadtree node, each node is assigned a unique identifier and its row, column, and level attributes are set; based on the tile's level and row / column number, the tile geometry is associated with the corresponding quadtree node.

5. The method for displaying a 3D Earth based on a quadtree structure using Three.js according to claim 1, characterized in that: Based on the tile row and column number and the layer, calculate the latitude and longitude boundaries of the tile geometry managed by the node. Specifically: calculate the width of the tile corresponding to the node's layer using the layer attribute; calculate the tile's boundaries using the row and column number and the tile width; the tile width is calculated using the planar map width defined by the Mercator projection coordinate system and the current layer; and the latitude and longitude boundaries of the tile on the Earth's surface are calculated based on the tile's row and column number and width.

6. The method for displaying a 3D Earth based on a quadtree structure using Three.js according to claim 1, characterized in that: The tile geometry is divided into multiple equal radian ranges corresponding to latitude and longitude. The coordinates of each point on the geometry on a unit sphere are calculated based on the corresponding radian range. Specifically, latitude and longitude are converted to radians, and the geometry is divided into equal radian ranges according to the number of grid points. The coordinates of grid points on the geometry on a unit sphere are calculated based on the radian range. The specific steps are as follows: S601: Convert the latitude and longitude range of the tile into radians; S602: Divide the radius of the tile into multiple smaller radius ranges based on the number of grid divisions of the geometry; S603: Using the spherical coordinate formula, calculate the coordinates of the corresponding grid point on the unit sphere based on the midpoint of each small radian range.

7. The method for displaying a 3D Earth based on a quadtree structure using Three.js according to claim 1, characterized in that: Based on the coordinates of the geometry on the unit sphere, calculate the actual coordinates of the 3D Earth in the WGS84 coordinate system. Specifically, multiply the coordinates of each grid point on the geometry on the unit sphere by the Earth radius defined by the WGS84 coordinate system. The Earth radius defined by the WGS84 coordinate system is used to convert the coordinates on the unit sphere into actual 3D Earth coordinates. Calculate the corresponding UV coordinate values ​​based on the actual coordinates of the points within the geometry. Specifically, calculate the UV coordinate values ​​of the tile image based on the actual coordinates of each grid point within the geometry. The UV coordinates are used to map textures onto the 3D model, and the UV coordinate values ​​are calculated based on the resolution of the tile image and the actual coordinates of the grid points.

8. The method for displaying a 3D Earth based on a quadtree structure using Three.js according to claim 1, characterized in that: Based on the distance from the camera to each tile model, the quadtree structure's node splitting and leaf node merging are selected to achieve the Level of Detail (Lofty Detail) feature. Specifically: A random point is acquired at each frame on the screen, and the model intersecting the ray is calculated using raycasting. The distance of this model from the camera is then calculated. Finally, based on a distance threshold, quadtree nodes are split and merged to load either the lower or upper layer tile, achieving the Lofty Detail feature. During each frame rendering, a random point is acquired from the screen, and the raycasting function of three.js is used to calculate the tile model intersecting that point. Based on the distance from the camera to the intersecting tile model and a preset distance threshold, it is determined whether to split or merge the quadtree nodes. If the distance is less than the threshold, node splitting occurs, and a more detailed tile is loaded. If the distance is greater than the threshold, node merging is performed, and coarser tiles are loaded.

9. The method for displaying a 3D Earth based on a quadtree structure using Three.js according to claim 1, characterized in that: The boundaries of a tile are calculated using its row and column numbers and width. Specifically, the tile width for each level is calculated using the width of the planar map defined by the Mercator projection coordinate system. The specific steps are as follows: S901: The width of the tile is calculated using the Earth's semi-circumference in the Mercator projection coordinate system and the current layer; the calculation formula is as follows: width = 2 * L / pow(2,z); where L is the half-circumference of the Earth under Mercator projection, and z is the current level; S902: Use row and column numbers and tile width to calculate the latitude and longitude boundaries of the tile.

10. A three-dimensional earth display system based on a quadtree structure using Three.js, characterized in that: Including: The quadtree construction module is responsible for building the quadtree structure, which corresponds one-to-one with the hierarchical structure of the tiles; each node has a row and column number and a level attribute, and each non-leaf node has four child nodes; The tile range calculation module is used to calculate the latitude and longitude boundaries of the tile geometry managed by the node based on the tile's row and column numbers and layer. The geometric coordinate calculation module is used to divide the latitude and longitude of the tile geometry into multiple equal radian ranges, calculate the coordinates of each point of the geometry on the unit sphere according to the corresponding radian, and further convert them into actual three-dimensional Earth coordinates in the WGS84 coordinate system. The UV coordinate calculation module is used to calculate the corresponding UV coordinate values ​​based on the actual coordinate points within the geometry, so that the texture map can be mapped onto the geometry. The LOD management module is used to select the node splitting and leaf node merging of the quadtree structure based on the distance from the camera to each tile model, thereby realizing the Level of Detail function; The rendering and display module is used to display a 3D globe model on the system and show the corresponding level of detail in the tiles.

Images