A method and system for rendering a WEB-side 360 panorama image and calculating relative spatial position information

Abstract

The application discloses a WEB terminal 360 panoramic image rendering and relative spatial position information calculation method and system, relates to the technical field of computer graphics processing and network streaming media, and solves the problem that the prior art mainly focuses on simple display of a single 360 panoramic image and lacks support for rendering and information interaction of multiple panoramic images. The method comprises the following steps: acquiring multiple 360 panoramic images, and pre-processing each image; adopting a panoramic image viewer to display and interact with the pre-processed panoramic images, and setting important point positions in the panoramic images to be detected and marked; transmitting the marked panoramic images by using network streaming media technology, and rendering the panoramic images; and calculating the relative positions of the rendered images by using a spatial relationship algorithm, and displaying the relative positions on a user interface. The application is applied to the fields of tourism, real estate and education, and greatly improves the information acquisition and decision-making efficiency of users in these scenes.

Description

Technical Field

[0001] This invention relates to the fields 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 about important points in the images, and the calculation and display of the relative spatial relationships of multiple panoramic images. Background Technology

[0002] With the development of virtual reality technology, 360-degree panoramic images are increasingly being applied in various scenarios, such as tourism, real estate, and education. Existing technologies mainly focus on the simple display of single 360-degree panoramic images, lacking support for rendering and information interaction across multiple panoramic images. When processing 360-degree panoramic images, existing systems typically cannot effectively display key point information within the images, and there are also difficulties in displaying the positional relationships 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 show the relative positional relationships between images. Summary of the Invention

[0003] This invention addresses the problem that existing technologies mainly focus on the simple display of a single 360° panoramic image, lacking support for rendering and information interaction of multiple panoramic images.

[0004] To achieve the above objectives, the present invention provides the following technical solution:

[0005] This invention provides a method for rendering 360° panoramic images and calculating their relative spatial position information on a web platform. The method includes the following steps:

[0006] Step 1: Acquire multiple 360-degree panoramic images and preprocess each image;

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

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

[0009] Step 4: Calculate the relative positions between the rendered images using a spatial relationship algorithm and display them on the user interface.

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

[0011] Furthermore, in another preliminary embodiment, step 2 above specifically includes the following steps:

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

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

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

[0015] Step 2.4: Configure the three plugins for the panoramic image viewer: the gallery plugin, the planarity plugin, and the marker plugin;

[0016] Step 2.5: Add event listeners to the marker plugin and the panoramic image viewer respectively, so that the corresponding function is triggered when a specific marker point is selected, and the detection and annotation of important points are completed.

[0017] Furthermore, in another preliminary embodiment, step 3 above specifically includes the following steps:

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

[0019] Step 3.2: Create an arc rotating camera that allows users to rotate and zoom to view the 3D scene using 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 on a specific object in the scene, the corresponding interaction logic is triggered.

[0022] Furthermore, in another preliminary embodiment, step 4 above specifically includes the following steps:

[0023] Step 4.1: Use Babylon.js to dynamically create a series of disk objects in the 3D scene, with each disk representing 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 with the index of the panoramic image to obtain the position coordinate parameters recorded when the panoramic image was captured, and set the corresponding point of the disk in the three-dimensional coordinate system created by Babylon.js through the transformation of Vector3 three-dimensional vector, so that it can be displayed in the user interface.

[0026] The method for rendering and calculating relative spatial position information of 360° panoramic images on a web platform, as described in this invention, can be entirely implemented using computer software. Therefore, correspondingly, this invention also provides a system for rendering and calculating relative spatial position information of 360° panoramic images on a web platform, the system comprising:

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

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

[0029] A storage device used for transmitting and rendering annotated panoramic images via network streaming technology;

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

[0031] The present invention also provides a computer-readable storage medium storing a computer program, which, when executed by a processor, performs the method for rendering a 360° panoramic image on a web platform and calculating its relative spatial position information as described in any of the preceding claims.

[0032] The present invention also provides a computer device, which includes a memory and a processor. The memory stores a computer program. When the processor runs the computer program stored in the memory, the processor executes the method for rendering a 360-degree panoramic image on a web platform and calculating its relative spatial position information as described in any of the above-mentioned claims.

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

[0034] 1. This invention employs an advanced web technology stack, including JavaScript, Vue, Babylon.js, and Photo-Sphere-Viewer (a panoramic image viewer), to achieve efficient 360° panoramic image rendering. Compared to traditional technologies, it provides a highly scalable front-end framework, enabling easy management and updating of the state and view of multiple 360° panoramic images, improving development efficiency and system responsiveness. It supports complex 3D scene rendering and can quickly render high-quality 360° panoramic images.

[0035] 2. Traditional systems typically require users to switch between views one by one when processing multiple panoramic images, lacking unified management and display. This invention divides the entire project into multiple components for unified operation. For example, the 360-degree panoramic image is used as one component, the marker plugin as another, and the location information display window as yet another. Leveraging Vue's component-based structure and data management capabilities, this allows for the integrated display of multiple panoramic images. Users can view and manipulate multiple panoramic images simultaneously within a single interface, improving ease of use and information retrieval efficiency.

[0036] 3. This invention utilizes advanced image processing and annotation technologies. By combining Babylon.js and Photo-Sphere-Viewer (a panoramic image viewer), it is possible to dynamically annotate and display important point information in 360° panoramic images. These points can be edited and updated through user interaction, reflecting the latest scene information in real time.

[0037] 4. Existing technologies often require complex calculations and operations to display the relative positions between multiple panoramic images. This invention utilizes the 3D spatial calculation function of Babylon.js to automatically calculate and display the relative positional relationships between multiple images. Users can intuitively view the spatial relationships between images through dragging and zooming. This method not only simplifies the operation but also enhances the user's understanding of the spatial structure. Existing technologies can only display other points on the panoramic image, without providing an overall display of all panoramic points.

[0038] 5. This invention is based on Web technology and fully utilizes the performance optimization and resource management capabilities of modern browsers. Through asynchronous JavaScript operations and Vue's reactive data binding, it ensures a smooth user experience even when processing large amounts of panoramic images and complex interactive operations. Compared to traditional desktop applications, this invention has significant advantages in convenience and accessibility.

[0039] This invention significantly improves the rendering efficiency of multiple 360° panoramic images by employing an advanced Web technology stack. It enables dynamic display and interaction of key points within the images and improves the spatial relationship display between multiple images, ensuring a highly efficient and smooth user experience. This technical solution supports cross-platform operation and can be widely applied in tourism, real estate, and education, greatly improving users' information acquisition and decision-making efficiency in these scenarios. This invention not only achieves breakthroughs in technical performance but also demonstrates significant effects in practical applications, possessing broad application prospects and commercial value. Attached Figure Description

[0040] Figure 1This is a flowchart of a method for rendering and calculating the relative spatial position information of a 360° panoramic image on a web platform, as described in this invention. Detailed Implementation

[0041] The specific embodiments of the present invention will be further described in detail below with reference to the accompanying drawings. These embodiments will help those skilled in the art to further understand the present invention, but do not limit the present invention in any way. It should be noted that those skilled in the art can make several changes and improvements without departing from the concept of the present invention, and these all fall within the protection scope of the present invention.

[0042] Implementation Method 1, see Figure 1 This embodiment describes a method for rendering 360° panoramic images and calculating their relative spatial position information on a web platform. This method addresses the shortcomings of existing technologies, which primarily focus on the simple display of a single 360° panoramic image and lack support for rendering and information interaction of multiple panoramic images.

[0043] Methods for rendering 360° panoramic images on the web and calculating their relative spatial position information, such as Figure 1 As shown, it includes the following steps:

[0044] Step 1: Acquire multiple 360-degree panoramic images and preprocess each image;

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

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

[0047] Step 4: Calculate the relative positions between the rendered images using a spatial relationship algorithm and display them on the user interface.

[0048] This implementation method utilizes 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 illustrates the specific steps of the rendering and relative spatial position information calculation method for a 360° panoramic image on a web platform as described in Implementation Method 1.

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

[0051] Specifically, the steps include the following:

[0052] First, multiple 360-degree panoramic images are acquired. Then, each panoramic image undergoes preprocessing, including: image stitching, and color and distortion correction. Color correction adjusts the color balance to ensure consistent colors across different parts of the panoramic image. Distortion correction makes the image look more natural.

[0053] Step 2: By using a panoramic image viewer to display and interact with the pre-processed panoramic image, important points in the panoramic image can be detected and labeled.

[0054] Specifically, the steps include the following:

[0055] S21: Initialize a panoramic image viewer and specify the ID of the HTML container rendering the panoramic image as "viewer". Obtaining the container with the ID "viewer" helps to accurately locate and manipulate that container on the webpage. The ID also allows for CSS styling of the container or dynamic interaction using JavaScript, such as loading panoramic images and controlling the view. This ID ensures the uniqueness of specific elements and simplifies control over panoramic image rendering.

[0056] S22: Set the default pitch angle (vertical rotation angle) and yaw angle (horizontal rotation angle) for the panoramic view.

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

[0058] S24: Configure three plugins for the panoramic image viewer: the Gallery Plugin, the Plan Plugin, and the Plan Plugin. Specifically, configure the Gallery and Plan Plugins. The Gallery Plugin allows users to switch between multiple panoramic images. The Plan Plugin allows users to view and interact with 2D plan images. Within the Plan Plugin, set the default zoom level, the latitude and longitude coordinates of the panoramic image, the orientation of the panoramic image, and the number of layers, including setting two layers: Tianditu (China's map service) and Google Satellite, so that users can see geographical location information in the panoramic image. Tianditu is a map service providing map tile services, while Google Satellite provides Google's satellite imagery services. Create two TileLayer objects, one for loading the Tianditu image layer and the other for the Google Satellite layer, and set the subdomain for each layer. Tianditu specifies 8 subdomains to distribute requests, and Google Satellite specifies 4 subdomains to distribute requests, both supporting load balancing. Copyright information is also set for each layer. Use the MarkersPlugin to add marker points to the panoramic map, enabling point marking functionality and allowing users to interact with these markers.

[0059] S25: Add event listeners to the marker plugin and the panoramic image viewer respectively. Add event listeners to the marker points to listen for marker selection events, 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, thereby changing the displayed panoramic photo.

[0060] Add event listeners to the panoramic image viewer to monitor the loading status of the panoramic image. These listeners can also listen for the map's `ReadyEvent`. Once the map is ready, if there is marker data, call the `goToMarker` function to move the map view to the specific marker location. After the panoramic image has finished loading, the `reloadViewer` function can be called to refresh or update the panoramic image viewer's state. This enables point detection through user interaction, allowing for the detection and labeling of important points in the panoramic imagery.

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

[0062] Specifically, the steps include the following:

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

[0064] Step 3.2: Create an arc rotating camera that allows users to rotate and zoom to view the 3D scene using 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 click event listeners to the 3D scene instance so that when the user clicks on a specific object in the scene, the corresponding interaction logic is triggered. Simultaneously, listen for browser window size change events to dynamically adjust the rendering size of the 3D scene to adapt to different screen sizes.

[0067] Step 4: Calculate the relative positions between the rendered images using a spatial relationship algorithm and display them on the user interface.

[0068] Specifically, the steps include the following:

[0069] Step 4.1: Use Babylon.js to dynamically create a series of disk objects in the 3D scene, with each disk representing 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 with the index of the panoramic image to obtain the position coordinate parameters recorded when the panoramic image was captured, and set the corresponding point of the disk in the three-dimensional coordinate system created by Babylon.js through the transformation of Vector3 three-dimensional vector, so that it can be displayed in the user interface.

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

[0073] -point.x)

[0074] Wherein: 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) enables dynamic annotation and display of important point information in 360-degree panoramic images. These points can be edited and updated through user interaction, reflecting the latest scene information in real time.

[0077] This implementation utilizes an advanced web technology stack, including JavaScript, Vue, Babylon.js, and Photo-Sphere-Viewer (a panoramic image viewer), to achieve efficient 360° panoramic image rendering. Compared to traditional technologies, it provides a highly scalable front-end framework, enabling easy management and updating of the state and view of multiple 360° panoramic images, improving development efficiency and system responsiveness. It supports complex 3D scene rendering and can quickly render high-quality 360° panoramic images.

[0078] Implementation Method 3: This implementation method is an example of a method for rendering and calculating the relative spatial position information of a 360-degree panoramic image on a web platform, as described in any one of Implementation Methods 1 to 2.

[0079] First, initialize the 360-degree panoramic image plugin and image preprocessing;

[0080] Create a panoramic image viewer; specify the viewer ID as the HTML container for rendering the panoramic image; set the default pitch and yaw angles 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 the three plugins for the panoramic image viewer: GalleryPlugin, PlanPlugin, and MarkersPlugin. The GalleryPlugin allows users to switch between multiple panoramic images; the PlanPlugin allows users to view and interact with 2D plan images, and sets the default zoom level within the PlanPlugin; set the latitude and longitude coordinates of the panoramic image; set the orientation of the panoramic image; set the number of layers, including two layers: Tianditu (China's map service) and Google Satellite. Tianditu provides map tile services and specifies eight subdomains to distribute requests; Google... The Satellite layer provides Google's satellite imagery service; the Google Satellite layer specifies four subdomains for distributing requests, and sets copyright information for each layer; the MarkersPlugin is used to add markers to the panoramic map, and sets the default hover zoom and marker data within the MarkersPlugin.

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

[0082]

[0083]

[0084] Set point markers:

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

[0086] The `handleChangePhoto("21")` function is called when the user selects the marker with the ID `marker-arrowTo06`.

[0087] Add event listeners to the panoramic image viewer to monitor the loading status of the panoramic image, the ready status of the panoramic image viewer, and so on.

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

[0089]

[0090]

[0091] Obtain location information:

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

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

[0094]

[0095]

[0096] Point information processing and switching:

[0097] Babylon.js is used to dynamically create a series of disk objects in a 3D scene. Each disk represents a point on the map, and each disk has a different visual style based on its index in the list and its status (whether it is active or not). Specifically, active disks have different colors for easy user differentiation. The position and rotation of the disks are set based on the coordinate data of the point to ensure they are displayed correctly in 3D space. A one-to-one correspondence is established between the disks and the indices of the panoramic image to obtain the position coordinate parameters recorded when the panoramic image was captured. Then, through the transformation of Vector3 3D vectors, the corresponding point position of the disk in the 3D coordinate system created by Babylon.js is set, allowing it to be displayed in the user interface.

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

[0099] -point.x)

[0100] Wherein: 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, it can be achieved using the following code:

[0102]

[0103]

[0104] Process click points to switch between panoramic views:

[0105]

[0106]

[0107] Processing click points:

[0108]

[0109] This implementation significantly improves the rendering efficiency of multiple 360° panoramic images by employing an advanced Web technology stack. It enables dynamic display and interaction of key points within the images and improves the spatial relationship display between multiple images, ensuring a highly efficient and smooth user experience. This technical solution supports cross-platform operation and can be widely applied in tourism, real estate, and education, greatly improving users' information acquisition and decision-making efficiency in these scenarios. This invention not only achieves a breakthrough in technical performance but also demonstrates significant effects in practical applications, possessing broad application prospects and commercial value.

[0110] Implementation Method 4: This implementation method is an example of the effect of the rendering and relative spatial position information calculation method of a 360-degree panoramic image on a web platform as described in any one of Implementation Methods 1 to 3 above.

[0111] Traditional online VR house viewing software only has markers for other panoramic images on the ground of the panoramic image. Users can only switch between and view panoramic photos by clicking on the markers in the red box within the panoramic image. However, this technology mainly focuses on the simple display of a single 360-degree panoramic image and lacks support for rendering and information interaction of multiple panoramic images, which is the problem mentioned in the background technology.

[0112] Therefore, this implementation method achieves efficient 360° panoramic image rendering by employing an advanced web technology stack, including JavaScript, Vue, Babylon.js, and Photo-Sphere-Viewer (panoramic image viewer). This allows users to switch images either by clicking on points within the panoramic image or by clicking on points on the overall point map. This makes it easier for users to understand the location of their current point within the overall panoramic system, simplifies user operation, and supports the rendering and information interaction of multiple panoramic images.

[0113] Implementation Method 5: The method for rendering and calculating relative spatial position information of a 360° panoramic image on a web platform, as described in any one of Implementation Methods 1 to 3, can be entirely implemented using computer software. Therefore, this implementation method provides a system for rendering and calculating relative spatial position information of a 360° panoramic image on a web platform, the system comprising:

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

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

[0116] A storage device used for transmitting and rendering annotated panoramic images via network streaming technology;

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

[0118] Implementation Method Six: This implementation method provides a computer-readable storage medium storing a computer program. When the computer program is run by a processor, it executes the method for rendering a 360° panoramic image on a web platform and calculating its relative spatial position information as described in any one of the above implementation methods.

[0119] Implementation Method Seven: This implementation method provides a computer device, which includes a memory and a processor. 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° panoramic image on a web platform and calculating its relative spatial position information as described in any one of the above implementation methods.

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

[0121] In the foregoing description, specific details such as particular system architectures and techniques have been set forth for illustrative purposes and not for limitation, in order to provide a thorough understanding of the embodiments of this application. However, those skilled in the art will understand that this application can also be implemented in other embodiments without these specific details. In other instances, detailed descriptions of well-known systems, apparatuses, circuits, and methods have been omitted to avoid unnecessary detail that could obscure the description of this application.

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

[0123] The above description is merely an embodiment of the present invention and is not intended to limit the invention. Various modifications and variations can be made to the present invention by those skilled in the art. Any modifications, equivalent substitutions, or improvements made within the spirit and principles of the present invention should be included within the scope of the claims of the present invention.

Claims

1. A method for rendering and calculating the relative spatial position information of 360° panoramic images on a web platform, characterized in that, The method is as follows: Step 1: Acquire multiple 360-degree panoramic images and preprocess each image; Step 2: Use a panoramic image viewer to display and interact with the pre-processed panoramic image, and set it up to detect and label important points in the panoramic image; Step 2 is as follows: Step 2.1: Initialize a panoramic image viewer and specify the ID of the HTML container for rendering the panoramic image; Step 2.2: Set the default pitch and yaw angles for the panoramic view; Step 2.3: Set the URL and title of the panoramic image; Step 2.4: Configure the three plugins for the panoramic image viewer: the gallery plugin, the planarity plugin, and the marker plugin; Step 2.5: Add event listeners to the marker plugin and the panoramic image viewer respectively, so that the corresponding function is triggered when a specific marker point is selected, and the detection and annotation of important points are completed; Step 3: Transmit the annotated panoramic image using network streaming media technology and then render it; Step 3 specifically involves: Step 3.1: Create a 3D scene instance using Babylon.js and build a hemispherical light to provide basic lighting for the scene; Step 3.2: Create an arc rotating camera that allows users to rotate and zoom to view the 3D scene using 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 on a specific object in the scene, the corresponding interaction logic is triggered; Step 4: Calculate the relative positions between the rendered images using a spatial relationship algorithm and display them on the user interface; Step 4 is as follows: Step 4.1: Use Babylon.js to dynamically create a series of disk objects in the 3D scene, with each disk representing 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 with the index of the panoramic image to obtain the position coordinate parameters recorded when the panoramic image was captured. Then, through the transformation of the Vector3 3D vector, set the corresponding point of the disk in the 3D coordinate system created by Babylon.js so that it can be displayed in the user interface.

2. The method for rendering and calculating relative spatial position information of a 360° panoramic image on a web platform according to claim 1, characterized in that, Preprocessing includes image stitching, color correction, and distortion correction.

3. A web-based system for rendering 360° panoramic images and calculating their relative spatial location information, characterized in that... The system includes: Storage device for acquiring multiple 360-degree panoramic images and preprocessing each image; A storage device for displaying and interactively processing pre-processed panoramic images using a panoramic image viewer, and for setting up the detection and annotation of important points in the panoramic images. Specifically: Initialize a panoramic image viewer and specify the ID of the HTML container for rendering the panoramic image; Set the default pitch and yaw angles for the panoramic view; Set the URL and title of the panoramic image; Configure three plugins for the panoramic image viewer: the gallery plugin, the plane plugin, and the marker plugin. Add event listeners to the marker plugin and panoramic image viewer respectively, so that when a specific marker point is selected, the corresponding function is triggered to complete the detection and annotation of important points; A storage device used for transmitting and rendering annotated panoramic images via network streaming technology; Specifically: Use Babylon.js to create a 3D scene instance and build a hemispherical light to provide basic lighting for the scene; Create an arc-rotating camera that allows users to rotate and zoom to view the 3D scene using mouse or touch controls; Set up loop rendering to ensure that the scene can be continuously updated and rendered; Add a click event listener to the 3D scene instance so that when the user clicks on a specific object in the scene, the corresponding interaction logic is triggered; A storage device used to calculate the relative positions between rendered images using spatial relationship algorithms and to display them on a user interface; Specifically: Use Babylon.js to dynamically create a series of disk objects in a 3D scene, with each disk representing a point on the map; Each disk has a different visual style depending on its index and status in the list; The disk is mapped one-to-one with the index of the panoramic image to obtain the position coordinate parameters recorded when the panoramic image was captured. Then, through the transformation of the Vector3 three-dimensional vector, the corresponding point of the disk in the three-dimensional coordinate system created by Babylon.js is set so that it can be displayed in the user interface.

4. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, performs the method for rendering and calculating the relative spatial position information of a 360° panoramic image on a web platform as described in any one of claims 1-2.

5. A computer device, characterized in that, The device includes a memory and a processor. The memory stores a computer program. When the processor runs the computer program stored in the memory, the processor executes the method for rendering and calculating the relative spatial position information of a 360° panoramic image on a web platform as described in any one of claims 1-2.

Images