Method for realizing petrochemical industry inspection disclosure based on Web page three-dimensional model

Abstract

The invention relates to the field of special equipment data processing, in particular to a method for realizing petrochemical industry inspection based on a Web page three-dimensional model. The invention aims to provide a method for realizing petrochemical industry inspection disclosure based on a Web page three-dimensional model. The method has the characteristics of high efficiency, low cost and convenience in display. According to the technical scheme, the method for achieving petrochemical industry inspection disclosure based on the Web page three-dimensional model comprises the following steps that S1, an environment is built; s2, loading the model; s3, annotating the disclosure data; step S4: data persistence; step S5, reloading the model; and S6, performing online inspection and disclosure management.

Description

Technical Field

[0001] The present invention relates to the field of special equipment data processing, and specifically relates to a petrochemical industry inspection method implemented based on a three-dimensional model on a Web page. Background Art

[0002] In the existing inspection process of petrochemical special equipment, for the usual inspection handover, inspectors, petrochemical enterprise managers, and relevant construction personnel need to print a large number of device drawings into paper materials and conduct offline handover work with the drawings and relevant personnel at the huge device site. The work process is complex and the inspection communication is very inconvenient.

[0003] A three-dimensional model diagram, that is, a 3D-rendered model drawing, can vividly display components such as pipe fittings, elbows, tees, and valves of physical pipelines. How to combine the three-dimensional model diagram with the inspection handover work in the petrochemical industry is a difficult problem to be solved urgently. Summary of the Invention

[0004] The purpose of the present invention is to overcome the deficiencies in the above background art and provide a petrochemical industry inspection handover method implemented based on a three-dimensional model on a Web page, which should have the characteristics of high efficiency, low cost, and convenient display.

[0005] The technical solution of the present invention is as follows:

[0006] A petrochemical industry inspection handover method implemented based on a three-dimensional model on a Web page includes the following steps:

[0007] Step S1: Environment setup;

[0008] Step S2: Model loading;

[0009] Step S3: Marking handover data;

[0010] Step S4: Data persistence;

[0011] Step S5: Model reloading;

[0012] Step S6: Online inspection handover management.

[0013] The said step S1 includes: setting up a Web development environment on the server and introducing the Three.js library on the client.

[0014] The said step S2 includes: uploading a three-dimensional model file to the server through uploadModelFile, and loading the three-dimensional model file on the server through the viewModelFile function called by the browser on the client, and rendering a 3D scene in the browser.

[0015] The said step S3 includes: 1) calling saveAnnotations to set the annotation object; 2) using JavaScript to add mouse and touch event listeners to the model view area; 3) calling addDisclosureDraw function to save the disclosure data annotation.

[0016] The said annotation object includes object ID, type, coordinates (3D scene coordinates), size, color, and text content.

[0017] The said step S4 includes: after all the annotations are completed, uploading the data of the annotation object to the server and calling the historyDisclosureDrawFile function to save it.

[0018] The said step S5 includes: calling LoadModelFile through the browser web page of the client to load the 3D model file of the server, calling viewModelFile in the browser to render the 3D scene, simultaneously calling getAnnotations from the server to retrieve the data of the annotation object, calling DivideintotwoLanes to convert the 3D scene coordinates of the annotation object into 2D screen coordinates, and displaying the annotation box of the annotation object on the screen of the client, keeping the annotation box in front of the target point.

[0019] The said step S6 includes: after the user confirms, the acceptance of the 3D model and the disclosure of technical information are completed.

[0020] The beneficial effects of the present invention are:

[0021] The present invention proposes a method for realizing the inspection disclosure in the petrochemical industry based on a 3D model on a Web page. By combining the 3D model drawing tools used in existing petrochemical enterprises, marking single pipelines through 3D modeling association, realizing the work process of digital disclosure, replacing the traditional paper document disclosure, filling the blank of online disclosure in the inspection field of the petrochemical industry. Greatly improving the inspection efficiency and the function of leaving a record of inspection information. Brief Description of the Drawings

[0022] Figure 1 is the flow chart of the present invention.

[0023] Figure 2 is the schematic diagram of the embodiment of the present invention. Detailed Embodiment

[0024] In order to make the purpose, technical solutions and advantages of the present invention clearer and more understandable, the present invention will be further described in detail below with reference to the drawings and embodiments. It should be understood that the specific embodiments described here are only used to explain the present invention and are not used to limit the present invention.

[0025] Such asFigure 1 As shown in Figure 1 , a method for implementing inspection handover in the petrochemical industry based on a 3D model of a web page includes the following steps:

[0026] Step S1: Environment setup

[0027] 1) Set up a web development environment on the server to ensure that the server can run HTML, CSS, and JavaScript.

[0028] 2) Set up the introduction of the Three.js library on the client to ensure that the client's browser supports WebGL for loading 3D model files.

[0029] Step S2: Model loading

[0030] 1) Use uploadModelFile to upload the 3D model file to the server.

[0031] The 3D model file is a model diagram and a device diagram of the petrochemical industry. The format of the 3D model file is FBX, DWF / DWFS, Google Earth, and the file size is 40 - 80MB.

[0032] 2) Use viewModelFile in the client's browser to load the 3D model file on the server, and a 3D scene is rendered in the browser.

[0033] This step usually involves specifying the URL of the model, selecting an appropriate loader, and handling the callback function getThreeViewList after loading is complete.

[0034] Step S3: Marking handover data

[0035] 1) Set the marking object

[0036] The marking object includes object ID, type, coordinates (3D scene coordinates), size, color, and text content. The data of the marking object is stored in JSON format.

[0037] 2) Use JavaScript to add listeners for mouse and touch events to the model view area to capture the click actions of users in the client browser. Specifically, it includes:

[0038] ① Create a class handleModalSubmitAdd that implements the mouse double - click event listener interface.

[0039] ② Implement the mouse double - click event handling method DoubleMouseEventListener in this class.

[0040] ③ Register this listener on the component that needs to listen for the mouse double - click event.

[0041] 3) Data annotation

[0042] ① Assign a unique ID to each 3D component as the component ID. The user uses a browser on the client to view the 3D model and find the component to be marked (usually the pipeline of the device).

[0043] You can find the parts you need to display by hiding or partially hiding related parts and elements.

[0044] ② The user clicks on a component (pipeline) of the 3D model. The listener captures the user's click and creates a label object for the current component:

[0045] First, get the 3D scene coordinates of the clicked component, call the DivideintotwoLanes function to convert the 3D scene coordinates into 2D screen coordinates, and display the annotation box on the client screen according to the 2D screen coordinates.

[0046] ③ The user enters the text of the briefing data in the annotation box, and can modify the font, size and color of the text. After the input is completed and confirmed, the data (component ID, 3D scene coordinates, text) is recorded in the annotation object, and the data of the annotation object is temporarily saved on the client;

[0047] ④The listener monitors mouse events or keyboard events in real time

[0048] When the model rotates, the 2D screen coordinates of the annotation box are updated in real time according to the 3D scene coordinates of the annotation object, so that the annotation box remains in front of the screen. All annotation boxes are placed in an independent and topmost rendering layer so that the annotation box will not be blocked by the 3D parts.

[0049] The principle of converting 3D scene coordinates into 2D screen coordinates (i.e. 3D vectors into 2D pixel positions) is as follows:

[0050] 1. The three-dimensional coordinates include three components: x, y and z, where x and y represent the horizontal and vertical positions of the object on the screen, and z represents the distance of the object in the depth direction.

[0051] 2. When projecting objects in a 3D scene onto a 2D plane, you can choose perspective projection or orthographic projection. Perspective projection makes objects that are far away from the observer appear smaller, simulating the depth perception of human vision; while orthographic projection keeps the size of all objects unchanged, regardless of their depth.

[0052] The specific implementation is completed through the following steps:

[0053] 2-1) Define the observation point coordinates and projection plane distance

[0054] a) Determine the position of the observer (observation point coordinates), denoted as (view_point_x, view_point_y, view_point_z).

[0055] b) Define the distance to the projection plane, denoted as distance_to_projection_plane.

[0056] 2-2) Perform perspective transformation on the 3D coordinates

[0057] a) According to the settings of the observation point and the projection plane, first perform perspective transformation on the 3D coordinates. The purpose of perspective transformation is to adjust the depth effect of the object on the Z-axis.

[0058] b) The perspective transformation formula is:

[0059]

[0060] Here, (x′, y′) are the coordinates after perspective transformation.

[0061] 2-3) After perspective transformation, the obtained points (x', y') will be mapped onto the projection plane.

[0062] 2-4) Convert the projected coordinates to screen coordinates, usually achieved through simple offset and scaling to adapt to the screen resolution, ensuring that the center of the screen is aligned with the coordinate origin, and at the same time reversing the y-axis upward to match the general screen coordinate system:

[0063]

[0064] y2d = (int)(-y′ + screen_height / 2)

[0065] The relevant code is as follows:

[0066] int x 2d = (int)(((x 3d * distance_to_projection_plane) / (z 3d - view_point_z) + screen_width / 2)); int y 2d = (int)((( - y 3d * distance_to_projection_plane) / (z 3d - view_point_z) + screen_height / 2));

[0067] 3. The depth information of an object in a 3D scene can be mapped to a 2D plane by using perspective division, that is, dividing the x, y, and z coordinates of the object by the value of its z coordinate. For perspective projection, the depth information of the object is converted into a value between 0 and 1, where 0 represents the farthest object and 1 represents the nearest object.

[0068] Step S4: Data Persistence

[0069] When all the annotations are completed, call historyDisclosureDrawFile to upload the data of the annotation object to the server for saving.

[0070] Step S5: Model Reloading

[0071] The user loads the 3D model file of the server through the browser of the client, calls viewModelFile in the browser to render the 3D scene, simultaneously retrieves the data of the annotation object from the server by getAnnotations, calls DivideintotwoLanes to convert the 3D scene coordinates of the annotation object into 2D screen coordinates, and displays the annotation box of the annotation object on the screen of the client, keeping the annotation box in front of the target point. The user can re-edit the content of the annotation box.

[0072] Step S6: Online Inspection and Technical Information Disclosure Management

[0073] After the user confirms, the inspection of the 3D model and the disclosure of technical information are completed. All annotation objects cannot be edited or modified. The user can view the 3D model using a browser on the client.

[0074] Due to their large volume, the working principle of 3D online inspection and technical information disclosure for large-scale installations in the petrochemical industry is based on the comprehensive application of multiple fields such as computer graphics, fluid mechanics, and programming technology. Through steps such as creating 3D pipeline models, simulating manual inspection processes, web 3D rendering and display, etc., various data such as laser scanning and non-destructive testing are integrated, covering all-round information such as pipeline geometric dimensions, internal defects, and material properties. The model is associated with various types of detection data and can be viewed at any time. The 3D model is intuitive and easy to understand, facilitating communication and collaboration among multiple parties such as inspection teams, design units, and construction units. All parties communicate based on the same model, reducing communication barriers caused by differences in understanding, improving communication efficiency and decision-making accuracy. The visual model helps inspection personnel quickly locate problem areas, plan inspection routes, and reduce on-site search time. After the document inspection and technical information disclosure, it has a virtual roaming function, enabling inspection personnel to familiarize themselves with complex pipeline environments in advance, improving on-site inspection speed. At the same time, the 3D model and related detection data are stored in electronic form, occupying little space and being convenient for long-term storage and retrieval. During subsequent maintenance and renovation, historical inspection information can be quickly obtained to trace the pipeline operation status and maintenance history.

[0075] Preferred embodiments of the present invention are shown in the accompanying drawings. However, the present invention can be implemented in many different forms and is not limited to the embodiments described in this specification. On the contrary, these embodiments are provided so that the disclosure of the present invention will be thorough and complete.

Claims

1. A method for realizing inspection disclosure in the petrochemical industry based on a 3D model of a Web page, comprising the following steps: Step S1: Environment setup; Step S2: Model loading; Step S3: Marking of disclosure data; Step S4: Data persistence; Step S5: Re - loading of the model; Step S6: Online inspection disclosure management.

2. The method for realizing the inspection handover in the petrochemical industry based on the 3D model of the Web page according to claim 1, wherein: The said Step S1 includes: setting up a Web development environment on the server and introducing the Three.js library and auxiliary libraries on the client.

3. The method for realizing the inspection handover in the petrochemical industry based on the 3D model of the Web page according to claim 2, wherein: The said Step S2 includes: uploading a 3D model file to the server, loading the 3D model file of the server through the browser of the client, and rendering a 3D scene in the browser.

4. A method for realizing inspection handover in the petrochemical industry based on a 3D model of a web page according to claim 3, characterized in that: The said Step S3 includes: 1) Setting the marking object; 2) Using JavaScript to add listeners for mouse and touch events to the model view area; 3) Marking of disclosure data.

5. The method for realizing the inspection handover in the petrochemical industry based on the 3D model of the Web page according to claim 4, wherein: The said marking object includes object ID, type, coordinates (3D scene coordinates), size, color, and text content.

6. The method for realizing the inspection handover in the petrochemical industry based on the 3D model of the Web page according to claim 5, wherein: The said Step S4 includes: after all markings are completed, uploading the data of the marking object to the server for storage.

7. A method for implementing inspection handover in the petrochemical industry based on a 3D model of a Web page, as claimed in claim 6, wherein: The said Step S5 includes: loading the 3D model file of the server through the browser of the client, rendering a 3D scene in the browser, simultaneously retrieving the data of the marking object from the server, converting the 3D scene coordinates of the marking object into 2D screen coordinates, and displaying the marking box of the marking object on the screen of the client, keeping the marking box in front of the target point.

8. A method for implementing inspection handover in the petrochemical industry based on a 3D model of a web page, as claimed in claim 7, wherein: The said Step S6 includes: after the user confirms, the acceptance of the 3D model and the disclosure of technical materials are completed.

Images