Three.js-based 3D model embedding visualization system and method thereof

Abstract

The application discloses a Three.js-based 3D model embedding visualization system and method, and the method comprises the following steps: loading a pre-established building model on a server into Three.js, and recursively modifying material properties of each node of the building model; simultaneously, using a Web Serial to perform real-time communication with a terminal serial port, and obtaining positioning coordinate information in real time; filtering and checking the positioning coordinate information by using a sliding window data processing algorithm, obtaining legal data, and performing interpolation on the legal data by using a model trajectory supplementary coordination algorithm; rendering in Three.js in units of frames; and displaying results in a display module according to the building model and the processed positioning coordinate information on a client side; the application solves the defects that buildings in the same kind of applications are all combined by simple geometric bodies, and doors and windows cannot be labeled; meanwhile, the application has the remarkable advantages of light weight, accurate positioning, high transmission rate and high reliability.

Description

Technical Field

[0001] This invention belongs to the technical field of Internet, and relates to the application of GlftLoader in Three.js and its traverse model node traversal method, the method of reading and processing terminal serial port data using Web Serial, and especially to a 3D model embedding visualization system and method based on Three.js. Background Technology

[0002] With the continuous development of the economy, society and technology, people's lives have become more convenient. One of the manifestations of this is the emergence of various positioning technologies. Major map software such as Baidu Maps and Google Maps provide people with convenient positioning and navigation functions and visualize them on the map, which greatly helps people's travel.

[0003] However, existing technologies cannot accurately pinpoint people's exact locations within buildings. In emergency scenarios such as fire scenes, the assistance provided by existing solutions is extremely limited due to the lack of building interior models and clear, aesthetically pleasing 3D location data visualization technology.

[0004] In summary, there is an urgent need for a technology that can embed 3D models that dynamically display location data into a visualization platform. Summary of the Invention

[0005] The purpose of this invention is to address the shortcomings of existing technologies and propose a 3D model embedding visualization system and method based on Three.js.

[0006] To achieve the above objectives, the present invention is implemented through the following technical solution:

[0007] In a first aspect, the present invention provides a 3D model embedding visualization system based on Three.js, the system comprising: a data acquisition module, a data processing module, a model acquisition module, a server, a client, and a display module;

[0008] The data acquisition module is used to acquire and decode the positioning coordinates of external facilities;

[0009] The data processing module is used to perform sliding window data processing algorithm, model trajectory supplementation and coordination algorithm, and buffer read and write processing on the positioning coordinate information obtained from the data acquisition module;

[0010] The model acquisition module obtains the corresponding building model from the server based on the address information input by the user;

[0011] The server is used to store building models and communicate with client browsers;

[0012] The client completes the visualization of positioning data embedded in the 3D model based on the acquired building model and the processed positioning coordinate information from the data processing module; the data acquisition module, data processing module, and display module are all completed in the client.

[0013] The display module is used to render the visualization results of the positioning data embedded in the 3D model in real time.

[0014] Preferably, the external facilities include N positioning base stations and M positioning tags, where N≥1 and M≥3; the external facilities are connected to the terminal serial port, and the client communicates with the terminal serial port.

[0015] Preferably, the data acquisition module includes a CH340 to TTL module and a pre-packaged Web Serial component.

[0016] Secondly, the present invention provides a method for embedding and visualizing 3D models based on Three.js, the method comprising the following steps:

[0017] Step S1: The user enters the address information, and the server retrieves the path of the corresponding building model from the database via an HTTP request, and the browser is called to download the building model;

[0018] Step S2: Load the building model downloaded in Step S1 into Three.js in the client using GltfLoader;

[0019] Step S3: Use the traverse function to recursively modify the material properties of each node of the building model imported in step S2;

[0020] Step S4: Use the Web Serial function in the data acquisition module to open the serial port in the browser, obtain the positioning coordinate information transmitted by the external facility, decode it, and continuously receive positioning coordinate information in a loop to update the positioning coordinate information.

[0021] Step S5: The data acquisition module uses a sliding window data processing algorithm to filter and check the received positioning coordinate information, eliminating invalid data in the positioning coordinate information and obtaining valid data;

[0022] Step S6: The model trajectory supplementation and coordination algorithm is used to interpolate the legal data obtained after processing in step S5, so that the trajectory output is smoother and rendered in Three.js in units of frames;

[0023] Step S7: The client communicates with the server and terminal via serial port. Based on the obtained building model and the processed positioning coordinate information in the data processing module, the client displays the results in the display module, thus completing the visualization of the positioning data embedded in the 3D model.

[0024] Preferably, the user-input address information mentioned in step S1 is used to obtain the path of the corresponding building model from the database via an HTTP request to the server, and then the browser is invoked to download the building model. The specific steps are as follows:

[0025] Step S1-1: Use the address information entered by the user as a parameter and send a GET request to the specified URL using Axios;

[0026] Step S1-2: Receive the path of the corresponding building model stored in the database returned by the server;

[0027] Step S1-3: Based on the obtained building model path, send another GET request with responseType blob via Axios to create a Blob object;

[0028] Steps S1-4: Use window.URL.createObjectURL to create a URL and point it to the Blob object. At the same time, create an a element that points to the target download link and call the browser to download the building model.

[0029] Preferably, step S3 involves recursively modifying the material properties of each node of the building model imported in step S2 using the traverse function. The specific steps are as follows:

[0030] Step S3-1: Call the traverse function of gltf.scene, which is a callback function that takes each building model node as a parameter;

[0031] Step S3-2: Determine if obj.isMesh is true, that is, whether the model node obj is a mesh model. If it is, continue to the next step; otherwise, determine the next model node.

[0032] Step S3-3: Perform frustum culling on the building model to quickly remove invisible objects before rendering;

[0033] Step S3-4: Apply shading to the building models from step S3-2 to make the spatial relationships between the building models clearer;

[0034] Step S3-5: Perform self-illumination processing on step S3-3 so that the building model itself can directly emit color.

[0035] Preferably, in step S4, the Web Serial port in the data acquisition module is opened in the browser to obtain the positioning coordinate information transmitted by the external facility, and the information is decoded. Simultaneously, the positioning coordinate information is continuously received and updated. The specific steps are as follows:

[0036] Step S4-1: Call the requestPort method on the window.navigator object, prompt the user to select the paired serial port and open the serial port using the open function;

[0037] Step S4-2: Create a TextDecoderStream object and re-import the positioning coordinate information into this object through the pipe.

[0038] Step S4-3: Obtain the reader of the decoder created above, and continuously use await reader.read to read the positioning coordinate information and put it into the buffer in the while true async loop;

[0039] Step S4-4: Divide the buffer data according to the pre-agreed delimiter, and perform filtering and interpolation on the obtained data.

[0040] Preferably, in step S5, the data acquisition module uses a sliding window data processing algorithm to filter and check the received positioning coordinate information, eliminating invalid data in the positioning coordinate information to obtain valid data. The specific steps are as follows:

[0041] Step S5-1: Perform mean filtering on every 5 groups of received positioning coordinate information data to obtain the average value data group;

[0042] Step S5-2: Set a deviation threshold. If the difference between the positioning coordinates obtained in this calculation and the average Euclidean distance of the previous N consecutive coordinates exceeds the deviation threshold (N≥3), it will be judged as illegal data; otherwise, it will be legal data.

[0043] Step S5-3: If the data in S5-2 is invalid, check whether the algorithm initialization is complete; if 5 consecutive valid data are obtained, the initialization is complete.

[0044] Step S5-4: If initialization in S5-3 is complete, determine whether the previous data is invalid;

[0045] Step S5-5: If the previous data in S5-4 is invalid, considering that invalid data is sudden, significant, and short-term, when the previous state is invalid, the next set of data will still be judged as invalid, and the current set of data will be considered valid.

[0046] Step S5-6: If the previous data in S5-4 is valid, then determine whether 3 consecutive invalid data have been obtained;

[0047] Step S5-7: If illegal data is obtained 3 times consecutively in S5-6, then the data in this group is considered valid;

[0048] Step S5-8: If no 3 consecutive illegal data were obtained in S5-6, then discard the illegal data in this group;

[0049] Step S5-9: If the initialization in S5-3 is not completed, then reset the initialization count to zero;

[0050] Step S5-10: If the data in S5-2 is valid, check whether the algorithm initialization is complete;

[0051] Step S5-11: If the initialization in S5-10 is complete, then put the data in this group into the buffer;

[0052] Step S5-12: If the initialization in S5-10 is not completed, determine whether 5 valid data have been obtained consecutively;

[0053] Step S5-13: If 5 valid data points are obtained consecutively in S5-12, the initialization of the marking algorithm is complete;

[0054] Step S5-14: If 5 valid data are not obtained consecutively in S5-12, increment the initial count value by 1;

[0055] Step S5-15: After processing this set of data, continue to receive and process the next 5 sets of positioning coordinate information data.

[0056] Preferably, step S6 involves using a model trajectory supplementation and coordination algorithm to interpolate the data processed in step S5, resulting in a smoother trajectory output. The specific steps are as follows:

[0057] Step S6-1: Use the obtained valid data as the endpoint coordinate P3, and then push forward 3 valid data points as coordinates P0, P1, and P2;

[0058] Step S6-2: Construct the Bézier curve, with the following expression:

[0059] B(t)=P0(1-t) 3 +3P1t(1-t) 2 +3P2t 2 (1-t)+P3t 3 ,t∈[0,1];

[0060] Step S6-3: Call the CubicBezierCurve3 function in Three.js to draw the Bézier curve;

[0061] Step S6-4: Take points at intervals on the drawn Bézier curve and store them in the buffer for rendering.

[0062] The present invention has the following beneficial effects: (1) The present invention can obtain the accurate model of the building by loading the pre-built building model on the server into Three.js, which solves the defects of the current similar applications, which use simple geometric combinations of buildings and cannot mark the positions of doors and windows. At the same time, it uses the modern Web Serial to communicate with the terminal serial port in real time to obtain the data of the positioning tag in real time. Unlike other similar technologies that use Node.js's SerialPort for communication with windows, it cannot run in the browser and needs to start the server on the client to run. Therefore, the present invention has the significant advantages of being lightweight, accurately positioning, having a high transmission rate and high reliability.

[0063] (2) The sliding window data processing algorithm used in this invention can effectively verify and exclude the legality of positioning coordinate information, greatly improving the accuracy and reliability of the data. Compared with other technologies that directly use raw data or simple filtering, it has significant advantages. At the same time, the model trajectory supplementation and coordination algorithm used in this invention can effectively smooth the positioning trajectory while ensuring the accuracy of the trajectory, significantly improving readability and making the trajectory display more aesthetically pleasing. This is a point that is generally lacking in other technologies.

[0064] (3) The web interface developed using Three.js in this invention has a detailed UI design, which makes it easy for users to get started. It overcomes the problems of traditional positioning interfaces being simple and not very readable, while ensuring the advantages of being lightweight, low cost and highly portable. It can run without users downloading any additional software and plugins.

[0065] (4) This invention provides a 3D model embedding visualization system based on Three.js, which can be used in various 3D visualization applications, including architecture and engineering projects, medicine, games, and virtual reality. Specifically, using Three.js as its 3D engine, it can quickly load, render, and manipulate large-scale 3D scenes and models. Users can quickly load, preview, and edit 3D models through the platform, including adjusting attributes such as texture, color, and lighting. It has high flexibility and scalability, and can be integrated with various front-end frameworks and back-end technologies. It also supports cloud computing and mobile devices, enabling a seamless experience across different platforms and devices. Attached Figure Description

[0066] Figure 1 This is a flowchart illustrating the 3D model embedding and visualization method based on Three.js according to the present invention.

[0067] Figure 2 This is a flowchart illustrating the recursive processing of the loaded building model using Three.js in this invention.

[0068] Figure 3 This invention describes the code content of using Web Serial to read and process positioning coordinate data within the Three.js framework;

[0069] Figure 4 This is a flowchart of the sliding window data processing algorithm used in this invention.

[0070] Figure 5 This is a flowchart illustrating the process of web development based on Three.js provided by the present invention. Detailed Implementation

[0071] The present invention will be further described below with reference to embodiments, but these embodiments are not intended to limit the scope of the invention.

[0072] A 3D model embedding visualization system based on Three.js, the system comprising: a data acquisition module, a data processing module, a model acquisition module, a server, a client, and a display module;

[0073] The data acquisition module is used to acquire and decode the positioning coordinate information in the external facilities; the external facilities include N positioning base stations and M positioning tags, where N≥1 and M≥3; the external facilities are connected to the terminal serial port, and the client communicates with the terminal serial port; the data acquisition module includes a CH340 to TTL module and a pre-packaged Web Serial component;

[0074] The data processing module is used to perform sliding window data processing algorithm, model trajectory supplementation and coordination algorithm, and buffer read and write processing on the positioning coordinate information acquired by the data acquisition module;

[0075] The model acquisition module retrieves the corresponding building model from the server based on the address information input by the user;

[0076] The server is used to store building models and necessary user information, and to communicate with client browsers.

[0077] The client-side web interface is developed using Three.js. Figure 5 This is a flowchart illustrating the web development process based on Three.js; the client uses the acquired building model and the processed positioning coordinates from the data processing module to visualize the positioning data embedded in the 3D model; the data acquisition module, data processing module, and display module are all implemented on the client side.

[0078] The display module is used to render the visualization results of the positioning data embedded in the 3D model in real time.

[0079] This invention uses the Three.js framework for web page development. Three.js is a wrapper around WebGL and has significant advantages such as being lightweight, having good TypeScript support, being fully object-oriented, having complete 3D features, and being highly usable at low levels.

[0080] There are three core elements to developing with Three.js: scene, camera, and renderer.

[0081] Create a scene. A scene is a three-dimensional space that serves as a container for all objects, including lights and cameras. It is created using `const scene = new THREE.Scene();`.

[0082] To create a camera, a camera needs to be added to the scene to determine the observation position, direction, and angle, which can be adjusted in real time during program execution. This invention uses a perspective projection camera to simulate the effect observed by the human eye, created using `var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);`. `fov` represents the field of view, indicating the area the camera can see; `aspect` specifies the ratio of the horizontal to vertical direction of the rendered result, ideally using the window's aspect ratio (`window.innerWidth` / `window.innerHeight`); `near` represents the near-end rendering distance, specifying the closest position the camera starts rendering from; `far` represents the far-end distance, specifying the furthest distance the camera can see from its location. In this invention, these four parameters are set to 75, `window.innerWidth` / `window.innerHeight`, 0.1, and 1000, respectively.

[0083] A renderer is created, which determines how elements in the scene should be drawn. The `renderer.render(scene, camera)` method is called to perform the rendering. In this invention, a WebGLRenderer is created using `const renderer = new THREE.WebGLRenderer({antialias:true})`, with `antialias` set to `true` to enable anti-aliasing.

[0084] Add a positioning label to identify the shape. In this invention, a red sphere is used to display the positioning coordinates. A spherical label is created by using newTHREE.Mesh(new THREE.SphereGeometry(0.1),new THREE.MeshBasicMaterial({color:0xff0000})); and the material of the subsphere geometry is set to THREE.MeshBasicMaterial.

[0085] Add a track controller to the camera. Use new OrbitControls(camera, renderer.domElement) to create a track controller to allow the camera to rotate at any angle. Set the control focus to the origin, i.e., orbitControls.target = new THREE.Vector3(0,0,0).

[0086] The scene.add() function adds the spherical positioning geometry and the external model to the current scene.

[0087] Set the deviation threshold, the number of times to initialize consecutive valid data, and the threshold for continuously generating erroneous judgments in the sliding window data processing algorithm.

[0088] Call the requestAnimationFrame function, passing a function as an argument. In this function, the renderer is rendered in a loop, and the camera is updated in real time using orbitControls.update().

[0089] Three.js renders the page based on the current scene and displays it in the browser.

[0090] This invention obtains a 3D model of a building from a server and then loads it onto the client using GltfLoader, solving the problems of rudimentary and distorted models found in other technologies. It achieves dynamic updates by communicating with a serial port via Web Serial to obtain the real-time coordinates of each tag. Since Web Serial exists on the browser's window.navigator object, there is no need to set up a local server to obtain the positioning coordinates. Based on the changes in tag coordinates, the Three.js framework is used to develop the web page, rendering the scene to the browser page in real time, thus realizing a visualization technology for embedding 3D models.

[0091] like Figure 1 As shown, a 3D model embedding visualization method based on Three.js is described, the method comprising the following steps:

[0092] Step S1: Deploy necessary external facilities such as positioning base stations and positioning tags, and connect the terminal serial port to establish communication between the client and the terminal serial port; For the visual interface system, the user inputs address information, requests the server via HTTP to retrieve the path of the corresponding building model from the database, and then uses a browser to download the building model to the local machine; the specific steps are as follows:

[0093] Step S1-1: Use the address information entered by the user as a parameter and send a GET request to the specified URL using Axios;

[0094] Step S1-2: Receive the path of the corresponding building model stored in the database returned by the server;

[0095] Step S1-3: Based on the obtained building model path, send another GET request with responseType blob via Axios to create a Blob object;

[0096] Steps S1-4: Use window.URL.createObjectURL to create a URL and point it to the Blob object. At the same time, create an a element that points to the target download link and call the browser to download the building model.

[0097] Step S2: Load the building model downloaded in Step S1 into Three.js in the client using GltfLoader;

[0098] Step S3: To ensure the imported glb (gltf) building model using GltfLoader correctly generates lighting and shadow effects, the traverse function is used to recursively modify the material properties of each node of the building model imported in Step S2; for example... Figure 2 As shown, the specific steps are as follows:

[0099] Step S3-1: Call the traverse function of gltf.scene, which is a callback function that takes each building model node as a reference;

[0100] Step S3-2: Determine if obj.isMesh is true, that is, whether the model node obj is a mesh model. If it is, continue to the next step; otherwise, determine the next model node.

[0101] Step S3-3: Set obj.frustumCulled to false to disable frustum culling of the building model. This allows for the rapid removal of invisible objects before rendering, which can optimize rendering speed.

[0102] Step S3-4: Set obj.castShadow to true to enable shadows on the building models; this makes the spatial relationships between the building models clearer and enhances the realism of the rendering.

[0103] Step S3-5: Set obj.material.emissive to obj.material.color and obj.material.em-issiveMap to obj.material.map to enable the self-illumination of the building model; this allows the building model itself to directly emit color, avoiding the problem of the model appearing dull and not vibrant enough.

[0104] Step S4: Use the Web Serial function in the data acquisition module to open the serial port in the browser, obtain the positioning coordinate information transmitted by the external facility, decode it, and continuously receive positioning coordinate information in a loop to update the positioning coordinate information; such as Figure 3 As shown, Figure 3 These are functions from Web Serial used in this system. For example, requestPort() is a method in Web Serial for requesting a serial port connection. The specific steps are as follows:

[0105] Step S4-1: Call the requestPort method on the window.navigator object, prompt the user to select the paired serial port and open the serial port using the open function;

[0106] Step S4-2: Create a TextDecoderStream object and re-import the positioning coordinate information into this object through the pipe.

[0107] Step S4-3: Obtain the reader of the decoder created above, and continuously use await reader.read() to read the positioning coordinate information and put it into the buffer in the while true async loop;

[0108] Step S4-4: Divide the buffer data according to the pre-agreed delimiter, and perform filtering and interpolation on the obtained data.

[0109] Step S5: The data acquisition module uses a sliding window data processing algorithm to filter and check the received positioning coordinate information, eliminating invalid data and obtaining valid data; the specific steps are as follows:

[0110] Step S5-1: Perform mean filtering on every 5 groups of received positioning coordinate information data to obtain the average value data group;

[0111] Step S5-2: Set a deviation threshold. If the difference between the positioning coordinates obtained in this calculation and the average Euclidean distance of the previous N consecutive coordinates exceeds the deviation threshold (N≥3), it will be judged as illegal data; otherwise, it will be legal data.

[0112] Step S5-3: If the data in S5-2 is invalid, check whether the algorithm initialization is complete; if 5 consecutive valid data are obtained, the initialization is complete.

[0113] Step S5-4: If initialization in S5-3 is complete, determine whether the previous data is invalid;

[0114] Step S5-5: If the previous data in S5-4 is invalid, considering that invalid data is sudden, significant, and short-term, when the previous state is invalid, the next set of data will still be judged as invalid, and the current set of data will be considered valid.

[0115] Step S5-6: If the previous data in S5-4 is valid, then determine whether 3 consecutive invalid data have been obtained;

[0116] Step S5-7: If illegal data is obtained 3 times consecutively in S5-6, then the data in this group is considered valid;

[0117] Step S5-8: If no 3 consecutive illegal data were obtained in S5-6, then discard the illegal data in this group;

[0118] Step S5-9: If the initialization in S5-3 is not completed, then reset the initialization count to zero;

[0119] Step S5-10: If the data in S5-2 is valid, check whether the algorithm initialization is complete;

[0120] Step S5-11: If the initialization in S5-10 is complete, then put the data in this group into the buffer;

[0121] Step S5-12: If the initialization in S5-10 is not completed, determine whether 5 valid data have been obtained consecutively;

[0122] Step S5-13: If 5 valid data points are obtained consecutively in S5-12, the initialization of the marking algorithm is complete;

[0123] Step S5-14: If no 5 valid data are obtained consecutively in S5-12, increment the initial count value by 1.

[0124] Step S5-15: After processing this set of data, continue to receive and process the next 5 sets of positioning coordinate information data.

[0125] Step S6: The model trajectory supplementation and coordination algorithm is used to interpolate the data processed in step S5, making the trajectory output smoother. This is then rendered in Three.js on a frame-by-frame basis. The specific steps are as follows:

[0126] Step S6-1: Based on the Bézier curve, set the curve as a cubic curve, take the obtained valid data as the endpoint coordinate P3, and then push forward 3 valid data as coordinates P0, P1, and P2.

[0127] Step S6-2: Four points P0, P1, P2, and P3 are used to define a cubic Bézier curve in three-dimensional space. The curve starts at P0, moves towards P1, and then from P2 to P3. These two points provide directional information. The distance between P0 and P1 determines the "length" of the curve in the direction towards P1 before turning towards P2. The Bézier curve is constructed as follows:

[0128] B(t)=P0(1-t) 3 +3P1t(1-t) 2 +3P2t 2 (1-t)+P3t 3 ,t∈[0,1];

[0129] Step S6-3: Call the CubicBezierCurve3 function in Three.js to draw the Bézier curve;

[0130] Step S6-4: Take points at intervals on the drawn Bézier curve and store them in the buffer for rendering; this makes the displayed permissions appear smoother and more harmonious while ensuring accuracy, resulting in a better visual effect, as if the trajectory were actually obtained.

[0131] Step S7: The client communicates with the server and terminal via serial port. Based on the obtained building model and the processed positioning coordinate information in the data processing module, the client displays the results in the display module, thus completing the visualization of the positioning data embedded in the 3D model.

[0132] The foregoing has shown and described the basic principles, main features, and advantages of the present invention. However, the above description is merely a specific embodiment of the present invention, and the technical features of the present invention are not limited thereto. Any other embodiments derived by those skilled in the art without departing from the technical solution of the present invention should be covered within the patent scope of the present invention.

[0133] Example

[0134] (1) The School of Earth Biology of Nanjing University of Posts and Telecommunications was selected as the target building. First, a 3D model of the target building was created using CAD. The exported glb model was uploaded to the server and named model.glb. The path of this model was added to the database. At the same time, necessary external facilities such as positioning base stations and positioning tags were deployed and connected to the terminal serial port.

[0135] (2) Launch the Three.js Web application client to select geographic information in the browser, select the School of Geography of Nanjing University of Posts and Telecommunications and confirm.

[0136] (3) The application sends a request to the server through Axios to obtain the model storage path, and calls the browser to download the model.glb model to the client's local machine. At this time, the user is prompted to select the paired serial port. The COM 4 serial port is selected as the serial port in this embodiment.

[0137] (4) The program opens the COM 4 serial port through Web Serial, creates a TextDecoderStream object and obtains a reader, and prepares to read the label coordinate information from the serial port.

[0138] (5) After the model in step (3) is downloaded, call the GltfLoader of Three.js to load the model.glb model into the application. In the callback function, use the traverse function to recursively modify the material properties of each node of the model and set the shadow and self-illumination settings of the model. Three.js renders the scene according to the renderer and camera set in the source code. At this time, the browser displays the solid 3D model of the building of the School of Earth Biology of Nanjing University of Posts and Telecommunications.

[0139] (6) Move the positioning tags placed in the building beforehand. At this time, the serial port will receive the positioning coordinate information, which will be decoded and placed into the buffer. The data to be sent is pre-set to be separated by the dollar sign ($), and the numbers of the same group of data and the three-dimensional coordinates are separated by English commas. According to this convention, the JavaScript str.split method is used to split each group of data in the buffer. The deviation threshold, the number of times to initialize continuous valid data, and the threshold for continuously generating erroneous judgments of validity in the sliding window data processing algorithm are set to 3m, 5 times, and 3 times, respectively. The processed valid data is then smoothed by the model trajectory supplementation and coordination algorithm. At this time, on the browser page, you can see that the spherical geometry used to identify the positioning tags changes continuously as the tags move, and the precise position of each tag is obtained.

[0140] The above description is merely a preferred embodiment of the present invention and is not intended to limit the application of the present invention. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the present invention are included within the protection scope of the present invention.

Claims

1. A method for embedding and visualizing 3D models based on Three.js, characterized in that, Includes the following steps: Step S1: The user enters the address information, and the server retrieves the path of the corresponding building model from the database via an HTTP request, and the browser is called to download the building model; Step S2: Load the building model downloaded in Step S1 into Three.js in the client using GltfLoader; Step S3: Use the traverse function to recursively modify the material properties of each node of the building model imported in step S2; Step S4: Use the Web Serial function in the data acquisition module to open the serial port in the browser, obtain the positioning coordinate information transmitted by the external facility, decode it, and continuously receive positioning coordinate information in a loop to update the positioning coordinate information. Step S5: The data acquisition module uses a sliding window data processing algorithm to filter and check the received positioning coordinate information, eliminating invalid data and obtaining valid data. The specific steps are as follows: Step S5-1: Perform mean filtering on every 5 groups of received positioning coordinate information data to obtain the average value data group; Step S5-2: Set a deviation threshold. If the difference between the positioning coordinates obtained in this calculation and the average Euclidean distance of the previous N consecutive coordinates exceeds the deviation threshold (N≥3), it will be judged as illegal data; otherwise, it will be legal data. Step S5-3: If the data in S5-2 is invalid, check whether the algorithm initialization is complete. If 5 valid data are obtained consecutively, the initialization is complete. Step S5-4: If initialization in S5-3 is complete, determine whether the previous data is invalid; Step S5-5: If the previous data in S5-4 is invalid, considering that invalid data is sudden, significant, and short-term, when the previous state is invalid, the next set of data will still be judged as invalid, and the current set of data will be considered valid. Step S5-6: If the previous data in S5-4 is valid, then determine whether 3 consecutive invalid data have been obtained; Step S5-7: If illegal data is obtained 3 times consecutively in S5-6, then the data in this group is considered valid; Step S5-8: If no 3 consecutive illegal data were obtained in S5-6, then discard the illegal data in this group; Step S5-9: If the initialization in S5-3 is not completed, then reset the initialization count to zero; Step S5-10: If the data in S5-2 is valid, check whether the algorithm initialization is complete; Step S5-11: If the initialization in S5-10 is complete, then put the data in this group into the buffer; Step S5-12: If the initialization in S5-10 is not completed, determine whether 5 valid data have been obtained consecutively; Step S5-13: If 5 valid data points are obtained consecutively in S5-12, the initialization of the marking algorithm is complete; Step S5-14: If 5 valid data are not obtained consecutively in S5-12, increment the initial count value by 1; Step S5-15: After processing this set of data, continue to receive and process the next 5 sets of positioning coordinate information data; Step S6: The model trajectory supplementation and coordination algorithm is used to interpolate the legal data obtained after processing in step S5, so that the trajectory output is smoother and rendered in Three.js in units of frames; Step S7: The client communicates with the server and terminal via serial port. Based on the obtained building model and the processed positioning coordinate information in the data processing module, the client displays the results in the display module, thus completing the visualization of the positioning data embedded in the 3D model. A 3D model embedding visualization system is generated using a 3D model embedding visualization method. The system includes: a data acquisition module, a data processing module, a model acquisition module, a server, a client, and a display module. The data acquisition module is used to acquire and decode the positioning coordinates of external facilities; The data processing module is used to perform sliding window data processing algorithm, model trajectory supplementation and coordination algorithm, and buffer read and write processing on the positioning coordinate information obtained from the data acquisition module; The model acquisition module obtains the corresponding building model from the server based on the address information input by the user; The server is used to store building models and communicate with client browsers; The client completes the visualization of positioning data embedded in the 3D model based on the acquired building model and the processed positioning coordinate information from the data processing module; the data acquisition module, data processing module, and display module are all completed in the client. The display module is used to render the visualization results of the positioning data embedded in the 3D model in real time.

2. The method for embedding and visualizing 3D models according to claim 1, characterized in that, The external facilities include N positioning base stations and M positioning tags, where N≥1 and M≥3; the external facilities are connected to the terminal serial port, and the client communicates with the terminal serial port.

3. The method for embedding and visualizing 3D models according to claim 1, characterized in that, The data acquisition module includes a CH340 to TTL module and a pre-packaged Web Serial component.

4. The method for embedding and visualizing 3D models according to claim 1, characterized in that, The user input address information mentioned in step S1 is used to retrieve the corresponding building model path from the database via an HTTP request to the server, and then the browser is invoked to download the building model. The specific steps are as follows: Step S1-1: Use the address information entered by the user as a parameter and send a GET request to the specified URL using Axios; Step S1-2: Receive the path of the corresponding building model stored in the database returned by the server; Step S1-3: Based on the obtained building model path, send another GET request with responseType blob via Axios to create a Blob object; Steps S1-4: Use window.URL.createObjectURL to create a URL and point it to the Blob object. At the same time, create an a element that points to the target download link and call the browser to download the building model.

5. The method for embedding and visualizing 3D models according to claim 1, characterized in that, Step S3 involves recursively modifying the material properties of each node of the building model imported in step S2 using the traverse function. The specific steps are as follows: Step S3-1: Call the traverse function of gltf.scene, which is a callback function that takes each building model node as a parameter; Step S3-2: Determine if obj.isMesh is true, that is, whether the model node obj is a mesh model. If it is, continue to the next step; otherwise, determine the next model node. Step S3-3: Perform frustum culling on the building model to quickly remove invisible objects before rendering; Step S3-4: Apply shading to the building models from step S3-2 to make the spatial relationships between the building models clearer; Step S3-5: Perform self-illumination processing on step S3-3 so that the building model itself can directly emit color.

6. The method for embedding and visualizing 3D models according to claim 1, characterized in that, In step S4, the Web Serial port in the data acquisition module is opened in the browser to obtain the positioning coordinate information transmitted by the external facility, and the information is decoded. Simultaneously, the positioning coordinate information is continuously received and updated. The specific steps are as follows: Step S4-1: Call the requestPort method on the window.navigator object, prompt the user to select the paired serial port and open the serial port using the open function; Step S4-2: Create a TextDecoderStream object and re-import the positioning coordinate information into this object through the pipe. Step S4-3: Obtain the reader of the decoder created above, and continuously use await reader.read to read the positioning coordinate information and put it into the buffer in the while true async loop; Step S4-4: Divide the buffer data according to the pre-agreed delimiter, and perform filtering and interpolation on the obtained data.

7. The method for embedding and visualizing 3D models according to claim 1, characterized in that, Step S6 involves using a model trajectory supplementation and coordination algorithm to interpolate the data processed in step S5, resulting in a smoother trajectory output. The specific steps are as follows: Step S6-1: Use the obtained valid data as the endpoint coordinate P3, and then push forward 3 valid data points as coordinates P0, P1, and P2; Step S6-2: Construct the Bézier curve, with the following expression: ； Step S6-3: Call the CubicBezierCurve3 function in Three.js to draw the Bézier curve; Step S6-4: Take points at intervals on the drawn Bézier curve and store them in the buffer for rendering.

Images