A tunnel structure response cloud chart visualization method based on Three.js

Abstract

This invention provides a method for visualizing tunnel structural response cloud maps based on Three.js. The method includes: establishing a finite element model of the target tunnel using tunnel design drawings and performing numerical simulation of the tunnel structural response to obtain a glTF-format mesh model of the tunnel secondary lining; traversing the glTF-format model of the tunnel secondary lining using Three.js to extract the coordinates of each vertex during the tunnel displacement process; obtaining the tunnel lateral displacement result corresponding to the tunnel displacement in the finite element simulation based on the vertex coordinates during the tunnel displacement process; and realizing the 3D visualization of the tunnel structural response cloud map on a web platform using Three.js based on the tunnel lateral displacement result. The method provided by this invention achieves cross-platform visualization of tunnel structural response cloud maps, enabling more convenient and intuitive monitoring of the structural response of tunnels during construction and operation.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of tunnel cloud visualization, and particularly relates to a tunnel structure response cloud visualization method based on Three.js. BACKGROUND

[0002] Research shows that active fault dislocation will bring great damage to the tunnel structure, especially some faults with strong activity and wide influence, which have a great impact on the construction and operation of the tunnel. Therefore, it is necessary to pay attention to the tunnel structure response under fault dislocation and improve the multi-perspective, multi-dimensional and multi-platform tunnel control and prevention measures.

[0003] According to the actual engineering background, a tunnel entity model can be established by using a finite element software, so as to perform finite element simulation analysis on the tunnel structure and obtain tunnel structure response (including stress, strain, displacement, etc.) simulation results. However, the visualization display of the finite element results often relies on the corresponding finite element software, and it is difficult to realize cross-platform cloud visualization. The front-end web page rendering only needs to be based on a browser, and efficient and fast three-dimensional visualization function can be realized, but simple model visualization lacks data support and cannot directly focus on the dislocation displacement of the tunnel under the fault.

[0004] Therefore, how to realize cross-platform three-dimensional visualization of the tunnel structure response cloud has become a problem to be solved at present. SUMMARY

[0005] The present application provides a tunnel structure response cloud visualization method based on Three.js, which combines finite elements with a front-end three-dimensional engine to solve the problem of cross-platform cloud visualization.

[0006] A tunnel structure response cloud visualization method based on Three.js, comprising:

[0007] Step 1: Obtain a tunnel design drawing;

[0008] Step 2: Establish a finite element model of a target tunnel according to the tunnel design drawing, and perform tunnel dislocation displacement finite element simulation by using the finite element model to obtain a gltf format mesh model of tunnel secondary lining;

[0009] Step 3: Traverse the tunnel secondary lining gltf format model by using Three.js to extract the coordinates of each vertex in the tunnel dislocation displacement process;

[0010] Step 4: Obtain the tunnel transverse displacement result corresponding to the tunnel dislocation displacement in the finite element simulation according to the coordinates of each vertex in the tunnel dislocation displacement process;

[0011] Step five: Three.js realizes the three-dimensional visualization of the tunnel structure response cloud map on the web platform according to the tunnel lateral displacement result.

[0012] Further, the tunnel structure response cloud map visualization method based on Three.js as described above, the step two comprises:

[0013] Step 21: Simulate the tunnel structure response under fault dislocation by using the finite element model;

[0014] Step 22: According to the response, use the grid Mesh module of the finite element model to export the obj format grid model of the tunnel secondary lining through the Export function;

[0015] Step 23: Import the bj format grid model of the tunnel secondary lining into the Three.js editor, and convert the obj format grid model into gltf format grid model by using the obj2gltf tool.

[0016] Further, the tunnel structure response cloud map visualization method based on Three.js as described above, the step three comprises:

[0017] The gltf format grid model is traversed by the traverse function of Three.js to obtain the vertex coordinates in the tunnel dislocation displacement process.

[0018] Further, the tunnel structure response cloud map visualization method based on Three.js as described above, the step four comprises:

[0019] Step 41: Process the vertex coordinates in the tunnel dislocation displacement process into Excel data;

[0020] Step 42: Run the python code in the finite element software to read the tunnel lateral displacement result corresponding to the Excel data; the tunnel lateral displacement result includes: the vertex coordinates of the model and the lateral displacement determined according to the vertex coordinates.

[0021] Further, the tunnel structure response cloud map visualization method based on Three.js as described above, in step 42, the tunnel lateral displacement result includes: 1-20 frames of model vertex coordinates and the lateral displacement determined according to the 1-20 frames of model vertex coordinates.

[0022] Further, the tunnel structure response cloud map visualization method based on Three.js as described above, the step five comprises:

[0023] Step 51: convert the tunnel lateral displacement results into a json format array file, and read the json file using the $.getJSON function in Three.js to obtain the tunnel displacement data of the tunnel lateral displacement results in Three.js;

[0024] Step 52: after magnifying the tunnel displacement data in Three.js by several times, use the magnified tunnel displacement data to realize the three-dimensional visualization of the tunnel structure response cloud chart on the Web platform.

[0025] Further, the tunnel structure response cloud chart visualization method based on Three.js as described above, the step 52 comprises:

[0026] Step 521: use the magnified tunnel displacement data to generate a tunnel geometry in Three.js; at the same time, use the tunnel displacement data in the Three.js to normalize the tunnel displacement data to obtain a normalized result;

[0027] Step 522: according to the different materials of the tunnel geometry, use the normalized result to respectively color gradient the tunnel geometry with different materials, so as to realize the three-dimensional visualization of the tunnel structure response cloud chart on the Web platform.

[0028] Further, the tunnel structure response cloud chart visualization method based on Three.js as described above, the step 521 comprises:

[0029] Use lut.setMax to set the maximum displacement, and use lut.setMin to set the minimum displacement to complete the change of the tunnel displacement data value from 0 to 1.

[0030] Further, the tunnel structure response cloud chart visualization method based on Three.js as described above, the step 522 comprises:

[0031] According to the normalized result, the vertex color of the tunnel geometry gradually changes with different values;

[0032] According to the tunnel geometry with different materials respectively, use Mesh to render the gradient color of the tunnel geometry, and finally realize the three-dimensional visualization of the tunnel structure on the Web platform according to different materials and displacement results.

[0033] The tunnel structure response cloud atlas visualization method based on Three.js provided by the application extracts each vertex coordinate in the tunnel dislocation displacement process through Three.js; and according to the each vertex coordinate in the tunnel dislocation displacement process, finally realizes three-dimensional visualization of the tunnel structure response cloud atlas on the Web platform, which has the advantages of finite elements and Web page ends, can realize cross-platform display of stress and displacement cloud atlas, and enriches the content of the tunnel management and control platform. Moreover, without downloading any software and plug-ins, the method provided by the application improves the efficiency of viewing the cloud atlas, saves time, and is simple and convenient. BRIEF DESCRIPTION OF DRAWINGS

[0034] In order to more clearly illustrate the technical solutions in the application or prior art, the following will briefly introduce the drawings needed to be used in the embodiments or prior art description. Obviously, the drawings in the following description are some embodiments of the application, and other drawings can be obtained by those skilled in the art without creative labor.

[0035] Figure 1 The tunnel structure response cloud atlas visualization method based on Three.js provided by the application;

[0036] Figure 2 The tunnel second lining displacement cloud atlas visualization effect provided by the embodiment of the application;

[0037] Figure 3 The tunnel second lining displacement cloud atlas visualization effect under different frame numbers provided by the embodiment of the application;

[0038] Figure 4 The tunnel second lining transverse displacement amplification ten times visualization effect provided by the embodiment of the application. DETAILED DESCRIPTION

[0039] In order to make the purpose, technical solutions and advantages of the application more clear, the technical solutions in the application will be described clearly and completely in the following with reference to the drawings in the application. Obviously, the described embodiments are some embodiments of the application, not all embodiments. Based on the embodiments in the application, all other embodiments obtained by those skilled in the art without creative labor belong to the protection scope of the application.

[0040] The calculation results of the finite element software are generally presented through tables, pictures and screenshots after analysis and processing, and the cloud picture is obtained by screenshot, and in addition, other people want to view the cloud picture on the finite element software, and then the corresponding finite element software needs to be downloaded, and then the calculation files in the formats of cae and odb are needed to view the complete finite element project, and the version and other problems need to be considered, so it is very inconvenient to realize the cloud picture visualization by using the finite element software. The purpose of the present application is to put the finite element model and the model result cloud picture into the Three.js platform, and the computer only needs to have a browser to view the cloud picture of the structure, therefore, the cloud picture effect in the finite element software is mapped to the Three.js platform through a series of operations, so that the cloud picture effect of the structure can be observed on the webpage without opening the finite element software, the cross-platform visualization of the cloud picture from the finite element software to the webpage is realized, and the threshold of cloud picture viewing is reduced.

[0041] Figure 1 The tunnel structure response cloud picture visualization method based on Three.js provided by the present application has the flow chart as shown in Figure 1 The method comprises the following steps:

[0042] Step 1: Obtain a tunnel design drawing.

[0043] Specifically, the tunnel design drawing contains data such as tunnel cross section, longitudinal section and lining structure section drawing, and the data provided by the tunnel design drawing can be used to establish a tunnel finite element model, and the finite element model of the target tunnel is established by using the Abaqus software in the embodiment of the present application.

[0044] Step 2: Establish a finite element model of the target tunnel according to the tunnel design drawing, and use the finite element model to perform a tunnel fault displacement finite element simulation to obtain a gltf format grid model of the tunnel secondary lining.

[0045] Specifically, the finite element model of the target tunnel is established by using the Abaqus software, and the tunnel structure response under the fault displacement is simulated by using the model. Since the model exported from the finite element software Abaqus is only an obj format grid model, and the purpose of the present application is to display the tunnel fault displacement effect on the Web platform through Three.js, therefore, the obj format grid model of the tunnel secondary lining needs to be converted into a gltf format network model as an intermediate transition, and the specific conversion method is as follows:

[0046] When the obj format mesh model of the tunnel secondary lining is imported into the Three.js editor, the model's vertices are initially displayed as 0. Since the model needs to be colored based on its vertices (i.e., assigning colors to the vertices, with each vertex corresponding to a different color) to achieve a color gradient effect, the model needs to be converted into a geometric model with vertices. This invention uses the obj2gltf tool to convert the obj format mesh model of the tunnel secondary lining into gltf format. At this point, the model's vertex information is displayed correctly, instead of being 0.

[0047] In addition, this embodiment of the invention only derives the network model of the tunnel secondary lining. This is partly to simplify the workload, and partly because this embodiment of the invention focuses on studying whether the lateral displacement of the tunnel secondary under fault displacement meets the specification requirements. Therefore, the final output is the gltf format mesh model of the tunnel secondary lining.

[0048] Step 3: Use Three.js to traverse the glTF format model of the tunnel secondary lining to extract the coordinates of each vertex during the tunnel displacement process.

[0049] Specifically, the converted tunnel secondary lining glTF format model is imported into Three.js, and the traverse function is used to traverse the model to extract the coordinates of each vertex during the tunnel displacement process.

[0050] Step 4: Based on the coordinates of each vertex during the tunnel displacement process, obtain the tunnel lateral displacement result corresponding to the tunnel displacement in the finite element simulation.

[0051] Specifically, based on Python code, the transverse displacement results of the tunnel in the finite element simulation corresponding to the coordinates of each vertex during the above-mentioned tunnel displacement process were extracted.

[0052] The specific extraction process is as follows:

[0053] First, the coordinates of each vertex during the tunnel displacement process are processed into Excel data; then, Python code is run in the finite element software to read the tunnel lateral displacement results corresponding to the Excel data; the tunnel lateral displacement results include: the coordinates of each vertex of the model and the lateral displacement determined based on the coordinates of each vertex.

[0054] Furthermore, the Python code extracted the lateral displacements corresponding to the vertex coordinates of the model from frames 1 to 20.

[0055] Since finite element simulation software simulates the process of a tunnel structure from its normal initial state to its damaged state, there is a series of processes before it is completely destroyed. This invention can extract the lateral displacement corresponding to the vertex coordinates of the model from frames 1 to 20 and then display the corresponding multiple cloud map results on the Web platform.

[0056] Step 5: Based on the tunnel's lateral displacement results, Three.js implements a 3D visualization of the tunnel structure response cloud map on the web platform.

[0057] This step specifically includes the following steps:

[0058] First, the tunnel lateral displacement results are converted into a JSON array file, and the $.getJSON function in Three.js is used to read the JSON file to obtain the tunnel displacement data in Three.js. Then, the tunnel displacement data in Three.js is magnified several times, and the magnified tunnel displacement data is used to realize the three-dimensional visualization of the tunnel structure response cloud map on the web platform.

[0059] Specifically, to quickly and conveniently read data and improve code execution efficiency, this embodiment of the invention first stores the extracted tunnel model vertex coordinates and their corresponding displacement data as JSON format array files. Then, in Three.js, the `$.getJSON` function is used to read the JSON files to obtain the tunnel displacement data in Three.js. Next, the tunnel displacement data is multiplied by 10 and stored as a new array. This array is then added separately to the tunnel model's X-coordinate, and a new model is generated based on the changed coordinates to display the tunnel's lateral displacement. Finally, the magnified tunnel displacement data is used to achieve 3D visualization of the tunnel structure response cloud map on a web platform.

[0060] The following section provides a detailed explanation of how to achieve 3D visualization of the tunnel structure response cloud map:

[0061] First, using the amplified tunnel displacement data, a tunnel geometry is generated in Three.js. Simultaneously, the tunnel displacement data in Three.js is normalized, and based on the normalization result, the vertex colors of the tunnel geometry gradually change with different values. Then, for tunnel geometries of different materials, the gradient colors of the tunnel geometry are rendered using Mesh, ultimately achieving a 3D visualization of the tunnel structure on a web platform, showing color gradients based on different materials and displacement results.

[0062] Specifically, the lateral displacement of the tunnel lining is the displacement in the X direction of the model. Since the original displacement is very small, it is difficult to observe the displacement result without magnification. Therefore, this invention multiplies the tunnel lateral displacement result by 10 and stores it as a new array. This array is then added separately to the X coordinate of the tunnel model, and a new model is generated based on the changed coordinates to demonstrate the lateral displacement of the tunnel.

[0063] Then, in Three.js, a geometry is created, and the read vertex data is assigned to the geometry using the BufferAttribute property to generate the tunnel geometry. Next, the tunnel displacement data is normalized using the lut function, so that the tunnel vertex color changes gradually with different displacement values. Specifically, the normalization method is to use lut.setMax to set the maximum displacement value and lut.setMin to set the minimum displacement value, thus completing the change of tunnel displacement data values ​​from 0 to 1. Finally, the processed vertex colors are assigned to the tunnel geometry, a material object is set for the geometry, and the tunnel vertex colors are rendered using Mesh, forming a tunnel displacement cloud map effect.

[0064] Since geometric materials do not change the color itself, they do optimize the display of cloud map effects. Different materials produce different effects, such as reflection effects, increases / decreases in brightness, and more distinct color gradations. Some geometric materials cannot render the vertex colors of the model; therefore, a material that can assign colors to the vertices needs to be set, and then the tunnel vertex colors are rendered using a mesh to create the tunnel displacement cloud map effect.

[0065] The method provided by this invention enables cross-platform visualization of tunnel structural response cloud maps, allowing for more convenient and intuitive monitoring of the structural response of tunnels during construction and operation.

[0066] Figure 2 To visualize the displacement cloud map of the tunnel lining on the front-end webpage, from... Figure 2 It can be seen that the results are consistent with those in the finite element method. Figure 3 To display displacement contour maps of the tunnel secondary lining at different frame numbers, simply extract the corresponding data and change the maximum and minimum displacement values ​​set by the LUT function. Figure 4 This is a visualization of the tunnel secondary lining lateral displacement magnified tenfold according to the present invention, as shown below. Figure 4 As shown, this is a visualization of the tunnel's lateral displacement magnified tenfold. Since the original displacement was small and the deformation was not very intuitive, the displacement of the tunnel can be clearly observed after magnifying the displacement tenfold.

[0067] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, and not to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for visualizing tunnel structure response cloud maps based on Three.js, characterized in that, include: Step 1: Obtain tunnel design drawings; Step 2: Establish a finite element model of the target tunnel based on the tunnel design drawings, and use the finite element model to perform finite element simulation of tunnel displacement to obtain a glTF mesh model of the tunnel secondary lining. Step 3: Use Three.js to traverse the glTF format model of the tunnel secondary lining to extract the coordinates of each vertex during the tunnel displacement process; Step 4: Based on the coordinates of each vertex during the tunnel displacement process, obtain the corresponding lateral displacement results of the tunnel in the finite element simulation. Step 5: Based on the tunnel's lateral displacement results, Three.js implements a 3D visualization of the tunnel structure response cloud map on the web platform; Step two includes: Step 21: Simulate the tunnel structure response under fault displacement using the finite element model; Step 22: Based on the response, use the Mesh module of the finite element model to export the obj format mesh model of the tunnel secondary lining through the Export function; Step 23: Import the BJ format mesh model of the tunnel secondary lining into the Three.js editor, and use the obj2gltf tool to convert the obj format mesh model into a gltf format mesh model; Step three includes: The traverse function of Three.js is used to traverse the gltf format mesh model to obtain the coordinates of each vertex during the tunnel displacement process; Step four includes: Step 41: Process the coordinates of each vertex during the tunnel displacement process into Excel data; Step 42: Run Python code in the finite element software to read the tunnel lateral displacement results corresponding to the Excel data; the tunnel lateral displacement results include: the coordinates of each vertex of the model and the lateral displacement determined based on the coordinates of each vertex; Step five includes: Step 51: Convert the tunnel lateral displacement results into a JSON array file, and use the $.getJSON function in Three.js to read the JSON file to obtain the tunnel displacement data in Three.js; Step 52: After magnifying the tunnel displacement data in Three.js by several times, use the magnified tunnel displacement data to realize the three-dimensional visualization of the tunnel structure response cloud map on the Web platform.

2. The tunnel structure response cloud map visualization method based on Three.js according to claim 1, characterized in that, In step 42, the tunnel lateral displacement result includes: the model vertex coordinates of frames 1 to 20 and the lateral displacement determined based on the model vertex coordinates of frames 1 to 20.

3. The tunnel structure response cloud map visualization method based on Three.js according to claim 1, characterized in that, Step 52 includes: Step 521: Using the amplified tunnel displacement data, generate the tunnel geometry in Three.js; simultaneously, using the tunnel displacement data in Three.js, normalize the tunnel displacement data to obtain the normalization result; Step 522: Based on the different materials of the tunnel geometry, apply color gradients to the tunnel geometry of different materials using the normalization results to achieve three-dimensional visualization of the tunnel structure response cloud map on the Web platform.

4. The tunnel structure response cloud map visualization method based on Three.js according to claim 3, characterized in that, Step 521, which involves normalizing the amplified tunnel displacement data, includes: Use lut.setMax to set the maximum displacement value and lut.setMin to set the minimum displacement value to complete the change of tunnel displacement data value from 0 to 1.

5. The tunnel structure response cloud map visualization method based on Three.js according to claim 3, characterized in that, Step 522 includes: Based on the normalization result, the vertex colors of the tunnel geometry are made to gradually change with different values; Based on tunnel geometries of different materials, the gradient colors of the tunnel geometries are rendered using Mesh, ultimately realizing the 3D visualization of the tunnel structure with color gradients based on different materials and displacement results on a web platform.

Images