WEB end 360-degree panoramic image rendering and relative space position information calculation method and WEB end 360-degree panoramic image rendering and relative space position information calculation system

Abstract

The invention discloses a WEB-end 360-degree panoramic image rendering and relative spatial position information calculation method and system, and relates to the technical field of computer graphic processing and network streaming media. The problem that the prior art mainly focuses on simple display of a single 360-degree panoramic image and lacks support for rendering and information interaction of multiple panoramic images is solved. The method comprises the following steps: acquiring a plurality of 360-degree panoramic images, and preprocessing each image; displaying and interacting the preprocessed panoramic image by using a panoramic image viewer, and setting to realize detection and labeling of important point locations in the panoramic image; transmitting the marked panoramic image through a network streaming media technology, and rendering the marked panoramic image; and calculating relative positions among the rendered images by adopting a spatial relation algorithm, and displaying the relative positions on a user interface. The method is applied to the fields of tourism, real estate, education and the like, and the information acquisition and decision-making efficiency of the user in the scenes is greatly improved.

Description

Technical Field

[0001] The present invention relates to the field of computer graphics processing and network streaming media technology, and in particular to the rendering of multiple 360-degree panoramic images, the display of information of important points in the images, and the calculation and display of the positions of the relative spatial relationships of the multiple panoramic images. Background Art

[0002] With the development of virtual reality technology, 360-degree panoramic images are gradually being applied to various scenarios, such as tourism, real estate, and education. Existing technologies mainly focus on the simple display of a single 360-degree panoramic image, and lack support for the rendering and information interaction of multiple panoramic images. When processing 360-degree panoramic images, existing systems are usually unable to effectively display the key point information in the image, and it is also difficult to display the positional relationship between different images. Therefore, there is an urgent need for a technology that can efficiently render multiple 360-degree panoramic images, support the display of key point information, and display the relative position relationship between images. Summary of the invention

[0003] The present invention is used to solve the problem that the prior art mainly focuses on the simple display of a single 360-degree panoramic image, and lacks support for the rendering and information interaction of multiple panoramic images.

[0004] To achieve the above object, the present invention provides the following technical solutions:

[0005] The present invention provides a method for rendering a 360-degree panoramic image on a web terminal and calculating relative spatial position information, the method comprising the following steps:

[0006] Step 1: Obtain multiple 360-degree panoramic images and pre-process each image;

[0007] Step 2: Use the panoramic image viewer to display and interact with the pre-processed panoramic image, and set it up to detect and mark important points in the panoramic image;

[0008] Step 3: Transmit the annotated panoramic image through network streaming technology and render it;

[0009] Step 4: Use the spatial relationship algorithm to calculate the relative positions between the rendered images and display them on the user interface.

[0010] Furthermore, in a preselected embodiment, the preprocessing includes image stitching, color correction and distortion correction.

[0011] Furthermore, there is another pre-selected embodiment, the above step 2 specifically includes the following steps:

[0012] Step 2.1: Initialize a panoramic image viewer and specify the ID of the HTML container that renders the panoramic image;

[0013] Step 2.2: Set the default pitch and yaw angles of the panoramic view;

[0014] Step 2.3: Set the URL and title of the panoramic image;

[0015] Step 2.4: Configure three plug-ins of the panoramic image viewer, namely, gallery plug-in, plane plug-in and mark plug-in;

[0016] Step 2.5: Add event listeners to the marking plug-in and panoramic image viewer respectively, so that the corresponding function is triggered when a specific marking point is selected to complete the detection and labeling of important points.

[0017] Furthermore, there is another pre-selected embodiment, the above step 3 specifically includes the following steps:

[0018] Step 3.1: Use Babylon.js to create a 3D scene instance and build a hemispherical light to provide basic lighting for the scene;

[0019] Step 3.2: Create an arc rotation camera so that users can rotate and zoom the 3D scene through mouse or touch operations;

[0020] Step 3.3: Set up loop rendering to ensure that the scene can be continuously updated and rendered;

[0021] Step 3.4: Add a click event listener to the 3D scene instance so that when the user clicks a specific object in the scene, the corresponding interaction logic is triggered.

[0022] Further, there is another pre-selected embodiment, the above step 4 specifically includes the following steps:

[0023] Step 4.1: Use Babylon.js to dynamically create a series of disk objects in the 3D scene, each disk represents a point on the map;

[0024] Step 4.2: Each disk has a different visual style depending on its index and status in the list;

[0025] Step 4.3: Match the disk to the index of the panoramic image one-to-one, obtain the position coordinate parameters recorded when the panoramic image was taken, and set the corresponding point of the disk in the three-dimensional coordinate system created by Babylon.js through the conversion of Vector3 three-dimensional vectors, so that it can be displayed in the user interface.

[0026] The method for rendering a 360-degree panoramic image on a web side and calculating relative spatial position information of the present invention can be implemented entirely by computer software. Therefore, correspondingly, the present invention also provides a system for rendering a 360-degree panoramic image on a web side and calculating relative spatial position information, the system comprising:

[0027] A storage device for acquiring multiple 360-degree panoramic images and preprocessing each image;

[0028] A storage device for displaying and interacting with pre-processed panoramic images using a panoramic image viewer, and for setting up detection and annotation of important points in the panoramic images;

[0029] A storage device for transmitting the annotated panoramic image through network streaming technology and performing rendering;

[0030] A storage device used to calculate the relative positions between rendered images using a spatial relationship algorithm and display them on a user interface.

[0031] The present invention also provides a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, the computer program executes any one of the above-mentioned methods for rendering a 360-degree panoramic image on a WEB and calculating relative spatial position information.

[0032] The present invention also provides a computer device, which includes a memory and a processor, wherein the memory stores a computer program, and when the processor runs the computer program stored in the memory, the processor executes any one of the above-mentioned methods for rendering a 360-degree panoramic image on a WEB side and calculating relative spatial position information.

[0033] Compared with the prior art, the present invention has the following beneficial effects:

[0034] 1. This invention uses an advanced Web technology stack, including JavaScript, Vue, Babylon.js and Photo-Sphere-Viewer (panoramic image viewer), to achieve efficient 360-degree panoramic image rendering. Compared with traditional technologies: it provides a highly scalable front-end framework that can easily manage and update the status and views of multiple 360-degree panoramic images, improving development efficiency and system responsiveness. It supports complex 3D scene rendering and can quickly render high-quality 360-degree panoramic images.

[0035] 2. When processing multiple panoramic images, traditional systems usually require users to switch views one by one, lacking unified management and display. The present invention divides the entire project into multiple components for calling, for example: 360 panoramic images as a component, marking plug-in as a component, point information display window as a component, so that through Vue's componentized structure and data management functions, the integrated display of multiple panoramic images is realized. Users can view and operate multiple panoramic images at the same time in one interface, which improves the convenience of use and information acquisition efficiency.

[0036] 3. In this invention, advanced image processing and annotation technology is used. Through the combination of Babylon.js and Photo-Sphere-Viewer (panoramic image viewer), important point information can be dynamically annotated and displayed in 360 panoramic images. These points can be edited and updated through user interaction to reflect the latest scene information in real time.

[0037] 4. The prior art often requires complex calculations and operations when displaying the relative positions between multiple panoramic images. The present invention automatically calculates and displays the relative position relationship between multiple images through the 3D spatial calculation function of Babylon.js, and users can intuitively view the spatial relationship between images by dragging and zooming. This method not only simplifies the operation, but also enhances the user's understanding of the spatial structure. The prior art can only display other points on the panorama, but not all the panoramic points as a whole.

[0038] 5. The present invention is based on Web technology and fully utilizes the performance optimization and resource management capabilities of modern browsers. Through JavaScript's asynchronous operation and Vue's responsive data binding, the system can maintain a smooth user experience when processing a large number of panoramic images and complex interactive operations. Compared with traditional desktop applications, the present invention has obvious advantages in convenience and accessibility.

[0039] By adopting an advanced Web technology stack, the present invention significantly improves the rendering efficiency of multiple 360-degree panoramic images, realizes the dynamic display and interaction of important points in the image, and improves the display of spatial relationships between multiple images, ensuring an efficient and smooth user experience. This technical solution supports cross-platform operation and can be widely used in fields such as tourism, real estate, and education, greatly improving the information acquisition and decision-making efficiency of users in these scenarios. The present invention not only achieves breakthroughs in technical performance, but also demonstrates significant effects in practical applications, and has broad application prospects and commercial value. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] Figure 1It is a flow chart of a method for rendering a 360-degree panoramic image on a WEB side and calculating relative spatial position information according to the present invention. DETAILED DESCRIPTION

[0041] The specific embodiments of the present invention are further described in detail below in conjunction with the accompanying drawings. The following embodiments will help those skilled in the art to further understand the present invention, but do not limit the present invention in any form. It should be noted that, for those of ordinary skill in the art, several changes and improvements can be made without departing from the concept of the present invention, which all belong to the protection scope of the present invention.

[0042] Implementation method 1, see Figure 1 To explain this embodiment, this embodiment provides a method for rendering a 360-degree panoramic image on a WEB and calculating relative spatial position information, which is used to solve the problem that the existing technology mainly focuses on the simple display of a single 360-degree panoramic image, and lacks support for the rendering of multiple panoramic images and information interaction.

[0043] Rendering of 360-degree panoramic images on the WEB side and calculation method of relative spatial position information, such as Figure 1 As shown, the following steps are included:

[0044] Step 1: Obtain multiple 360-degree panoramic images and pre-process each image;

[0045] Step 2: Use the panoramic image viewer to display and interact with the pre-processed panoramic image, and set it up to detect and mark important points in the panoramic image;

[0046] Step 3: Transmit the annotated panoramic image through network streaming technology and render it;

[0047] Step 4: Use the spatial relationship algorithm to calculate the relative positions between the rendered images and display them on the user interface.

[0048] This implementation adopts an advanced Web technology stack, including JavaScript, Vue, Babylon.js, and Photo-Sphere-Viewer (panoramic image viewer), to achieve efficient 360-degree panoramic image rendering and support for rendering and information interaction of multiple panoramic images.

[0049] Implementation method 2: This implementation method is to illustrate the specific steps of the method for rendering a 360-degree panoramic image on a web side and calculating relative spatial position information described in implementation method 1 by way of example;

[0050] Step 1: Obtain multiple 360-degree panoramic images and pre-process each image, including image stitching, color correction, and distortion correction;

[0051] The specific steps include:

[0052] First, multiple 360-degree panoramic images are acquired, and then each panoramic image is preprocessed. The preprocessing operation includes: stitching each panoramic image, and performing color correction and distortion correction on the stitched panoramic image. Color correction is used to adjust the color balance of the image to ensure that the colors of different parts of the panorama are consistent. Distortion correction is used to make the image look more natural.

[0053] Step 2: Use a panoramic image viewer to display and interact with the pre-processed panoramic image, and detect and mark important points in the panoramic image;

[0054] The specific steps include:

[0055] S21: Initialize a panoramic image viewer and specify the ID of the HTML container for rendering the panoramic image as viewer, wherein obtaining the container with the ID viewer helps to accurately locate and operate the container in the web page, and through the ID, the container can also be styled using CSS styles, or dynamic interactions can be performed using JavaScript, such as loading panoramic images, controlling views, etc. This ID ensures the uniqueness of a specific element and simplifies the control of panoramic image rendering.

[0056] S22: Setting a default pitch angle (vertical rotation angle) and yaw angle (horizontal rotation angle) of the panoramic view.

[0057] S23: Setting the URL and title of the panoramic image; wherein the URL of the panoramic image is a network address used to load and display the panoramic image.

[0058] S24: Configure three plug-ins for the panoramic image viewer, namely, the gallery plug-in, the plane plug-in, and the tag plug-in; wherein, configure the gallery plug-in and the plane plug-in; use the gallery plug-in GalleryPlugin to allow users to switch between multiple panoramas; use the plane plug-in PlanPlugin to allow users to view and interact with the 2D plane; wherein, set the default zoom level in the plane plug-in, set the latitude and longitude coordinates corresponding to the panoramic image, set the direction of the panoramic image, set the number of layers, including setting two layers, Tiandi Map and Google Satellite, so that users can see the geographic location information in the panoramic image. Tiandi Map is a Chinese map service that provides map tile services, and Google Satellite provides Google's satellite image services. Create two TileLayer objects, which are used to load Tiandi Map's image layer and Google Satellite layer respectively, and set the subdomain name of each layer. Tiandi Map specifies 8 subdomains to disperse requests, and Google Satellite layer specifies 4 subdomains to disperse requests, both of which support load balancing. At the same time, set copyright information for each layer. Use the marker plugin MarkersPlugin to add marker points, which is used to add markers to the panoramic map, implement the point marking function, and allow users to interact with these markers.

[0059] S25: adding event listeners to the marker plug-in and the panoramic image viewer respectively, adding event listeners to the marker points to monitor the marker selection event, so that when the user selects a specific marker point, the corresponding function is triggered, that is, when the user selects the marker point with ID marker-arrowTo21, the handleChangePhoto("21") function is called. When the user selects the marker point with ID marker-arrowTo06, the handleChangePhoto("06") function is called to change the displayed panoramic photo;

[0060] Add an event listener to the panoramic image viewer to monitor the loading status of the panoramic image. The event listener can also monitor the map's ReadyEvent. Once the map is ready, if there is marker data, call the goToMarker function to move the map view to a specific marker position. When the panoramic image is loaded, you can also call the reloadViewer function to refresh or update the status of the panoramic image viewer. This allows point detection to be achieved through user interaction, and the detection and marking of important points in the panoramic image can be completed.

[0061] Step 3: Transmit the annotated panoramic image through network streaming technology and render it;

[0062] The specific steps include:

[0063] Step 3.1: Use Babylon.js to create a 3D scene instance and build a hemispherical light to provide basic lighting for the scene;

[0064] Step 3.2: Create an arc rotation camera so that users can rotate and zoom the 3D scene through mouse or touch operations;

[0065] Step 3.3: Set up loop rendering to ensure that the scene can be continuously updated and rendered;

[0066] Step 3.4: Add a click event listener to the 3D scene instance so that when the user clicks a specific object in the scene, the corresponding interaction logic is triggered. At the same time, the browser window size change event is also listened to to dynamically adjust the rendering size of the 3D scene to adapt to different screen sizes.

[0067] Step 4: Use the spatial relationship algorithm to calculate the relative positions between the rendered images and display them on the user interface.

[0068] The specific steps include:

[0069] Step 4.1: Use Babylon.js to dynamically create a series of disk objects in the 3D scene, each disk represents a point on the map;

[0070] Step 4.2: Each disk has a different visual style depending on its index and status in the list;

[0071] Step 4.3: Match the disk to the index of the panoramic image one-to-one, obtain the position coordinate parameters recorded when the panoramic image was taken, and set the corresponding point of the disk in the three-dimensional coordinate system created by Babylon.js through the conversion of Vector3 three-dimensional vectors, so that it can be displayed in the user interface.

[0072] The specific conversion steps are: disc.position = new Babylon.Vector3 (point.y, point.z,

[0073] -point.x)

[0074] Among them: the original x coordinate of the point corresponds to the -z coordinate in Vector3, the original y coordinate of the point corresponds to the x coordinate in Vector3, and the original z coordinate of the point corresponds to the y coordinate in Vector3.

[0075] This implementation uses advanced image processing and annotation techniques, through Babylon.js and

[0076] The combination of Photo-Sphere-Viewer (panoramic image viewer) can dynamically mark and display important point information in 360 panoramic images. These points can be edited and updated through user interaction to reflect the latest scene information in real time.

[0077] This implementation adopts an advanced Web technology stack, including JavaScript, Vue, Babylon.js, and Photo-Sphere-Viewer (panoramic image viewer), to achieve efficient 360-degree panoramic image rendering. Compared with traditional technologies: it provides a highly scalable front-end framework that can easily manage and update the status and views of multiple 360-degree panoramic images, improving development efficiency and system responsiveness. It supports complex 3D scene rendering and can quickly render high-quality 360-degree panoramic images.

[0078] Implementation method 3: This implementation method is to illustrate the method for rendering a 360-degree panoramic image on a web side and calculating relative spatial position information described in any one of implementation methods 1 to 2.

[0079] First, initialize the 360 ​​panoramic image plug-in and image preprocessing;

[0080] Create a panoramic image viewer viewer; specify the ID of the HTML container for rendering panoramic images as viewer; set the default pitch angle and yaw angle of the panoramic view; set the URL of the panoramic image, using data.photoUrl as the data source; set the title or description of the panoramic image, using data.photoName as the data source; configure three plug-ins for the panoramic image viewer, namely the gallery plug-in GalleryPlugin, the plane plug-in PlanPlugin and the marker plug-in MarkersPlugin. Among them, the gallery plug-in GalleryPlugin is used to allow users to switch between multiple panoramas; the plane plug-in PlanPlugin is used to allow users to view and interact with 2D planes, and the default zoom level is set in the plane plug-in; set the latitude and longitude coordinates corresponding to the panoramic image; set the orientation of the panoramic image; set the number of layers, including Tiandi Map and Google Satellite. Among them, Tiandi Map is a map service in China that provides map tile services. Tiandi Map specifies 8 subdomains to disperse requests; Google The Satellite layer provides Google's satellite image services; the Google Satellite layer specifies 4 subdomains to disperse requests and sets copyright information for each layer; the MarkersPlugin is used to add markers to the panoramic map, set the default hover zoom of the markers in the MarkersPlugin, and set the marker data.

[0081] When applying, this can be achieved through the following code:

[0082]

[0083]

[0084] To set point markers:

[0085] Add an event listener in the marker plug-in to listen for the marker selection event. When the user selects a marker point, trigger the corresponding operation. Specifically, when the user selects the marker point with ID marker-arrowTo21, call

[0086] handleChangePhoto("21") function. When the user selects the marker point with ID marker-arrowTo06, the handleChangePhoto("06") function is called.

[0087] Add event listeners to the panoramic image viewer to monitor the loading status of the panorama, the ready status of the panoramic image viewer, etc.

[0088] When applying, this can be achieved through the following code:

[0089]

[0090]

[0091] Get point information:

[0092] Use Babylon.js to create a 3D scene instance and initialize a hemispherical light to provide basic lighting effects for the scene; create an arc rotation camera so that users can rotate and zoom the 3D scene through mouse or touch operations. Set up loop rendering to ensure that the scene can be continuously updated and rendered. Listen to the browser window size change event and dynamically adjust the rendering size of the 3D scene to adapt to different screen sizes. Add a click event listener to the 3D scene instance so that when the user clicks a specific object in the scene, the corresponding interaction logic is triggered.

[0093] When applying, this can be achieved through the following code:

[0094]

[0095]

[0096] Processing and switching of point information:

[0097] Use Babylon.js to dynamically create a series of disk objects in the 3D scene. Each disk represents a point on the map. Each disk has different visual styles according to its index in the list and its status (whether it is activated or not). Specifically, the disks in the activated state have different colors to facilitate user distinction. The position and rotation of the disks are set according to the coordinate data of the points to ensure that they are displayed correctly in the 3D space. The disks are matched one-to-one with the index of the panoramic image, and the position coordinate parameters recorded when the panoramic image was taken are obtained. Through the conversion of Vector3 three-dimensional vectors, the corresponding points of the disks in the three-dimensional coordinate system created by Babylon.js are set so that they can be displayed in the user interface.

[0098] The specific conversion steps are: disc.position = new Babylon.Vector3 (point.y, point.z,

[0099] -point.x)

[0100] Among them: the original x coordinate of the point corresponds to the -z coordinate in Vector3, the original y coordinate of the point corresponds to the x coordinate in Vector3, and the original z coordinate of the point corresponds to the y coordinate in Vector3.

[0101] When applying, this can be achieved through the following code:

[0102]

[0103]

[0104] Process the click point to switch the panorama:

[0105]

[0106]

[0107] Processing click points:

[0108]

[0109] This implementation significantly improves the rendering efficiency of multiple 360-degree panoramic images by adopting an advanced Web technology stack, realizes the dynamic display and interaction of important points in the image, and improves the display of spatial relationships between multiple images, ensuring an efficient and smooth user experience. This technical solution supports cross-platform operation and can be widely used in fields such as tourism, real estate, and education, greatly improving the information acquisition and decision-making efficiency of users in these scenarios. The present invention not only achieves breakthroughs in technical performance, but also demonstrates significant effects in practical applications, and has broad application prospects and commercial value.

[0110] Embodiment 4: This embodiment is an example of the effect of the method for rendering a 360-degree panoramic image on a web side and calculating relative spatial position information described in any one of the above embodiments 1 to 3.

[0111] Traditional online VR house viewing software only has marking points of other panoramic images on the ground of the panoramic image. Users can switch and display panoramic photos only by clicking the marking points in the red frame in the panoramic image. However, this technology mainly focuses on the simple display of a single 360 ​​panoramic image and lacks support for the rendering and information interaction of multiple panoramic images, that is, the problem mentioned in the background technology.

[0112] Therefore, this embodiment uses advanced Web technology stacks, including JavaScript, Vue, Babylon.js and Photo-Sphere-Viewer (panoramic image viewer), to achieve efficient 360-degree panoramic image rendering. Users can switch images by clicking on points in the panorama or on points on the overall point map, which makes it easier for users to understand the location information of the current point in the overall panoramic system, facilitates user operations, and supports the rendering of multiple panoramic images and information interaction.

[0113] Embodiment 5: The method for rendering a 360-degree panoramic image on a web side and calculating relative spatial position information described in any one of the above embodiments 1 to 3 can be implemented entirely by computer software. Therefore, correspondingly, this embodiment provides a system for rendering a 360-degree panoramic image on a web side and calculating relative spatial position information, and the system includes:

[0114] A storage device for acquiring multiple 360-degree panoramic images and preprocessing each image;

[0115] A storage device for displaying and interacting with pre-processed panoramic images using a panoramic image viewer, and for setting up detection and annotation of important points in the panoramic images;

[0116] A storage device for transmitting the annotated panoramic image through network streaming technology and performing rendering;

[0117] A storage device used to calculate the relative positions between rendered images using a spatial relationship algorithm and display them on a user interface.

[0118] Implementation method six: This implementation method provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, a method for rendering a 360-degree panoramic image on a WEB and calculating relative spatial position information as described in any one of the above implementation methods is executed.

[0119] Implementation method seven: This implementation method provides a computer device, which includes a memory and a processor, wherein the memory stores a computer program. When the processor runs the computer program stored in the memory, the processor executes a method for rendering a 360-degree panoramic image on a WEB side and calculating relative spatial position information as described in any one of the above implementation methods.

[0120] A computer device is provided in this embodiment. The hardware device of this part is a general model and is not shown in the form of a diagram. The system includes a processor and a memory, wherein the processor and the memory can be connected via a bus or other means. The memory is a non-transitory computer-readable storage medium that can be used to store non-transitory software programs, non-transitory computer executable programs and modules, and corresponding program instructions / modules. The processor executes various functional applications and data processing of the processor by running the non-transitory software programs, instructions and modules stored in the memory, so as to realize the rendering of the 360-degree panoramic image on the WEB side and the relative spatial position information calculation method and steps described in the above embodiments.

[0121] In the above description, specific details such as specific system structures and technologies are provided for the purpose of illustration rather than limitation, so as to provide a thorough understanding of the embodiments of the present application. However, it should be clear to those skilled in the art that the present application may also be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to prevent unnecessary details from obstructing the description of the present application.

[0122] It should be understood that when used in this specification and the appended claims, the term "comprising" indicates the presence of described features, integers, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, integers, steps, operations, elements, components and / or groups thereof.

[0123] The above description is only the implementation mode of the present invention and is not limited to the present invention. For those skilled in the art, the present invention may have various modifications and variations. Any modification, equivalent substitution, improvement, etc. made within the spirit and principle of the present invention shall be included in the scope of the claims of the present invention.

Claims

1. A method for rendering a 360-degree panoramic image on a web terminal and calculating relative spatial position information, characterized in that: The method is: Step 1: Obtain multiple 360-degree panoramic images and pre-process each image; Step 2: Use the panoramic image viewer to display and interact with the pre-processed panoramic image, and set it up to detect and mark important points in the panoramic image; Step 3: Transmit the annotated panoramic image through network streaming technology and render it; Step 4: Use the spatial relationship algorithm to calculate the relative positions between the rendered images and display them on the user interface.

2. According to claim 1, a method for rendering a 360-degree panoramic image on a web and calculating relative spatial position information is characterized in that: Preprocessing includes image stitching, color correction and distortion correction.

3. The method for rendering a 360-degree panoramic image on a web and calculating relative spatial position information according to claim 1, characterized in that: Step 2 is as follows: Step 2.1: Initialize a panoramic image viewer and specify the ID of the HTML container that renders the panoramic image; Step 2.2: Set the default pitch and yaw angles of the panoramic view; Step 2.3: Set the URL and title of the panoramic image; Step 2.4: Configure three plug-ins of the panoramic image viewer, namely, gallery plug-in, plane plug-in and mark plug-in; Step 2.5: Add event listeners to the marking plug-in and panoramic image viewer respectively, so that the corresponding function is triggered when a specific marking point is selected to complete the detection and labeling of important points.

4. The method for rendering a 360-degree panoramic image on a web and calculating relative spatial position information according to claim 1, characterized in that: Step 3 is as follows: Step 3.1: Use Babylon.js to create a 3D scene instance and build a hemispherical light to provide basic lighting for the scene; Step 3.2: Create an arc rotation camera so that users can rotate and zoom the 3D scene through mouse or touch operations; Step 3.3: Set up loop rendering to ensure that the scene can be continuously updated and rendered; Step 3.4: Add a click event listener to the 3D scene instance so that when the user clicks a specific object in the scene, the corresponding interaction logic is triggered.

5. The method for rendering a 360-degree panoramic image on a web and calculating relative spatial position information according to claim 1, characterized in that: Step 4 is as follows: Step 4.1: Use Babylon.js to dynamically create a series of disk objects in the 3D scene, each disk represents a point on the map; Step 4.2: Each disk has a different visual style depending on its index and status in the list; Step 4.3: Match the disk to the index of the panoramic image one-to-one, obtain the position coordinate parameters recorded when the panoramic image was taken, and set the corresponding point of the disk in the three-dimensional coordinate system created by Babylon.js through the conversion of Vector3 three-dimensional vectors, so that it can be displayed in the user interface.

6. A system for rendering 360-degree panoramic images on a web and calculating relative spatial position information, characterized in that: The system includes: a storage device for acquiring a plurality of 360-degree panoramic images and preprocessing each image; A storage device for displaying and interacting with pre-processed panoramic images using a panoramic image viewer, and for setting up detection and annotation of important points in the panoramic images; A storage device for transmitting the annotated panoramic image through network streaming technology and performing rendering; A storage device used to calculate the relative positions between rendered images using a spatial relationship algorithm and display them on a user interface.

7. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, which, when executed by a processor, executes a method for rendering a 360-degree panoramic image on a web and calculating relative spatial position information as described in any one of claims 1 to 5.

8. A computer device, characterized in that: The device includes a memory and a processor, wherein a computer program is stored in the memory. When the processor runs the computer program stored in the memory, the processor executes a method for rendering a 360-degree panoramic image on a WEB and calculating relative spatial position information as described in any one of claims 1 to 5.

Images