An underground parking navigation system and method based on Three.js

Abstract

The application belongs to the field of information technology and relates to an underground parking navigation system based on Three.js, which comprises a parking lot data acquisition module, a backend server, a database and a client. The parking lot data acquisition module is used for collecting real-time parking lot space state data and sending the collected data to the backend server. The backend server is used for managing the database and processing requests of the parking lot data acquisition module and the client. The database is used for storing reservation orders and parking lot space state data. The client stores a parking lot three-dimensional model and a camera for rendering the parking lot three-dimensional model, and is used for sending requests to the backend server for parking lot space state viewing, parking lot reservation and parking lot guidance. The application uses a speed-adjustable trolley to represent a real vehicle based on a parking lot three-dimensional model, simulates a user's driving process, and provides parking lot guidance in a three-dimensional visual manner, so that the application does not need to rely on GPS and is free from bad factors of an objective environment, and the parking experience comfort and convenience are improved.

Description

Technical Field

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

[0002] With the acceleration of urbanization, the number of urban populations and cars is constantly increasing, making parking difficulties increasingly prominent. Traditional parking guidance methods suffer from inaccurate and untimely information, failing to meet drivers' needs. Intelligent transportation systems, however, represent the future trend of transportation development, enabling the automation, informatization, digitalization, and intelligentization of traffic management. 3D map parking guidance systems, as an important component of intelligent transportation systems, have broad application prospects. With the popularization and development of mobile internet technology, people's lifestyles and travel methods have undergone tremendous changes. Drivers can obtain information such as parking lot locations, available parking spaces, and pricing standards through mobile apps, achieving more convenient parking guidance services.

[0003] Current 3D map navigation technologies are mostly designed for guiding routes in open-air traffic, lacking specific navigation guidance for underground parking lots. This is because underground parking lots are often located deep within buildings, where satellite signals are often blocked and unstable. The accuracy of the Global Positioning System (GPS) is typically affected indoors or underground, leading to navigation systems being unable to accurately obtain vehicle location information. Therefore, this invention primarily addresses this problem, working with car owners to complete the final "1 kilometer," helping them quickly and accurately find their parking spaces even in complex underground parking lots, and researching a parking guidance system specifically designed for underground parking lots. Summary of the Invention

[0004] To address the aforementioned problems in the prior art, this invention, on one hand, employs an underground parking navigation system based on Three.js, comprising:

[0005] The parking lot data acquisition module is used to collect parking space status data in real time and send the collected data to the backend server.

[0006] The backend server is used to manage the database and handle requests from the parking lot data collection module and clients;

[0007] The database is 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, this invention employs an underground parking navigation method based on Three.js. This navigation method is based on the aforementioned navigation system and includes:

[0010] S1. Start the backend server. The parking lot data acquisition module collects parking space status data and sends the collected parking space status data to the backend server. The backend server updates the database based on the collected parking space status data.

[0011] S2. When a user enters the client, the client queries the backend server to see if the database has changed. If it has changed, the status of the parking spaces in the 3D model of the parking lot is dynamically updated according to the database.

[0012] S3. Users can enter the parking guidance interface by clicking on the parking lot in the nearby parking information page of the client, and slide the joystick component of the parking guidance interface to roam and view the parking lot from a first-person perspective.

[0013] S4. Users reserve parking spaces by clicking the "Reserve Parking Space" button on the parking space guidance interface and receive the order returned by the backend server.

[0014] S5. Users can obtain the 2D top view page of the parking lot, the 3D route guidance animation of the parking space guide, and the 2D route guidance map of the parking space guide by clicking the 2D view button and the parking space guide button on the parking space guide interface and the parking space guide button on the order interface, respectively, and find a parking space by referring to the 2D top view page of the parking lot, the 3D route guidance animation of the parking space guide, and the 2D route guidance map of the parking space guide.

[0015] S6. When a user needs to leave the parking lot, they can obtain the 2D top view page of the parking lot, the 3D route guidance animation of the reverse car search, and the 2D route guidance map of the reverse car search by clicking 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, respectively. They can then find the parking space by referring to the 2D top view page of the parking lot, the 3D route guidance animation of the reverse car search, and the 2D route guidance map of the reverse car search.

[0016] S7. The user sends an order termination request to the backend server by clicking the order termination button and receives the completed order from the backend server.

[0017] Beneficial effects:

[0018] 1. This invention designs a joystick component that uses angular deviation to control the camera's rotation angle, enabling free roaming and observation, thus improving user experience and interactivity. 2. This invention's system can update the occupancy status of parking spaces in real time based on actual parking conditions. Users can view the real-time status of parking spaces through the system, including vacancy, occupancy, and reservation status, improving parking lot management efficiency and making it easier for users to find available parking spaces. 3. This invention uses a speed-adjustable car to represent real vehicles, simulating the user's driving process and providing parking space guidance in a three-dimensional visualization manner. This provides a new method for parking space navigation in underground parking lots, eliminating the need for GPS, overcoming adverse environmental factors, and improving the comfort and convenience of the parking experience. Attached Figure Description

[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 illustrating an underground parking navigation method based on Three.js provided in an embodiment of the present invention;

[0021] Figure 3 This is a parking space zoning diagram of the internal three-dimensional model of a parking lot provided in an embodiment of the present invention;

[0022] Figure 4 This is a three-dimensional model of the parking lot provided in an embodiment of the present invention;

[0023] Figure 5 This is an overall rendering of a 3D parking lot model provided in an embodiment of the present invention.

[0024] Figure 6 A data acquisition flowchart provided for embodiments of the present invention;

[0025] Figure 7 This is a schematic diagram of the WeChat mini program homepage, order interface, and my interface provided in an embodiment of the present invention;

[0026] Figure 8 (a) A diagram of the parking guidance interface provided in an embodiment of the present invention;

[0027] Figure 8 (b) A diagram of a parking space guidance interface with a form showing the parking space status provided in an embodiment of the present invention;

[0028] Figure 8 (c) A 2D top-view page of a parking lot provided in an embodiment of the present invention;

[0029] Figure 9 A flowchart for generating 3D path guidance animations provided in an embodiment of the present invention. Detailed Implementation

[0030] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

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

[0032] The parking lot data acquisition module is used to collect parking space status data in real time and send the collected data to the backend server.

[0033] The backend server is used to manage the database and handle requests from the parking lot data collection module and clients;

[0034] The database stores 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 the car owner information, the reserved parking space, and the reservation start time. The parking space status table includes the parking space's zone, number, usage status, and reservation status.

[0035] The client-side module stores a 3D parking lot model created by Three.js and a camera used to render the 3D scene of the parking lot model. It sends requests to the backend server to query parking space status, reserve parking spaces, and obtain parking space directions. The backend server responds in real time and provides feedback on the results.

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

[0037] After collecting parking space status data, the ESP32 main 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, such as Figure 6As shown, the data acquisition process includes: the ESP32 main controller connects to WIFI, the ESP32 main controller initializes the task thread, the infrared sensor detects the parking space status and determines if the parking space status has changed, the task thread of the ESP32 main controller receives the parking space status data from the corresponding sensor 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 backend server via WIFI.

[0039] The backend servers include a web server and a Daphne server. The Daphne server is configured with routing to coordinate and manage data communication between the web server and the client (web page or WeChat mini program) in real time. The web server is bound to a URL and multiple interface functions. Each interface function performs a corresponding function and handles the 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 main controller of the parking lot data acquisition module via a POST request, and to update the database based on the parking space status data.

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

[0042] The `update_data` interface function handles client requests for parking space status queries, parking space reservations, and order termination. It performs different operations based on the request type (GET or POST). For parking space status queries (GET requests), it retrieves the parking space status from the database and returns it to the client. For parking space reservation requests and order termination requests (POST requests), it checks if the POST request includes an end time; if not, it's a parking space reservation request; otherwise, it's an order termination request. For parking space reservation requests, the `update_data` interface function parses the request to obtain reservation information, i.e., the order (owner information, parking space, and reservation start time), stores the order in the reservation information table, updates the corresponding parking space reservation status, and returns the order to the client. For order termination requests, the `update_data` interface function parses the request to obtain the order end time and order fee information, 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 renders the nearby parking information page (parking.html) and returns it to the client; the parking information page (parking.html) displays parking information.

[0044] The Wecha API functions are designed specifically for WeChat Mini Programs. They are used to handle parking space availability query requests and order completion requests. For parking space availability query requests (GET requests), the Wecha API functions calculate the number of available parking spaces in the database and return it to the client so that the remaining parking space information can be dynamically displayed on the homepage. For order completion requests (POST requests), the Wecha API functions parse the order completion time and order fee information from the order completion request, store the order completion time and order fee information in the corresponding records in the database, thereby completing the user's reservation information (i.e., the order), and return the completed order to the client.

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

[0046] The 2DPath (2D Route) interface function serves the WeChat Mini Program, handling loading requests for 2D route guidance for parking spaces and reverse vehicle location, and returning the corresponding 2D route guidance image to the client. When a user clicks the button to view the image, this function locates the corresponding folder and file on the backend server based on the guidance 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 function returns the address for the Mini Program to load and display; otherwise, it returns a message indicating that the file was not found.

[0047] like Figure 3 , Figure 4 , Figure 5As shown, the 3D model of the parking lot was built using Blender software to simulate a real underground parking lot scene in a shopping mall. The 3D model of the parking lot is an integrated model of an entrance and exit on the first underground level, including the exterior of the parking lot, the entrance and exit of the parking lot, the interior of the parking lot, and the entrance and exit of the shopping mall. The exterior of the parking lot refers to the external environment in which the parking lot is located, mainly including security booths, speed bumps, vehicle passage barriers, and lawn surfaces. The entrance and exit of the parking lot adopts an integrated entrance and exit design and is a ramp structure. The interior of the parking lot is the core of the entire model design, including: parking spaces, vehicle driving routes, signs, and supporting structures. The parking spaces include location numbers, license plate numbers, and parking barriers. The parameters of the parking spaces include: size, quantity, location, and style design. The model contains 36 parking spaces, divided into three sections: A, B, and C. Each section has 16 parking spaces, which are distributed in two opposite rows, with 8 parking spaces in each row. Each parking space has a green background and a white border. The entrance and exit of the shopping mall is an elevator entrance from the parking lot to the shopping mall. The core of the model is the elevator structure design, which includes floor signs, usage buttons, floor selection buttons, elevator doors, etc.

[0048] The client continuously queries the backend server via Ajax to check for changes in database information. If changes occur, the status of parking spaces in the 3D parking lot model is dynamically updated based on the database using Three.js. A red border indicates a occupied parking space, a yellow border indicates a reserved parking space, and green indicates a available parking space. Both occupied and reserved statuses indicate that the parking space is unavailable, and a car model is placed on the corresponding space to indicate it is occupied, displaying the car's license plate number above it as an identifier. This achieves dynamic binding between the virtual model and real-world scene data. Three.js is a JavaScript library based on WebGL.

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

[0050] The homepage displays information about nearby parking lots returned by the backend server. This page shows the parking lot number, total number of parking spaces, and remaining spaces for each lot. Clicking on a parking lot on the nearby parking lot information page will display a parking guidance interface on the client side. Figure 8 As shown in (a), the parking guidance interface includes a 3D scene of the 3D model of the currently clicked parking lot rendered by the camera, a 2D view button, a reserved parking space button, a parking guidance button, a reverse car search button, and a joystick component; the joystick component is used to control the camera to achieve first-person perspective roaming and viewing.

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

[0052] like Figure 8 As shown in (b), when the client clicks the "Reserve Parking Space" button on the parking space guidance interface, the client will send a request to the backend server to query the current parking space status and display the returned parking space status form; when the client clicks on a parking space in the parking space status form, the client will send a request to the backend server to reserve the parking space and receive the order returned by the backend server.

[0053] Clicking the reverse car search button on the parking guidance interface will generate and display a 3D route guidance animation for reverse car search in the client.

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

[0055] The order interface displays the orders returned by the backend server; each order includes order information, a parking space guidance button, a reverse parking search button, and a "Complete Order" button.

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

[0057] Clicking the reverse vehicle search button in the order will send a loading request for the 2D route guidance of the reverse vehicle search to the backend server, and display the 2D route guidance map of the reverse vehicle search returned by the backend server.

[0058] When the client clicks the "End Order" button, it sends an order termination request to the backend server and receives the fee returned by the backend server.

[0059] My interface displays the user's basic information.

[0060] The joystick component includes a joystick and a limiting 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, which is used to render a three-dimensional map of the parking lot, moves on a three-dimensional plane, and the local coordinate systems of the two are not the same. Therefore, the camera orientation offset is determined by calculating the angle offset.

[0061] On the other hand, such as Figure 2 As shown, based on the above system, this invention employs an underground parking navigation method based on Three.js, comprising:

[0062] S1. Start the backend server. The parking lot data acquisition module collects parking space status data and sends the collected parking space status data to the backend server. The backend server updates the database based on the collected parking space status data.

[0063] S2. When a user enters the client, the client queries the backend server to see if the database has changed. If it has changed, the status of the parking spaces in the 3D model of the parking lot is dynamically updated according to the database.

[0064] S3. Users can enter the parking guidance interface by clicking on the parking lot in the nearby parking information page of the client, and slide the joystick component of the parking guidance interface to roam and view the parking lot from a first-person perspective.

[0065] S4. Users reserve parking spaces by clicking the "Reserve Parking Space" button on the parking space guidance interface and receive the order returned by the backend server.

[0066] S5. Users can obtain a 2D top view of the parking lot, a 3D route guidance animation of the parking lot, and a 2D route guidance map of the parking lot by clicking the 2D view button and the parking guidance button on the parking guidance interface and the parking guidance button on the order interface. They can then find a parking space by referring to the 2D top view of the parking lot, the 3D route guidance animation of the parking lot, and the 2D route guidance map of the parking lot.

[0067] S6. When a user needs to leave the parking lot, they can obtain a 2D top-down view of the parking lot, a 3D route guidance animation for reverse car search, and a 2D route guidance map for reverse car search by clicking 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; and find the parking space by referring to the 2D top-down view 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 sends an order termination request to the backend server by clicking the order termination button and receives the completed order from the backend server.

[0069] The joystick component includes: a joystick and a limiting container, the limiting container restricting the joystick's sliding distance; the joystick component of the sliding parking guidance interface enables first-person perspective roaming viewing, including:

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

[0071] Let the sliding displacement of the joystick on the two-dimensional screen plane be... ;

[0072] Current offset angle of the joystick (Relative to the screen x-axis): ;

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

[0074]

[0075] Step 2: The client changes the camera's orientation based on the actual offset angle of the camera's rotation to obtain the camera's changed orientation vector;

[0076] If the camera rotates around the y-axis of the world coordinate system, the axis of rotation is... The rotation angle is Quaternions The updated formula is:

[0077]

[0078] Will When applied to a camera, this changes the camera's orientation, resulting in the camera's orientation vector.

[0079] Step 3: The client normalizes the camera's changed orientation vector, and scales the normalized orientation vector according to the joystick's sliding displacement to obtain the camera's movement increment. ;

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

[0081] To obtain the maximum limited sliding distance (radius) of the joystick, Calculate the sliding displacement d and maximum sliding distance of the joystick. The ratio of the camera's moving speed is obtained from the quotient.

[0082] Set the camera's base movement speed, and multiply the camera's base movement speed, camera movement speed scaling factor, and normalized orientation vector to obtain the camera's movement increment.

[0083] The formula for the camera's motion increment is as follows:

[0084]

[0085]

[0086] in, This is the normalized orientation vector. Customize the camera's base movement speed (set to 0.3m / s). This is the camera movement speed scaling factor (between 0 and 1).

[0087] Step 4: The client obtains the world coordinates of the camera and moves the camera along the changed orientation based on the camera's world coordinates and the movement increment;

[0088] This is just one step, because as the user continues to swipe without letting go, the screen needs to be continuously rendered and updated, repeatedly entering this function that handles swiping.

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

[0090] The route guidance system provides directions from the entrance to the designated parking space. A small car model is dynamically created at the parking lot entrance and follows the designated route to the selected parking space. The reverse car navigation system provides directions from the elevator exit to the parking space. This is part of the system's route navigation design. Since GPS positioning is ineffective underground, 3D animation is used. During the car's movement, a speed-adjustable sliding strip appears, allowing drivers to adjust the car's speed to better match real-world vehicle speeds, thus achieving the parking space guidance function.

[0091] like Figure 9 As shown, obtaining the 3D route guidance animation for reverse car finding or parking space guidance includes:

[0092] Step 1: Construct 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 starting point to the ending point. Set a distance threshold and create a car at the first path point in the path point list.

[0093] If a 3D route guidance animation for parking space guidance is required, a list of path points is constructed based on the 3D model of the parking lot. The list of path points contains the coordinates of each path point from the parking lot entrance / exit to the specified parking space. If a 3D route guidance animation for reverse vehicle search is required, a list of path points is constructed based on the 3D model of the parking lot. The list of path points contains the coordinates of each path point from the shopping mall entrance / exit to the specified 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, to obtain the direction vector from the current path point to the next path point;

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

[0096] The vehicle speed is set according to distance: the farther 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 slider, which is used by the user to adjust the speed and has a limited range.

[0097] Scaling the direction vector based on vehicle speed includes:

[0098]

[0099] in, The normalized direction vector, The base speed is set to a custom value (0.5 m / s). The user speed regulation coefficient (between 0 and 2, with an accuracy of 0.1) within the specified range was obtained through testing.

[0100] Step 4: Move the camera to the position of the car so that it overlaps with the car, and point the camera at the car. Move the car and the camera synchronously according to the increment of forward movement.

[0101] Since the rendering camera needs to constantly follow the moving car, dynamic camera tracking is required. The method used here is to obtain the car's coordinates in the world coordinate system before the car moves, move the camera to that position to align with the car, and then move the camera from that position to ensure it is always directly behind and above the car. Essentially, the camera's position is always based on the car's local coordinate system, independent of the world coordinate system. Its position relative to the car remains constant, and its orientation is always towards the car. This way, no matter how the car moves, the camera is always directly behind and above it, allowing you to see the entire trajectory of the car's movement. Then, you can increment the car's coordinates to represent movement, and the camera will automatically adjust its position accordingly.

[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 reached 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 car arrives at the last waypoint in the waypoint list, the car will stop, and the camera will adjust its orientation and position so that it no longer points at the car but clearly displays the location.

[0104] When you click the guide again, the previous car will be cleared and dynamically recreated, and the navigation will proceed according to the process described above.

[0105] The above-described embodiments further illustrate the purpose, technical solution, and advantages of the present invention. It should be understood that the above-described embodiments are merely preferred embodiments 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 within the protection scope of the present invention.

Claims

1. An underground parking navigation system based on Three.js, characterized in that, include: The parking lot data acquisition module is used to collect parking space status data in real time and send the collected data to the backend server. The backend server is used to manage the database and handle requests from the parking lot data collection module and clients; The database is 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. The client stores a 3D model of the parking lot and a camera used to render the 3D scene of the parking lot model; the client interface includes a home page, which displays the nearby parking lot information page returned by the backend server. Clicking on a parking lot in the nearby parking lot information page will take the client to the parking space guidance interface of the currently clicked parking lot. The parking space guidance interface includes a 3D scene of the 3D model of the currently clicked parking lot rendered by the camera, a reserve parking space button, a parking space guidance button, a reverse car search button, and a joystick component. The joystick component is used to control the camera to achieve first-person perspective roaming and viewing. Clicking the "Reserve Parking Space" button will send a query request to the backend server to check the current parking space status and display a form showing the parking space status returned by the backend server. Clicking on a parking space in the form will send a request to the backend server to reserve the parking space and receive an order from the backend server. Clicking the reverse vehicle search button will generate and display a 3D route guidance animation for reverse vehicle search in the client. Clicking the parking guidance button will generate and display a 3D route guidance animation for parking spaces in the client application. The 3D route guidance animation for reverse car finding or parking space guidance includes: Step 1: Construct 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 starting point to the ending point. Set a distance threshold and create a car at the first path point in the path point 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, to obtain the direction vector from the current path point to the next path point; Step 3: Change the car's orientation according to the direction vector, calculate the distance from the current car to the next path point, set the car speed according to the distance, and scale the direction vector according to the car speed to obtain the increment of the car's forward movement. Step 4: Move the camera to the position of the car so that it overlaps with the car, and point the camera at the car. Move the car and the camera synchronously according to the increment of forward movement. 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 reached 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. The joystick component includes: a joystick and a limiting container, the limiting container restricting the joystick's sliding distance; the joystick component of the sliding parking guidance interface enables first-person perspective roaming viewing, including: The client obtains the previous offset angle of the joystick. When the user slides the joystick, the client calculates the current sliding displacement and offset angle of the joystick, subtracts the previous offset angle from the current offset angle, and obtains the actual offset angle of the camera rotation. The client changes the camera's orientation based on the actual offset angle of the camera's rotation, thus obtaining the camera's changed orientation vector; Obtain the maximum sliding distance of the joystick, and calculate the camera movement speed scaling factor based on the current sliding displacement and the maximum sliding distance of the joystick; The client normalizes the camera's changed orientation vector, sets the camera's base movement speed, and multiplies the base movement speed, the camera 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 orientation based on the camera's world coordinates and the movement increment. When the user releases the joystick, the client returns it to its original position and stores the current offset angle.

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 controller and infrared sensors. The main controller and infrared sensors are installed in designated locations in the parking lot. The infrared sensors are used to collect the status of parking spaces. The main controller creates multiple tasks, each corresponding to an infrared sensor. 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 backend servers include a web server and a Daphne server. The Daphne server is used to implement data communication between the web server and the client. The web server includes multiple interface functions, each of which is used to handle requests from the parking lot data collection module and the corresponding client.

4. The underground parking navigation system based on Three.js according to claim 3, characterized in that, The web server's interface functions include: The Datas interface function is used to receive parking space status data sent by the parking lot data acquisition module and update the database based on the parking space status data. The `update_data` interface function handles client requests for parking space status queries, parking space reservations, and order termination. For a parking space status query, the `update_data` function retrieves the parking space status from the database and returns it to the client. For a parking space reservation, the `update_data` function parses the reservation request, generates an order, 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 an order termination request, the `update_data` function parses the order termination request to obtain the order termination time and order cost information, stores the order termination time and order cost information in the database to complete the corresponding order, and returns the completed order to the client. The Parking interface function is used to render the nearby parking information page and return the nearby parking 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 handle loading requests for 2D route guidance for parking space guidance and reverse vehicle search, and returns the corresponding 2D route guidance map to the client.

5. The underground parking navigation system based on Three.js according to claim 1, 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 parking search button, and an order completion button; When the parking guidance button in the order is clicked, the client will send a loading request for the 2D route guidance of the parking space to the backend server and display the 2D route guidance map of the parking space returned by the backend server. Clicking the reverse vehicle search button in the order will send a loading request for the 2D route guidance of the reverse vehicle search to the backend server, and display the 2D route guidance map of the reverse vehicle search returned by the backend server. When the client clicks the "End Order" button, it sends an "End Order" request to the backend server and receives the completed order from the backend server.

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

7. A navigation method for underground parking based on Three.js, wherein the navigation method is based on the navigation system described in any one of claims 1 to 6, characterized in that, Navigation methods include: S1. Start the backend server. The parking lot data acquisition module collects parking space status data and sends the collected parking space status data to the backend server. The backend server updates the database based on the collected parking space status data. S2. When a user enters the client, the client queries the backend server to see if the database has changed. If it has changed, the status of the parking spaces in the 3D model of the parking lot is dynamically updated according to the database. S3. Users can enter the parking guidance interface by clicking on the parking lot in the nearby parking information page of the client, and slide the joystick component of the parking guidance interface to roam and view the parking lot from a first-person perspective. S4. Users reserve parking spaces by clicking the "Reserve Parking Space" button on the parking space guidance interface and receive the order returned by the backend server. S5. Users can obtain the 2D top view page of the parking lot, the 3D route guidance animation of the parking space guide, and the 2D route guidance map of the parking space guide by clicking the 2D view button and the parking space guide button on the parking space guide interface and the parking space guide button on the order interface, respectively, and find a parking space by referring to the 2D top view page of the parking lot, the 3D route guidance animation of the parking space guide, and the 2D route guidance map of the parking space guide. S6. When a user needs to leave the parking lot, they can obtain the 2D top view page of the parking lot, the 3D route guidance animation of the reverse car search, and the 2D route guidance map of the reverse car search by clicking 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, respectively. They can then find the parking space by referring to the 2D top view page of the parking lot, the 3D route guidance animation of the reverse car search, and the 2D route guidance map of the reverse car search. S7. The user sends an order termination request to the backend server by clicking the order termination button and receives the completed order from the backend server.

Images