Underground parking navigation system and method based on Three.js

Abstract

The invention belongs to the technical field of information, and relates to an underground parking navigation system based on Three.js, and the system comprises a parking lot data collection module which is used for collecting the parking space state data of a parking lot in real time, and transmitting the collected data to a rear-end server; the back-end server is used for managing a database and processing requests of the parking lot data acquisition module and the client; the database is used for storing reservation orders and parking space state data; the client stores a parking lot three-dimensional model and a camera used for rendering the parking lot three-dimensional model, and is used for sending a request to the back-end server for parking space state checking, parking space reservation and parking space guidance obtaining; based on the parking lot three-dimensional model, the speed-adjustable trolley is used for representing a real vehicle, the driving process of a user is simulated, parking space guidance is carried out in a three-dimensional visual mode, GPS does not need to be relied on any more, severe factors of an objective environment are eliminated, and the comfort level and convenience of parking experience are improved.

Description

Technical Field

[0001] The present invention belongs to the field of information technology and relates to an underground parking navigation system and method based on Three.js. Background Art

[0002] With the acceleration of urbanization, the urban population and the number of cars are constantly increasing, and parking difficulties are becoming increasingly prominent. Traditional parking guidance methods suffer from inaccurate and untimely information, failing to meet drivers' needs. Intelligent transportation systems are the future trend of transportation development, enabling automated, information-based, digital, and intelligent traffic management. As a key component of intelligent transportation systems, 3D map parking guidance systems have broad application prospects. With the widespread adoption and development of mobile internet technology, people's lifestyles and travel patterns have undergone tremendous changes. Drivers can obtain information such as parking lot location, available spaces, and parking fees through mobile apps, enabling more convenient parking guidance services.

[0003] Current 3D map navigation technology primarily targets open-air traffic route guidance, but lacks specialized navigation guidance for underground parking lots. Because underground parking lots are often located deep within buildings, satellite signals can be blocked and unstable by the structures. Global Positioning System (GPS) positioning accuracy is often affected indoors or underground, resulting in the inability of navigation systems to accurately obtain vehicle location information. This invention primarily addresses this issue, working with drivers to complete the final "mile," helping them quickly and accurately find their parking spaces even in complex underground parking lots. The invention develops a parking guidance system specifically for underground parking lots. Summary of the Invention

[0004] To solve the above-mentioned problems in the prior art, on the one hand, the present invention adopts an underground parking navigation system based on Three.js, comprising:

[0005] Parking lot data collection module, used to collect parking space status data in real time and send the collected data to the back-end server;

[0006] Back-end server, used to manage the database and process requests from the parking lot data collection module and clients;

[0007] Database, used to store reservation orders and parking space status data;

[0008] The client is used to send requests to the backend server to query parking space status, reserve parking spaces, and obtain parking space directions.

[0009] On the other hand, the present invention adopts an underground parking navigation method based on Three.js, and the navigation method is based on the above-mentioned navigation system, and the navigation method includes:

[0010] S1. Start the backend server, the parking lot data collection module collects parking space status data, and sends the collected parking space status data to the backend server; the backend server updates the database according to the collected parking space status data;

[0011] S2. The user enters the client and queries the backend server to see if there are any changes in the database. If so, the status of the parking spaces in the 3D model of the parking lot is dynamically updated according to the database.

[0012] S3. The user clicks on a parking lot in the nearby parking lot information page of the client to enter the parking space guidance interface, and slides the control component of the parking space guidance interface to realize a first-person perspective roaming view of the parking lot;

[0013] S4. The user reserves a parking space by clicking the "Reserve Parking Space" button on the parking space guidance interface, and obtains an order returned by the backend server;

[0014] S5. The user clicks the 2D view button and the parking guidance button on the parking guidance interface and the parking guidance button on the order interface to obtain the 2D top view page of the parking lot, the 3D route guidance animation of the parking guidance, and the 2D route guidance map of the parking guidance, respectively, and finds a parking space by referring to the 2D top view page of the parking lot, the 3D route guidance animation of the parking guidance, and the 2D route guidance map of the parking guidance;

[0015] S6. When the user needs to leave the parking lot, the user clicks the 2D view button and the reverse car search button on the parking space guidance interface and the reverse car search button on the order interface to obtain the parking lot's 2D top view page, the reverse car search 3D route guidance animation, and the reverse car search 2D route guidance map, respectively, and finds the parking space with reference to the parking lot's 2D top view page, the reverse car search 3D route guidance animation, and the reverse car search 2D route guidance map;

[0016] S7. The user clicks the "End Order" button to send an "End Order" request to the backend server, and receives a completed order from the backend server.

[0017] Beneficial effects:

[0018] 1. The present invention designs a joystick component, which uses angle deviation to control the rotation angle of the camera to achieve free roaming and observation, thereby improving user experience and interactivity; 2. The system of the present invention can update the occupancy status of parking spaces in real time according to the actual parking situation. Users can view the real-time status of parking spaces through the system, including idle, occupied and reserved status, which can improve the management efficiency of parking lots and allow users to find vacant parking spaces more conveniently; 3. The present invention uses a speed-adjustable car to represent a real vehicle, simulates the user's driving process, and provides parking space guidance in a three-dimensional visualization manner, providing a new method for parking space navigation in underground parking lots. There is no need to rely on GPS, and it gets rid of the harsh factors of the objective environment, thereby improving the comfort and convenience of the parking experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] Figure 1 A structural diagram of an underground parking navigation system based on Three.js provided in an embodiment of the present invention;

[0020] Figure 2 A flowchart of an underground parking navigation method based on Three.js provided in an embodiment of the present invention;

[0021] Figure 3 A parking space zoning diagram of a three-dimensional model of a parking lot provided by an embodiment of the present invention;

[0022] Figure 4 A road map inside a three-dimensional model of a parking lot provided by an embodiment of the present invention;

[0023] Figure 5 The overall rendering of the three-dimensional model of the parking lot provided by the embodiment of the present invention;

[0024] Figure 6 A data collection flow chart provided for an embodiment of the present invention;

[0025] Figure 7 Schematic diagram of the WeChat mini-program homepage, order interface, and my interface provided by an embodiment of the present invention;

[0026] Figure 8 a is a diagram of a parking space guidance interface provided by an embodiment of the present invention;

[0027] Figure 8 b is a diagram of a parking space guidance interface including a table of parking space status provided in an embodiment of the present invention;

[0028] Figure 8 c is a 2D top view page of a parking lot provided by an embodiment of the present invention;

[0029] Figure 9 This is a flowchart of generating a 3D path guidance animation provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0030] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of the present invention.

[0031] like Figure 1 As shown, on the one hand, the present invention adopts an underground parking navigation system based on Three.js, comprising:

[0032] Parking lot data collection module, used to collect parking space status data in real time and send the collected data to the back-end server;

[0033] Back-end server, used to manage the database and process requests from the parking lot data collection module and clients;

[0034] The database is used to store reservation orders and parking space status data; the database includes: a reservation order table and a parking space status table; the reservation order table includes: owner information, reserved parking space and reservation start time; the parking space status table includes: parking space partition, number, usage status and reservation status.

[0035] The client stores the 3D parking lot model created by Three.js and the camera used to render the 3D scene of the parking lot model. It is used to send requests to the back-end server to query the parking space status, reserve parking spaces, and obtain parking space directions. The back-end server responds and feeds back the results in real time.

[0036] The parking lot data acquisition module includes an ESP32 controller and eight infrared sensors. These are installed at designated locations in the parking lot according to the design. The infrared sensors are used to collect information about the status of the corresponding parking spaces. The ESP32 controller creates eight tasks based on the FreeRTOS operating system, each corresponding to an infrared sensor. Each task processes the parking space status data collected by the corresponding infrared sensor. If a parked car is detected, the space is marked as occupied; otherwise, it is marked as free.

[0037] After collecting the parking space status data, the ESP32 master controller encapsulates the partition, number, usage status, and reservation status data of each parking space into JSON format and sends it to the backend server.

[0038] Specifically, if Figure 6As shown in the figure, the data collection process includes: the ESP32 master connects to WIFI, the ESP32 master initializes the task thread, the infrared sensor detects the parking space status, and determines whether the parking space status has changed. The task thread of the ESP32 master receives the parking space status data of the corresponding sensor respectively, and determines whether the parking space status has changed. If it has changed, the parking space status data is encapsulated into JSON format and sent to the back-end server via WIFI.

[0039] The back-end server includes: a Web server and a Daphne server; routing is configured in the Daphne server to coordinate and manage data communication between the Web server and the client (web page or WeChat applet) in real time; the URL and multiple interface functions are bound to the Web server, each interface function performs a corresponding function, and processes the corresponding requests from the parking lot data collection module and the client.

[0040] The Datas interface function is used to receive parking space status data sent by the ESP32 master controller of the parking lot data acquisition module through a POST request and update the database based on the parking space status data.

[0041] Specifically, after receiving the data, the Datas interface function compares it with the records in the database. If the parking space status has not changed, the database update operation is not performed; if the status has changed, the database record is updated based on the latest data.

[0042] The update_data (data update) interface function is used to process the client's parking space status query request, parking space reservation request and order end request; different operations are performed according to the request type (GET or POST); for parking space status query request (GET request), the parking space status in the database is extracted and returned to the client; for parking space reservation request and order end request (POST request), it is determined whether the POST request contains the end time. If not, it is a parking space reservation request; otherwise, it is an order end request; for parking space reservation request, the update_data interface function obtains the reservation information, i.e., the order (owner information, parking space and reservation start time) by parsing the parking space reservation request, stores the order in the reservation information table, updates the corresponding parking space reservation status, and returns the order to the client; for order end request, the update_data interface function obtains the order end time and order fee information by parsing the order end request, stores the order end time and order fee information in the database to complete the corresponding order, and returns the completed order to the client.

[0043] The Parking interface function is used to render the nearby parking lot information page parking.html and return the nearby parking lot information page parking.html to the client; the parking lot information page parking.html displays the parking lot information;

[0044] The Wecha (WeChat) interface function is an interface function designed specifically for WeChat mini-programs. It is used to process WeChat mini-programs' requests for querying available parking spaces and ending orders. For requests for querying available parking spaces (GET requests), the Wecha interface function calculates the number of available parking spaces in the database and returns it to the client, so that the remaining parking spaces can be dynamically displayed on the homepage. For requests to end an order (POST requests), the Wecha interface function parses the order end time and order fee information in the end order request, stores the order end time and order fee information in the corresponding record in the database, thereby completing the user's reservation information (i.e., order), and returns the completed order to the client.

[0045] The look2d (2D view) interface function is used to render the 2D overhead view page look2D.html of the parking lot and return the 2D overhead view page look2D.html of the parking lot to the client, allowing users to intuitively understand the parking lot layout.

[0046] The 2DPath (2D route) API function, serving the WeChat mini-program, handles requests to load 2D route guidance for parking spaces and reverse car search, and returns the corresponding 2D route guidance image to the client. When the user clicks the button to view the image, the function locates the corresponding folder and file on the backend server based on the image type and image number passed by the mini-program. The folder stores the 2D route guidance images for each parking space. If the image is successfully found, the address is returned for the mini-program to load and display; if not, a file not found message is returned.

[0047] like Figure 3 、 Figure 4 、 Figure 5As shown in the figure, the 3D parking lot model was constructed using Blender to simulate a real shopping mall underground parking lot scene. The 3D parking lot model is an integrated entrance and exit model of the underground first floor, including the parking lot exterior, parking lot entrance and exit, parking lot interior, and shopping mall entrance and exit. The parking lot exterior refers to the external environment of the parking lot, mainly including the security booth, speed bumps, vehicle access barriers, and lawn pavement. The parking lot entrance and exit adopts an integrated entrance and exit design and is a sloped structure. The parking lot interior is the design core of the entire model, including parking spaces, vehicle driving routes, signage, and support structures. Parking spaces include location numbers, license plate plaques, and parking barriers. Parking space parameters include size, number, location, and design style. The model contains 36 parking spaces, divided into three sections: A, B, and C. Each section has 16 parking spaces, arranged in two opposite rows of 8 spaces each. Each parking space has a green background with a white border. The shopping mall entrance and exit is an elevator entrance leading from the parking lot to the shopping mall. The core design is the elevator structure, including floor signs, use buttons, floor selection buttons, and elevator doors.

[0048] The client continuously queries the backend server via Ajax to check for changes in database information. If so, Three.js dynamically updates the status of parking spaces in the 3D parking model based on the database. Red edges indicate occupied spaces, yellow edges indicate reserved spaces, and green edges indicate available spaces. Both occupied and reserved spaces indicate unavailable. A car model is placed over the space to indicate that it is occupied, with the license plate number displayed above as an indicator. This dynamically binds the virtual model to the real-world scene data. Three.js is a WebGL-based JavaScript library.

[0049] like Figure 7 As shown, the client interface includes: home page interface, order interface and my interface;

[0050] The home page is used to display the nearby parking lot information page returned by the backend server. The nearby parking lot information page displays the number, total parking spaces, and remaining parking spaces of each parking lot. Click on the parking lot in the nearby parking lot information page, and the client will display the parking space guidance interface. Figure 8 As shown in Figure a, the parking space guidance interface includes a three-dimensional scene of a three-dimensional model of the currently clicked parking lot rendered by the camera, a 2D view button, a parking space reservation button, a parking space guidance button, and a joystick component; the joystick component is used to control the camera to achieve first-person roaming viewing.

[0051] like Figure 8 As shown in c, click the 2D view button on the parking guidance interface, and the client will display the 2D top view page of the parking lot returned by the backend server;

[0052] like Figure 8 As shown in Figure 2, when the parking space reservation button is clicked on the parking space guidance interface, the client sends a request to the backend server to query the parking space status of the current parking lot and displays the returned parking space status form. When a parking space is clicked on the parking space status form, the client sends a request to the backend server to reserve a parking space and receives an order from the backend server.

[0053] Click the reverse car search button on the parking guidance interface, and the client will generate and display a 3D route guidance animation for reverse car search;

[0054] Click the parking guidance button on the parking guidance interface, and the client will generate and display a 3D route guidance animation for the parking guidance.

[0055] The order interface displays the orders returned by the backend server; each order includes order information, parking space guidance button, reverse car search button, and end order button;

[0056] Click the parking guidance button in the order, the client will send a loading request for the 2D route guidance of the parking guidance to the backend server, and display the 2D route guidance map of the parking guidance returned by the backend server;

[0057] Click the reverse car search button in the order, the client will send a load request for the reverse car search 2D route guidance to the backend server, and display the reverse car search 2D route guidance map returned by the backend server;

[0058] When you click the End Order button, the client will send an end order request to the backend server and receive the fee returned by the backend server.

[0059] My interface displays basic information of the user.

[0060] The joystick components include: a joystick and a limit container, which limits the sliding distance of the joystick. Since the joystick is dragged on the screen, it is a two-dimensional joystick. However, the camera it controls for rendering the three-dimensional map of the parking lot model moves on a three-dimensional plane, and the local coordinate systems of the two are different. Therefore, the angle offset is calculated here to determine the camera direction offset.

[0061] On the other hand, Figure 2 As shown, based on the above system, the present invention adopts an underground parking navigation method based on Three.js, including:

[0062] S1. Start the backend server, the parking lot data collection module collects parking space status data, and sends the collected parking space status data to the backend server; the backend server updates the database according to the collected parking space status data;

[0063] S2. The user enters the client and queries the backend server to see if there are any changes in the database. If so, the status of the parking spaces in the 3D model of the parking lot is dynamically updated according to the database.

[0064] S3. The user clicks on a parking lot in the nearby parking lot information page of the client to enter the parking space guidance interface, and slides the control component of the parking space guidance interface to realize a first-person perspective roaming view of the parking lot;

[0065] S4. The user reserves a parking space by clicking the "Reserve Parking Space" button on the parking space guidance interface, and obtains an order returned by the backend server;

[0066] S5. The user clicks the 2D view button and the parking guidance button on the parking guidance interface and the parking guidance button on the order interface to obtain a 2D top view page of the parking lot, a 3D route guidance animation of the parking guidance, and a 2D route guidance map of the parking guidance, and finds a parking space by referring to the 2D top view page of the parking lot, the 3D route guidance animation of the parking guidance, and the 2D route guidance map of the parking guidance;

[0067] S6. When the user needs to leave the parking lot, the user clicks the 2D view button and the reverse car search button on the parking space guidance interface and the reverse car search button on the order interface to obtain the 2D top view page of the parking lot, the 3D route guidance animation for reverse car search, and the 2D route guidance map for reverse car search; and finds the parking space with reference to the 2D top view page of the parking lot, the 3D route guidance animation for reverse car search, and the 2D route guidance map for reverse car search;

[0068] S7. The user clicks the "End Order" button to send an "End Order" request to the backend server, and receives a completed order from the backend server.

[0069] The joystick component includes: a joystick and a limit container, wherein the limit container limits the sliding distance of the joystick; the control component of the sliding parking guidance interface realizes the first-person perspective roaming view and includes:

[0070] Step 1: The client obtains the last offset angle θ of the joystick prev ,When the user slides the joystick, the client calculates the current offset angle of the joystick, ,subtracts the previous offset angle of the joystick from the current offset angle, and ,gets the actual offset angle of the camera rotation;

[0071] Assume that the sliding displacement of the joystick on the two-dimensional screen plane is d = (d x ,d y );

[0072] The current offset angle θ of the joystick current (relative to the screen x-axis): θ current =arctan2(d y ,dx );

[0073] The actual rotation offset angle Δθ of the camera (angle increment):

[0074] Δθ=θ current -θ prev

[0075] Step 2: The client changes the camera's orientation according to the actual rotation offset angle of the camera, and obtains the camera's changed orientation vector;

[0076] If the camera rotates around the y-axis of the world coordinate system, the rotation axis is u=(0,1,0), the rotation angle is Δθ, and the quaternion q rotate The update formula is:

[0077]

[0078] q rotate When applied to the camera, the camera's orientation is changed, and the camera's orientation vector is obtained.

[0079] Step 3: The client normalizes the changed camera orientation vector and scales the normalized orientation vector according to the sliding displacement of the joystick to obtain the camera movement increment Δx.

[0080] Scaling the normalized heading vector based on the joystick's sliding displacement includes:

[0081] Get the maximum sliding distance (radius) of the joystick as R max , calculate the sliding displacement d and maximum sliding distance R of the joystick max The quotient of is used to get the camera movement speed proportional coefficient;

[0082] Set the base camera movement speed. Multiply the base camera movement speed, the camera movement speed scale factor, and the normalized heading vector to get the camera movement increment.

[0083] The camera movement increment formula is as follows:

[0084] Δx=d n ·v pre ·k s

[0085]

[0086] Among them, d n is the normalized heading vector, v pre The basic moving speed of the custom camera (set to 0.3m / s), k s It is the camera movement speed proportional coefficient (between 0 and 1).

[0087] Step 4: The client obtains the world coordinates of the camera and moves the camera along the changed direction according to the world coordinates and the movement increment.

[0088] This is just one step, because when the user continues to slide without letting go, it is necessary to continuously render and update the screen and repeatedly enter the function that handles sliding.

[0089] Step 5: When the user releases the joystick, the client returns the joystick to its original (default) position and stores the current offset angle.

[0090] Route guidance provides directions from the entrance to a designated parking space. A car model is dynamically created at the parking lot entrance, and it follows the designated route to the selected parking space. Reverse car search provides guidance from the elevator exit to the parking space. This is the system's route navigation design. Since GPS positioning is not accessible underground, it uses 3D animation. During the car's movement, a speed slider appears, allowing drivers to adjust the car's speed to more closely match the actual speed of the vehicle, achieving the desired parking space guidance function.

[0091] like Figure 9 As shown, obtaining a 3D route guidance animation includes:

[0092] Step 1: Build a waypoint list based on the 3D model of the parking lot. The waypoint list contains the coordinates of each waypoint from the starting point to the end point. Set a distance threshold and create a car at the first waypoint in the waypoint list.

[0093] If you need to generate a 3D route guidance animation for parking space guidance, build a path point list based on the 3D model of the parking lot. The path point list contains the coordinates of each path point from the parking lot entrance and exit to the designated parking space. If you need to generate a 3D route guidance animation for reverse car search, build a path point list based on the 3D model of the parking lot. The path point list contains the coordinates of each path point from the mall entrance and exit to the designated parking space.

[0094] Step 2: Calculate the difference between the next path point in the path point list and the path point where the current car is located, and obtain the direction vector from the current path point to the next path point;

[0095] Step 3: Change the direction of the car according to the direction vector, calculate the distance from the current car to the next path point, set the speed according to the distance, scale the direction vector according to the speed, and get the increment Δv of the car's forward movement;

[0096] Setting the vehicle speed based on distance includes: the longer the distance, the faster the speed, and the closer the distance, the slower the speed. The actual speed also needs to be multiplied by the value on the speed adjustment slide track. This slide track is for users to adjust the speed and has a limited range.

[0097] Scaling the direction vector according to vehicle speed involves:

[0098] Δv=d norm ·(v base ×k slider )

[0099] Among them, d nrom is the normalized direction vector, v base is the custom base speed (0.5m / s), k slider The user speed control coefficient is within the specified range (between 0 and 2, with an accuracy of 0.1), and is obtained through testing.

[0100] Step 4: Move the camera to the position where it overlaps with the car, and point the camera toward the car. Move the car and camera synchronously according to the forward increment.

[0101] Since the rendering camera must always follow the car when it moves, it is necessary to set the camera's dynamic follow. The method used here is to obtain the car's coordinate point information in the world coordinate system before the car moves, move the camera to that position to coincide with the car, and then move it from this position so that the camera is always directly behind and above the car. In fact, what this means is that the position of the camera is always based on the local coordinate system of the car and has nothing to do with the world coordinate system. Its position relative to the car remains unchanged, and its direction points to the car. In this way, no matter how the car moves, the camera is always directly behind and above it, so you can see the entire trajectory of the car's movement. After that, you can add increments to the car's coordinates to move it, and the camera will automatically follow and adjust its position.

[0102] Step 5: When the distance between the car and the next path point is less than the distance threshold, it means that the car has arrived at the next path point. Determine whether the path point reached by the car at this time is the last path point in the path point list. If so, obtain the 3D path guidance animation captured by the camera; otherwise, return to step 2.

[0103] If the waypoint the car reaches is the last waypoint in the waypoint list, the car will stop and the camera will adjust its direction and position, no longer pointing to the car, but clearly showing the location.

[0104] When you click on the guide again, the previous car will be cleared first, and then dynamically created again, and mobile navigation will be performed according to the above process.

[0105] The above embodiments further illustrate the purpose, technical solutions and advantages of the present invention in detail. It should be understood that the above embodiments are only preferred implementation plans of the present invention and are not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made to the present invention within the spirit and principles of the present invention should be included in the scope of protection of the present invention.

Claims

1. An underground parking navigation system based on Three.js, characterized in that: include: Parking lot data collection module, used to collect parking space status data in real time and send the collected data to the back-end server; Back-end server, used to manage the database and process requests from the parking lot data collection module and clients; Database, used to store reservation orders and parking space status data; The client is used to send requests to the backend server to query parking space status, reserve parking spaces, and obtain parking space directions.

2. The underground parking navigation system based on Three.js according to claim 1, characterized in that: The parking lot data acquisition module includes a main control unit and an infrared sensor. The main control unit and infrared sensor are installed at designated locations in the parking lot. The infrared sensor is used to collect the status of parking spaces. The main control unit creates multiple tasks, which correspond one to one with infrared sensors. Each task processes the parking space status collected by the corresponding infrared sensor.

3. The underground parking navigation system based on Three.js according to claim 1, characterized in that: The back-end server includes: a Web server and a Daphne server; the Daphne server is used to realize data communication between the Web server and the client; the Web server includes multiple interface functions, each of which is used to process the corresponding requests of the parking lot data collection module and the client.

4. The underground parking navigation system based on Three.js according to claim 3 is characterized in that: The web server interface functions include: The Datas interface function is used to receive the parking space status data sent by the parking lot data acquisition module and update the database according to the parking space status data; The update_data interface function is used to process the client's parking space status query request, parking space reservation request, and order termination request. For parking space status query request, the update_data interface function extracts the parking space status from the database and returns it to the client. For parking space reservation request, the update_data interface function generates an order by parsing the parking space reservation request, stores the order in the database, updates the reservation status of the corresponding parking space in the database, and returns the order to the client. For order termination request, the update_data interface function obtains the order end time and order fee information by parsing the order termination request, stores the order end time and order fee information in the database, completes the corresponding order, and returns the completed order to the client. Parking interface function, used to render the nearby parking lot information page and return the nearby parking lot information page to the client; The look2d interface function is used to render a 2D top-down view of the parking lot and return the 2D top-down view of the parking lot to the client. The 2DPath interface function is used to process loading requests for 2D route guidance for parking guidance and reverse vehicle search, and return the corresponding 2D route guidance map to the client.

5. The underground parking navigation system based on Three.js according to claim 3 is characterized in that: The client stores a 3D model of a parking lot and a camera for rendering a 3D scene of the 3D model of the parking lot; the client interface includes a home page interface, which is used to display a page of information about nearby parking lots returned by the backend server; Click on the parking lot in the nearby parking lot information page, and the client will enter the parking space guidance interface of the currently clicked parking lot; The parking guidance interface includes a 3D scene of the 3D model of the currently clicked parking lot rendered by the camera, a parking space reservation button, a parking space guidance button, and a joystick component; the joystick component is used to control the camera to achieve first-person perspective roaming viewing; When you click the "Book a parking space" button, the client sends a request to the backend server to query the parking space status of the current parking lot and displays the parking space status form returned by the backend server. When you click a parking space in the parking space status form, the client sends a request to the backend server to reserve a parking space and receives an order from the backend server. Click the reverse car search button, and the client will generate and display a 3D route guidance animation for reverse car search; Click the parking guidance button, and the client will generate and display a 3D route guidance animation for the parking guidance.

6. The underground parking navigation system based on Three.js according to claim 5, characterized in that: The client also includes an order interface; the order interface is used to display the orders returned by the backend server; each order includes order information, a parking space guidance button, a reverse car search button, and an end order button; Click the parking guidance button in the order, the client will send a loading request for the 2D route guidance of the parking guidance to the backend server, and display the 2D route guidance map of the parking guidance returned by the backend server; Click the reverse car search button in the order, the client will send a load request for the reverse car search 2D route guidance to the backend server, and display the reverse car search 2D route guidance map returned by the backend server; When you click the "End Order" button, the client will send an "End Order" request to the backend server and receive the completed order back from the backend server.

7. The underground parking navigation system based on Three.js according to claim 5, characterized in that: The 3D model of the parking lot includes: parking lot exterior, parking lot entrance, parking lot interior and shopping mall entrance.

8. An underground parking navigation method based on Three.js, the navigation method being based on the navigation system according to any one of claims 1 to 7, characterized in that: Navigation methods include: S1. Start the backend server, the parking lot data collection module collects parking space status data, and sends the collected parking space status data to the backend server; the backend server updates the database according to the collected parking space status data; S2. The user enters the client and queries the backend server to see if there are any changes in the database. If so, the status of the parking spaces in the 3D model of the parking lot is dynamically updated according to the database. S3. The user clicks on a parking lot in the nearby parking lot information page of the client to enter the parking space guidance interface, and slides the control component of the parking space guidance interface to realize a first-person perspective roaming view of the parking lot; S4. The user reserves a parking space by clicking the "Reserve Parking Space" button on the parking space guidance interface, and obtains an order returned by the backend server; S5. The user clicks the 2D view button and the parking guidance button on the parking guidance interface and the parking guidance button on the order interface to obtain the 2D top view page of the parking lot, the 3D route guidance animation of the parking guidance, and the 2D route guidance map of the parking guidance, respectively, and finds a parking space by referring to the 2D top view page of the parking lot, the 3D route guidance animation of the parking guidance, and the 2D route guidance map of the parking guidance; S6. When the user needs to leave the parking lot, the user clicks the 2D view button and the reverse car search button on the parking space guidance interface and the reverse car search button on the order interface to obtain the parking lot's 2D top view page, the reverse car search 3D route guidance animation, and the reverse car search 2D route guidance map, respectively, and finds the parking space with reference to the parking lot's 2D top view page, the reverse car search 3D route guidance animation, and the reverse car search 2D route guidance map; S7. The user clicks the "End Order" button to send an "End Order" request to the backend server, and receives a completed order from the backend server.

9. The underground parking navigation method based on Three.js according to claim 8, characterized in that: The joystick component includes: a joystick and a limit container, wherein the limit container limits the sliding distance of the joystick; the control component of the sliding parking guidance interface realizes the first-person perspective roaming view and includes: The client obtains the joystick's last offset angle. When the user slides the joystick, the client calculates the joystick's current sliding displacement and offset angle, and subtracts the joystick's last offset angle from the current offset angle to obtain the camera's actual rotation offset angle. The client changes the camera's orientation according to the actual rotation offset angle of the camera and obtains the camera's changed orientation vector; Get the maximum sliding distance of the joystick, and calculate the camera movement speed proportional coefficient based on the current sliding displacement of the joystick and the maximum sliding distance; The client normalizes the camera's changed orientation vector, sets the camera's base movement speed, and multiplies the camera's base movement speed, the camera's movement speed scaling factor, and the normalized orientation vector to obtain the camera's movement increment. The client obtains the world coordinates of the camera and moves the camera along the changed direction based on the world coordinates and the movement increment. When the user lets go, the client restores the joystick to its original position and stores the current offset angle.

10. The underground parking navigation method based on Three.js according to claim 8, characterized in that: Get 3D route guidance animation including: Step 1: Build a waypoint list based on the 3D model of the parking lot. The waypoint list contains the coordinates of each waypoint from the starting point to the end point. Set a distance threshold and create a car at the first waypoint in the waypoint list. Step 2: Calculate the difference between the next path point in the path point list and the path point where the current car is located, and obtain the direction vector from the current path point to the next path point; Step 3: Change the direction of the car according to the direction vector, calculate the distance from the current car to the next path point, set the speed according to the distance, and scale the direction vector according to the speed to obtain the increment of the car's forward movement; Step 4: Move the camera to the position where it overlaps with the car, and point the camera toward the car. Move the car and camera synchronously according to the forward increment. Step 5: When the distance between the car and the next path point is less than the distance threshold, it means that the car has arrived at the next path point. Determine whether the path point reached by the car at this time is the last path point in the path point list. If so, obtain the 3D path guidance animation captured by the camera; otherwise, return to step 2.

Images