Ship industrial model navigation and label display system

Abstract

The invention discloses a ship industrial model response type multi-view navigation and annotation display system based on a Vue.js framework and a Three.js graphic engine and a construction method, and the system is constructed based on three-dimensional ship model multi-view display of a WebGL technology, an intelligent annotation system and a response type user interface technology. The method is suitable for ship design and manufacturing, engineering cooperation, quality inspection, online training and other scenes requiring multi-angle observation, accurate measurement and detailed labeling of complex assembly structures, and comprehensively solves the key technical problems in ship model Web end display and interaction.

Description

TECHNICAL FIELD

[0001] The application belongs to the field of ship industry CAD visualization, and particularly relates to a ship industry model responsive multi-view navigation and labeling display system. BACKGROUND

[0002] In modern ship industry design, three-dimensional CAD models have become the core tool for design, manufacturing and maintenance. As large and complex engineering equipment, ships have multiple assembly structure levels, containing thousands of components, and complex spatial relationships and assembly constraints between components. In actual engineering applications, technical personnel need to observe the model from multiple perspectives, quickly locate specific assembly units, and accurately label and measure key dimensions.

[0003] The existing ship CAD system mainly has the following technical problems. First, although traditional desktop CAD software is powerful, it has limitations in multi-user collaboration and remote access, and cannot support distributed collaboration based on Web. Second, the existing Web-based three-dimensional display scheme often uses a single view mode, lacks a multi-view linkage mechanism for the characteristics of ship assembly structure, and users cannot quickly navigate and locate in complex assembly levels. Third, traditional Web-based three-dimensional labeling systems mostly use static labeling methods, cannot dynamically generate corresponding dimension labels according to user selection and perspective, and lack intelligent labeling management capabilities.

[0004] In addition, ship assembly models have a high level of hierarchical characteristics, from general assembly to section, from section to component, forming a complex tree structure. Existing technologies lack effective assembly tree visualization and interaction mechanisms, making it difficult for users to navigate and select smoothly in the assembly hierarchy. At the same time, ship models contain a large amount of attribute information, such as material, thickness, assembly relationship, etc. Existing systems lack a responsive attribute display mechanism and cannot dynamically display relevant attribute information according to the user's operation context.

[0005] In terms of measurement and labeling, traditional Web-based three-dimensional display systems usually only support basic distance measurement and lack professional measurement tools for ship industry characteristics, such as locating dimensions, sizing dimensions, and base surface labeling. These professional labels are important for ship manufacturing processes, but are difficult to implement in existing Web-based systems. SUMMARY

[0006] To solve the above technical problems, the application provides a ship industry model responsive multi-view navigation and labeling display system and construction method based on a Vue.js framework and a Three.js graphics engine, which is constructed based on a three-dimensional ship model multi-view display, an intelligent labeling system and a responsive user interface technology of a WebGL technology, is suitable for ship design and manufacturing, engineering collaboration, quality inspection and online training scenes that need to observe, accurately measure and label complex assembly structures from multiple angles, and comprehensively solves key technical problems in ship model Web display and interaction.

[0007] The application aims to realize the following technical solutions, a ship industry model navigation and labeling display system, comprising:

[0008] A multi-view interface construction module constructs a responsive multi-view architecture and displays the multi-view architecture externally, provides interaction, and the multi-view architecture at least includes an assembly directory, a three-dimensional scene and attribute information.

[0009] An assembly tree module constructs a ship assembly tree and outputs the constructed assembly directory to the multi-view interface construction module.

[0010] A three-dimensional scene rendering module performs three-dimensional rendering on a loaded ship industry model, generates a corresponding three-dimensional rendering scene, and outputs the three-dimensional rendering scene to the three-dimensional scene constructed by the multi-view interface module.

[0011] A model loading module loads data of an input ship industry model and outputs the result to the three-dimensional scene rendering module for three-dimensional rendering.

[0012] A labeling module analyzes information in a three-dimensional model and automatically generates engineering labeling.

[0013] A base surface display and view angle control module processes base surface data of a real model, calculates an optimal observation angle, outputs a view of the model with optimal display parameters, and realizes output of different view angle model views through view angle control.

[0014] An attribute information dynamic display module analyzes attributes of a selected model in a three-dimensional scene, generates basic attributes, material information and time information, and outputs the attributes to the attribute information constructed by the multi-view interface module.

[0015] A performance optimization and user experience enhancement module includes a geometry cache pool that stores and caches geometry data and shares the geometry data.

[0016] A system integration and deployment optimization module realizes loose coupling communication among modules through an event bus mechanism, sets a central event distributor for module event listener registration and event publishing.

[0017] The hardware and software architecture of the ship industry model navigation and marking display system comprises:

[0018] The hardware support layer provides a three-dimensional graphics acceleration supported browser environment and an independent graphics processing unit for system operation.

[0019] The browser engine layer converts front-end script calls into underlying graphics instructions, and provides document object model operations, event processing and resource management.

[0020] The graphics rendering layer provides scene structure management, material systems, lighting calculation and post-processing effects. The layer receives model data from the model loading module, responds to instructions from the three-dimensional scene rendering module, and outputs rendering results to the multi-view interface building module.

[0021] The business logic layer includes the assembly tree module, the marking module, the base surface display and view angle control module and the attribute information dynamic display module. The business logic layer implements specific business rules and algorithms of the ship industry, processes user operation logic, and coordinates the interaction of various functional modules.

[0022] The user interface layer is based on the front-end frame built by the multi-view interface building module, and adopts responsive component-based design. The user interface layer includes the main scene display component, the assembly tree navigation component and the attribute information panel component, and realizes communication between components through attribute transmission and event triggering mechanism.

[0023] The data service layer interacts with the back-end interface to obtain assembly relationship data, model file path and dimension marking information.

[0024] Preferably, the marking module specifically comprises:

[0025] The intelligent marking and measuring tool sub-module generates professional engineering markings by analyzing the geometric features of the model using a positioning dimension marking algorithm, and realizes spatial distance measurement through a measuring algorithm.

[0026] The endpoint adsorption and accurate measurement sub-module intelligently identifies geometric feature points on the surface of the model through an endpoint adsorption algorithm for positioning assistance.

[0027] Preferably, the left assembly directory panel in the multi-view interface building module serves as a view container of the assembly tree module. When a node in the assembly tree is triggered, the assembly tree module triggers a node selection event, carrying the unique identifier and name path data of the node. The multi-view interface building module captures the event through an event listening mechanism, and passes the selected information to the three-dimensional scene rendering module and the model loading module for model loading. When the multi-view interface building module detects the expansion and contraction operation of the panel, it notifies the assembly tree module to adjust the visible area of the assembly tree, and triggers a virtual scrolling algorithm to recalculate the rendering range.

[0028] Preferably, the interaction between the assembly tree module and the model loading module is as follows: when a certain assembly node is triggered, the assembly tree module first obtains all the child model information corresponding to the node through the assembly information query service, and passes the model identifier list to the model loading module; the model loading module loads the corresponding model file asynchronously according to the identifier list, and returns the three-dimensional mesh object to the assembly tree module after the loading is completed; the assembly tree module organizes these model objects into the custom data area of the assembly tree, and establishes the mapping relationship between the assembly logic and the rendering object.

[0029] Preferably, the interaction between the model loading module and the three-dimensional scene rendering module is as follows: after the model loading module completes the model file analysis, the mesh object created needs to be added to the scene structure of the three-dimensional scene rendering module; the model loading module calls the assembly tree model loading interface provided by the three-dimensional scene rendering module, and passes the unique identifier and the geometric data of the model; the three-dimensional scene rendering module receives and executes the following processes: first, the mesh object is added to the corresponding grouping container, then the space bounding box of the model is calculated and stored in the custom data area, then the material scheme preset by the model loading module is applied, and finally the overall bounding sphere information of the scene is updated for camera adaptation; the three-dimensional scene rendering module registers an interaction event listener for the newly loaded model, so that it can respond to mouse hovering and clicking operations.

[0030] Preferably, the view angle control mode between the multi-view interface construction module, the three-dimensional scene rendering module and the base surface display and view angle control module is as follows:

[0031] When the view angle switching request is triggered, the multi-view interface construction module passes the request to the three-dimensional scene rendering module, and the three-dimensional scene rendering module calls the view angle calculation algorithm of the base surface display and view angle control module; the base surface display and view angle control module calculates the target camera parameters according to the space bounding box of the currently selected model and the view type; the calculation result drives the camera object of the three-dimensional scene rendering module to smoothly transition to the target state through the animation interpolation engine; during the animation process, the three-dimensional scene rendering module continuously calls the rendering loop, and the display canvas of the multi-view interface construction module displays the transition picture in real time; after the animation is completed, the three-dimensional scene rendering module triggers the view angle change event to notify the multi-view interface construction module to update the state.

[0032] Preferably, the process of generating a label between the three-dimensional scene rendering module and the intelligent labeling and measuring tool submodule is as follows:

[0033] When the labeling generation function of the three-dimensional scene rendering module is called, the function internally calls the labeling algorithm of the intelligent labeling and measurement tool submodule; the intelligent labeling and measurement tool submodule first traverses the selected object to extract the bounding box information of each model, and then calls the database query service to obtain the size definition data of the model; after obtaining the size data, the intelligent labeling and measurement tool submodule calculates the spatial position of the label, including the start and end points of the size line, the length of the extension line, and the position of the text label. The intelligent labeling and measurement tool submodule creates line segment objects and sprite label objects to represent the labeling elements, and returns these objects to the three-dimensional scene rendering module; the three-dimensional scene rendering module adds the labeling objects to the size labeling group of the scene, and updates the maintained labeling object array.

[0034] Preferably, the process of attribute synchronization between the three-dimensional scene rendering module and the attribute information dynamic display module is as follows: when a model in the scene of the three-dimensional scene rendering module is selected, the object selection function of the three-dimensional scene rendering module determines the clicked object through ray casting; the three-dimensional scene rendering module updates the selected object information state variable, and the value of the variable is a data structure containing the model name, unique identifier and attributes; the attribute panel component of the attribute information dynamic display module observes the change of the selected object information through the state listening mechanism; once a change is detected, the attribute information dynamic display module triggers the attribute query process: calls the object attribute acquisition function of the data service, and inputs the model identifier to obtain the complete attribute data; after the data is returned, the formatting engine of the attribute information dynamic display module parses the attributes and classifies them into basic information, material information and time information. The attribute information dynamic display module binds the formatted data to the interface template through the attribute calculation mechanism to realize the dynamic update of the right panel; at the same time, the attribute information dynamic display module controls the display and hidden state of the panel according to the presence or absence of attribute data.

[0035] Preferably, the performance coordination process between the intelligent labeling and measurement tool submodule and the endpoint adsorption and precise measurement submodule is as follows: the performance optimization and user experience enhancement module provides a unified object pool management mechanism; when the intelligent labeling and measurement tool submodule needs to create size labels, it preferentially obtains reusable line segments and label objects from the object pool of the performance optimization and user experience enhancement module to avoid repeated geometry creation; the adsorption point markers of the endpoint adsorption and precise measurement submodule also adopt the object pool strategy, and a batch of sphere and label objects are created in advance and activated and hidden as needed; when the number of labeling objects exceeds the threshold, the view frustum culling algorithm of the performance optimization and user experience enhancement automatically skips the rendering of labeling objects outside the field of view to reduce the load of the graphics processing unit; the performance optimization and user experience enhancement also monitors the rendering frame rate of the scene, and when the frame rate is lower than the performance threshold, automatically reduces the display precision of the label or temporarily hides the distant label.

[0036] Preferably, the data pipeline process between the assembly tree module, the three-dimensional scene rendering module, the model loading module and the system integration and deployment optimization module is as follows: when the system starts, the initialization of the system integration and deployment optimization module loads the configuration file, determines the interface endpoint and resource path; the assembly tree module of the assembly tree module requests assembly relationship data through the interface address configured by the system integration and deployment optimization, and the request is agented by the data service layer of the system integration and deployment optimization, and an identity authentication token and an error retry mechanism are added. After the data is obtained, the assembly tree module constructs the assembly tree structure, and publishes the assembly tree loading completion event through the event bus of the system integration and deployment optimization; the three-dimensional scene rendering module listens to the event, prepares the scene environment and waits for model loading; when the assembly node is selected, the model loader of the model loading module splices a complete resource locator using the model file path prefix configured by the system integration and deployment optimization, downloads the model file through the resource loader of the system integration and deployment optimization module, and the progress information in the loading process is broadcasted through the event bus of the system integration and deployment optimization module, and the progress indicator of the multi-view interface construction module subscribes to the event to update the display in real time.

[0037] Compared with the prior art, the application has the following advantages:

[0038] The ship industry model navigation and labeling display system provided by the application solves a plurality of technical problems in ship model Web end display and interaction through innovative system architecture and algorithm design, and provides strong technical support for digital transformation of the ship industry.

[0039] In terms of user experience, the responsive three-column layout design of the application greatly improves the operation efficiency and experience quality of the user. The left assembly directory panel provides intuitive assembly tree navigation function, the user can quickly locate any assembly unit in thousands of parts, and the navigation efficiency is greatly improved compared with the traditional list browsing mode. The multi-view control function of the central three-dimensional scene enables the user to observe the model from any angle, and the quick switching function of the ISO view and the six views reduces the view angle adjustment time from several click operations to only once. The dynamic display mechanism of the right attribute panel ensures that the user can always obtain information related to the current operation, avoiding the cumbersome process of information searching.

[0040] In terms of technical performance, the asynchronous loading and rendering optimization technology adopted by the application significantly improves the response performance of the system. The loading time of a large-scale ship model is shortened from several minutes of the traditional system to within 30 seconds, the frame rate of model display is maintained above 30FPS, ensuring a smooth interactive experience. The virtual scrolling technology of the assembly tree can handle an assembly structure containing tens of thousands of nodes, the memory occupation is reduced compared with the traditional scheme, effectively solving the performance bottleneck problem of large-scale data.

[0041] In terms of professional functions, the intelligent marking system of the present application provides unprecedented convenience for the shipbuilding industry. The automatic marking function of positioning size and sizing size automates the marking work that originally needs to be added manually, greatly reducing manual errors and repetitive labor. The measurement accuracy of the endpoint adsorption and precise measurement function reaches the millimeter level, meeting the high-precision requirements of shipbuilding. The base surface display and ISO view control function allows users to quickly obtain standard engineering views, improving the efficiency of drawing understanding and process analysis.

[0042] In terms of collaboration and deployment, the architecture design of the present application based on Web technology supports multiple users to access and collaborate simultaneously, breaking through the use limitations of traditional desktop CAD software. The system can be deployed on an enterprise intranet or a cloud platform, supporting remote access and mobile device use, providing a technical foundation for distributed team collaboration. The modular design and configuration management of the system make function customization and system maintenance simple and efficient, allowing for quick adaptation to different enterprise needs.

[0043] In terms of industry application value, the present application is particularly suitable for ship design institutes, shipyards, maritime inspection agencies, and ship maintenance enterprises, and other related agencies. Design institutes can use the system to display and review design schemes, improving the efficiency and quality of design communication. Shipyards can use the system for production process guidance and quality inspection, allowing workers to quickly understand assembly requirements and technical parameters through a Web interface. Maritime inspection agencies can use the system for remote inspection and technical review, reducing the time and cost of on-site inspection. Ship maintenance enterprises can quickly locate faulty components and obtain maintenance information through the system, improving maintenance efficiency and quality.

[0044] In addition, the technical solution of the present application has good scalability and compatibility, and can be integrated with existing PLM systems, ERP systems, and other enterprise information systems, achieving unified data management and collaborative optimization of processes. The system supports the import and export of multiple data formats, ensuring compatibility with existing CAD systems. The open plug-in architecture allows third-party developers to develop specialized function modules based on the system, providing a technical foundation for the continuous development and functional expansion of the system. BRIEF DESCRIPTION OF DRAWINGS

[0045] Figure 1 The overall architecture flowchart of the ship industry model responsive multi-view navigation and marking display system employed in the embodiments of the present application;

[0046] Figure 2 The overall technical architecture integration diagram in the embodiments of the present application;

[0047] Figure 3 The user interface layout diagram in the embodiments of the present application;

[0048] Figure 4 Assembling tree data structure and navigation mechanism in embodiments of the present application;

[0049] Figure 5 Labeling generation flowchart of the intelligent labeling system in embodiments of the present application. DETAILED DESCRIPTION

[0050] The present application will be further described below in conjunction with the drawings and embodiments. It can be understood that the specific embodiments described herein are only used to explain the present application, but not to limit the present application. In addition, it should be noted that, for the convenience of description, only the parts related to the present application are shown in the drawings, not all the structures.

[0051] As Figures 1 to 5 shown, the technical scheme of the present application provides a ship industry model navigation and labeling display system, which is built by Web technology stack, and the recommended development environment includes Node.js 14.15.0 or above version for front-end development and construction, Vue.js 3.x framework for responsive user interface development, Three.js r128 graphics engine for three-dimensional rendering, and modern browser WebGL 2.0 support. In terms of development dependencies, the system uses Vite as a build tool, integrates Axios for HTTP data interaction, GSAP for high-performance animation effects, and various Three.js extension modules. The system includes:

[0052] The multi-view interface construction module constructs a responsive multi-view architecture and displays the multi-view architecture externally, and provides interaction. The multi-view architecture at least includes an assembly catalog, a three-dimensional scene and attribute information. In the embodiment, the multi-view interface adopts a three-column layout structure, and realizes responsive design through CSS Flexbox and Grid layout technologies. The overall architecture is based on a viewport segmentation strategy, and divides the interface into three functional areas. The left assembly catalog panel adopts a fixed width design of 300 pixels, and is always kept on the left side of the viewport through fixed positioning technology. The panel realizes a smooth slide-in and slide-out effect through the translateX conversion of the transform attribute. When the user clicks the title button, the panel will move 100% of the width in the negative direction of the X axis to realize hiding. The panel inside adopts a flexible box layout, and is divided into two main functional areas of assembly selection area and loaded object area. Each area is configured with an independent scroll container, and the overflow-y attribute is set to auto to realize vertical scrolling when the content exceeds. The scroll bar adopts a custom style, and the width is set to 6 pixels to provide moderate visual effect. The central three-dimensional scene area adopts a flexible growth strategy, and occupies the remaining available space through the flex-grow attribute. The area uses relative positioning in combination with percentage width and height settings to ensure that the three-dimensional content can be completely displayed under different screen sizes. The WebGL canvas element inside the scene container is set to 100% for width and height to realize complete filling of the parent container. The right attribute information panel adopts a symmetrical design with the left panel, and also uses a fixed width of 300 pixels and fixed positioning. The display state of the panel is controlled through the responsive data binding mechanism of Vue. When the user selects a model or enables the texture display function, the panel will automatically display the corresponding attribute information. The responsive breakpoint design considers the use scenarios of mobile devices. When the viewport width is less than 768 pixels, the system will automatically adjust the layout parameters, including reducing the size of the control button, changing the arrangement mode of the button, etc., to ensure the usability on small screen devices.

[0053] The assembly tree module constructs a ship assembly tree and outputs the constructed assembly catalog to the multi-view interface construction module. The assembly tree data structure and management algorithm implementation process are as follows:

[0054] The design of the assembly tree data structure fully considers the hierarchical characteristics and complex relationships of ship assembly. Each assembly node contains multiple key attributes, with PartOid as the unique identifier of the node, stored in string format to support various encoding schemes. The PartName attribute stores the complete path name of the node, using the greater-than symbol as the level separator, for example, "H1509>B0>DPH-HULL>A0" represents a four-layer deep assembly path. The node maintains child node references through the children array, forming a tree topology. The level attribute records the depth of the node in the tree, used for interface indentation display and level judgment. The expanded attribute marks the expansion state of the node, cooperating with the lazy loading mechanism to control the loading time of the child nodes. The assembly tree construction algorithm uses a recursive traversal strategy to process the original data. The algorithm first receives the flattened assembly data array obtained from the backend API, each data item containing complete path information. By splitting the path string, the algorithm identifies the hierarchical position and parent-child relationship of each node. The construction process uses the Map data structure as an intermediate storage, with the path string as the key and the node object as the value, to avoid repeated creation of the same node. For each new node, the algorithm looks up its parent node upwards, establishes the parent-child connection if the parent node exists, or creates the necessary intermediate nodes. This bottom-up construction method ensures the integrity of the tree structure. The lazy loading mechanism is the core strategy for performance optimization of the assembly tree. The system initially only loads the root node and the first layer of child nodes, and when the user clicks to expand a certain assembly node, the system triggers the loading of the child data of that node. The loading process obtains the assembly data under the specified path through asynchronous requests, and the request contains a unique request identifier for subsequent polling queries. The system uses a polling mechanism to wait for the backend processing to be completed, with a maximum of 30 attempts, each with a 2-second interval. After obtaining the data, the algorithm updates the local tree structure, inserts the new node under the corresponding parent node, and updates the interface display. This on-demand loading strategy significantly reduces the initial loading time, especially when dealing with large assembly structures containing tens of thousands of nodes.

[0055] A three-dimensional scene rendering module, which performs three-dimensional rendering on the loaded ship industry model, generates a corresponding three-dimensional rendering scene, and outputs to the three-dimensional scene constructed by the multi-view interface module. The construction process of this module is:

[0056] The initialization process of the three-dimensional scene rendering module involves the configuration and optimization of multiple key components. The WebGL renderer is created with anti-aliasing enabled, which reduces the jagged edges of the model through multi-sampling techniques, improving visual quality. The renderer's shadow mapping function uses the PCF soft shadow algorithm, which produces soft shadow edges through multiple sampling and filtering, enhancing the realism of the scene. The output encoding is set to the sRGB color space to ensure color consistency across different display devices. The renderer's pixel ratio is automatically adjusted to accommodate high-DPI displays, providing clearer display on retina screens. The perspective camera's parameter configuration is carefully adjusted to meet the display needs of the ship model. A 75-degree field of view provides a natural perspective effect, neither over-exaggerating the perspective distortion nor revealing enough scene range. The near clipping plane is set to 0.1 units to ensure that there are no clipping issues when observing details at close range. The far clipping plane is set to 5000 units to accommodate the complete display of large ship models. The initial position and orientation of the camera are determined by calculating the model's bounding sphere to ensure that the model is fully displayed in the viewport when initially loaded. The lighting system uses a multi-light source combination strategy to create a professional industrial rendering effect. The ambient light provides basic global illumination, with an intensity of 0.5 to avoid overly dark shadow areas. The hemisphere light simulates the reflected light from the sky and ground, using a white light source for the upper hemisphere and a gray light source for the lower hemisphere to create a natural ambient lighting effect. The main parallel light source simulates sunlight, with a direction from the upper right of the scene, producing a clear shadow effect. The shadow map resolution is set to 2048x2048 pixels, balancing performance and quality. Additional point lights and spotlights are used to emphasize specific areas or create local highlight effects. The trackball controller is implemented using TrackballControls, providing unlimited three-dimensional rotation capabilities. The controller supports standard operations such as mouse drag rotation, scroll zoom, and right-click translation. The damping coefficient is set to 0.05, giving the interaction actions inertia effects and improving the smoothness of the operation. The controller's event listening mechanism can distinguish between drag operations and click operations, avoiding accidental model selection when rotating the view angle. The automatic rotation function can slowly rotate the scene when the user is not operating, which is used for demonstration. The controller also integrates touch event support, allowing scaling and rotation through gesture operations on mobile devices.

[0057] The model loading module loads the input ship industry model data and outputs the results to the three-dimensional scene rendering module for three-dimensional rendering. In the model loading module, the model loading and material management mechanism is implemented as follows:

[0058] The model loading module uses an asynchronous loading architecture to handle OBJ format three-dimensional model files. The loading process is managed uniformly by the LoadingManager, which can track the loading progress of multiple models and provide a unified progress callback. The loading manager maintains a task queue, supporting concurrent loading of multiple model files while limiting the maximum number of concurrent tasks to avoid network congestion. Each loading task is wrapped in a Promise, supporting async / await syntax for process control. The error handling mechanism in the loading process can capture network errors, file format errors, and other abnormal situations, and provide friendly error prompts. The geometry processing stage optimizes and preprocesses the loaded model. First, the bounding box information of the model is calculated, which is used to determine the spatial range and center point of the model. The bounding box data is stored in the model's userData attribute for subsequent use in view control, collision detection, and label positioning. Normal calculation ensures correct lighting effects on the model surface. For models that lack normal information, the system automatically calculates vertex normals. The vertex data of the geometry is optimized for indexing, reducing the storage of duplicate vertices and reducing memory usage. For large models, the system automatically simplifies the geometry to improve rendering performance by reducing the number of polygons. The material assignment system applies appropriate visual effects based on the type and properties of the model. The system predefines multiple material schemes, including specialized materials for ship components such as plates, profiles, knee plates, and standard parts. Plates use a standard material with a deep blue color scheme, with low metallic and moderate roughness to simulate the visual effect of steel plates. Profiles use a green color scheme to distinguish different profile types by adjusting the glossiness parameter. The material system supports PBR rendering processes, accurately controlling the physical properties of materials through parameters such as metallic, roughness, and normal maps. Material instances use a sharing mechanism, with models of the same type sharing material instances to reduce GPU memory usage. The grouping management organizes loaded models into Three.js Group objects based on type and function. Each group corresponds to a specific assembly category or functional module, facilitating batch control of visibility and properties. Group objects maintain their own transformation matrices, allowing for uniform position, rotation, and scaling transformations of the entire group of models. The grouping system also supports LOD level detail control, automatically switching between different precision models based on observation distance to optimize rendering performance.

[0059] The labeling module parses the information in the three-dimensional model and automatically generates engineering labels.

[0060] The base surface display and view control module processes the base surface data of the real model, calculates the optimal observation angle, outputs the view with the best display parameters, and controls the view angle to output different view angles of the model. In this module, base surface display and ISO view control are achieved through the following methods:

[0061] The base surface information management system is responsible for processing and displaying the base surface data of the model. The system obtains the base surface definition data from the backend through a special API interface, including the spatial range of the base surface, the normal vector, the reference point, and related process parameters. The base surface range is defined by the minimum and maximum coordinate values, forming an axis-aligned bounding box. The normal vector determines the orientation of the base surface, which is used to calculate the optimal viewing angle. The system analyzes these data and creates corresponding visual representations, including the base surface boundary wireframe, normal vector indicator, and margin label. The base surface display algorithm achieves clear display of the base surface by calculating the optimal viewing parameters. The algorithm first determines the center point of the base surface as the target point of the camera, and then calculates the camera position based on the normal vector of the base surface to ensure that the camera is facing the base surface. The viewing distance is determined by the diagonal angle of the base surface, which is set to twice the length of the diagonal to ensure that the entire base surface is within the field of view. The upward direction of the camera is dynamically adjusted according to the type of the base surface, using the Y-axis positive direction for horizontal base surfaces. The algorithm also considers the distribution of the model around the base surface and adjusts the camera position as needed to avoid occlusion. The ISO view control uses the mathematical principle of isometric projection to achieve a standard engineering view. Isometric projection requires that the angles of the three coordinate axes on the projection plane be equal, all at 120 degrees. The system achieves this requirement through spherical coordinate system calculations, setting the azimuth angle to 45 degrees and the elevation angle to 35.264 degrees. These angle values are precise values calculated through trigonometric functions, ensuring the production of standard isometric effects. The camera distance is set to three times the radius of the model's bounding sphere, providing an appropriate viewing distance. The view switching animation uses the GSAP animation library to achieve smooth transition effects. The animation system controls three key parameters: camera position, camera orientation, and upward direction vector. The position animation uses a three-dimensional interpolation algorithm to ensure that the camera moves along the shortest path. The orientation animation uses quaternion interpolation to avoid gimbal lock problems. The animation duration is set to 1.5 seconds, with an ease-in-out easing function to provide a natural acceleration and deceleration effect. The animation process continuously updates the rendering to ensure smooth transitions. The system also implements animation queue management to prevent conflicts caused by multiple view switching animations being executed simultaneously.

[0062] The attribute information dynamic display module parses the attributes of the selected model in the three-dimensional scene, generates basic attributes, material information, and time information, and outputs them to the attribute information constructed by the multi-view interface module. The construction process of the attribute information dynamic display module is as follows:

[0063] The responsive design of the attribute panel utilizes Vue's computed properties and watcher mechanisms for dynamic content updates. When a user selects a model in the three-dimensional scene, the system triggers a selection event and passes the model's attribute data. The attribute panel automatically parses this data through computed properties, categorizing it into basic attributes, material information, and temporal information. Each category corresponds to a collapsible section in the panel, and users can expand or collapse specific categories as needed. The dependency tracking mechanism of computed properties ensures that the displayed content automatically updates when the original data changes, eliminating the need for manual refreshing. The attribute formatting engine is responsible for converting raw data into user-friendly display formats. For string-type attributes, the system checks their length and performs intelligent truncation. Strings longer than 20 characters will display ellipses in the overview mode, and users can click to view the complete content. Path-type strings extract the last segment as the display name, and the full path is shown in the detail view. Date and time-type data is converted to localized time formats, including year, month, day, and hour, minute, and second information. Array-type displays summarize the number of elements, and object-type displays are expandable JSON structures. The expandable view function provides a detailed view of complex data. When users click on an expandable attribute field, the system displays the detailed view of that field in the panel. The detailed view uses a monospaced font to maintain the original format of the data. For JSON objects, the system performs formatting, adding appropriate indentation and line breaks to improve readability. The detailed view provides a back button, allowing users to quickly return to the attribute overview. View switching uses a fade-in and fade-out animation effect, providing a smooth interactive experience. The information copy function allows users to quickly export model attribute data. The copy button integrates the Clipboard API, and after clicking, it formats all attribute information into text and copies it to the clipboard. The formatting process adds label descriptions to each attribute, using colons to separate key-value pairs, with each attribute on a separate line. For nested data structures, the system performs flattening to ensure that the copied text can be correctly displayed in other applications. After successful copying, a prompt message is displayed, and if the browser does not support the Clipboard API, the system provides an alternative manual copying solution.

[0064] The performance optimization and user experience enhancement module includes a geometry cache pool to store and share geometry data. The module uses geometry reuse techniques to reduce memory usage by sharing geometry data. The system maintains a geometry cache pool, and when loading a new model, it first checks if there is an identical geometry. The uniqueness of the geometry is determined by calculating the hash value of the vertex data. For identical geometries, the system creates a new Mesh object but reuses the existing geometry instance. This strategy is particularly effective when dealing with a large number of repeated components, such as standard fasteners that may appear thousands of times in a ship model. Geometry reuse not only reduces memory usage but also speeds up model loading, as it avoids repeated geometry parsing processes. The material sharing mechanism uses a similar strategy to optimize material resources. The system predefines a set of standard materials, and selects the appropriate material instance based on the model type and attributes. Models of the same type share the same material object, and only adjust the uniform parameters of the material when necessary. This way reduces the number of GPU state switches and improves the efficiency of rendering batches. The material cache system also implements a reference counting mechanism, which automatically releases the GPU resources occupied by a material when no model uses it. The view frustum culling algorithm reduces rendering load by excluding objects outside the field of view. The algorithm is executed before each frame of rendering, using the projection matrix and view matrix of the camera to construct a frustum. Then it iterates through all the renderable objects in the scene, checking if their bounding boxes intersect with the frustum. Objects that do not intersect are marked as invisible and skipped in the rendering process. The algorithm uses hierarchical bounding volume optimization, first checking the bounding box of the parent node, and if the parent node is completely outside the frustum, skipping the checks of all child nodes. This optimization significantly improves performance when dealing with complex assembly structures. The distance culling algorithm controls rendering details based on observation distance. The system sets visible distance thresholds for different types of objects, and objects beyond the threshold will not be rendered. Small components such as bolts have a visible distance of 50 units, medium components have a visible distance of 200 units, and large structural components are always visible. The algorithm also implements a gradual fade-out effect, gradually reducing the transparency of objects as they approach the visible distance boundary, avoiding sudden visual jumps. Distance culling is used in combination with the LOD system, with objects at a distance using simplified geometry, further optimizing rendering performance. User experience enhancement improves system usability through various visual feedback and interaction optimizations. The loading indicator uses a ring progress bar design to display the model loading progress in real time. The progress calculation takes file size weight into account, with large files having more frequent loading progress updates. The error handling mechanism provides hierarchical error prompts, using different prompt styles based on the severity of the error. Interaction feedback includes button hover effects, click ripple animations, and state transition animations. The system also implements an operation prompt system, displaying brief usage instructions when a user first uses a function.

[0065] The system integration and deployment optimization module realizes loose coupling communication between modules through an event bus mechanism. A central event dispatcher is set up for module event listener registration and event publishing. The module adopts a modular architecture design to divide system functions into independent modules, each responsible for a specific functional area. The scene management module is responsible for the initialization and management of the Three.js scene, the model loading module handles the loading and parsing of OBJ files, the annotation system module implements various engineering annotation functions, and the interaction control module handles user input and interface response. Modules communicate through well-defined interfaces, reducing coupling. Each module has independent state management and error handling mechanisms, and the failure of a single module will not affect the operation of the entire system. The event bus mechanism realizes loose coupling communication between modules. The system implements a central event dispatcher, and modules can register event listeners and publish events. Events are managed using namespaces to avoid conflicts between events from different modules. Event data is transmitted in a standardized message format, including event type, sender identifier, timestamp, and payload data. The event bus supports synchronous and asynchronous event handling, with critical events using synchronous methods to ensure timely response and non-critical events using asynchronous methods to avoid blocking the main thread. The Vite build system improves application loading and running performance through various optimization strategies. Code splitting splits the application into multiple smaller packages, enabling on-demand loading. The Three.js library is packaged as a separate vendor chunk to take advantage of browser caching and reduce repeated downloads. Tool libraries such as lodash and GSAP are packaged as utilities chunk, and business code is packaged as app chunk. Each chunk is configured with a content hash, which automatically updates the file name when the file content changes, ensuring the correctness of the cache. Tree shaking technology removes unused code to reduce the size of the final package. Deployment optimization strategies ensure high-performance operation of the system in production environments. Static resources are distributed through CDNs to accelerate content transmission using global nodes. Model files and texture images are compressed using Gzip, with compression rates exceeding 70%. Image resources are converted to WebP format, reducing file size by 30% while maintaining visual quality. Service Worker implements offline caching strategies to cache critical resources and ensure normal use even when the network is unstable. Preloading strategies load resources that may be used in advance to reduce user waiting time. The configuration file system allows system parameters to be adjusted according to the deployment environment, including API endpoints, caching strategies, and feature switches.

[0066] The hierarchical architecture design is adopted, from bottom to top:

[0067] Hardware support layer: The system runs in a browser environment that supports three-dimensional graphics acceleration, and requires a graphics processing unit with basic three-dimensional graphics rendering capabilities. The recommended configuration is a four-core processor, 8GB of memory or more, and a separate graphics processing unit with hardware acceleration. Mobile devices require a mobile browser environment that supports three-dimensional graphics rendering on the web.

[0068] Browser engine layer: Based on the browser kernel, it uses web standards such as three-dimensional graphics interfaces, two-dimensional canvas interfaces, and network request interfaces. This layer is responsible for converting front-end script calls into underlying graphics instructions and providing document object model operations, event handling, and resource management capabilities.

[0069] Graphics rendering layer: The core is a three-dimensional graphics rendering engine that encapsulates the underlying graphics interface and provides scene structure management, material systems, lighting calculations, and post-processing effects. This layer receives model data from the model loading module, responds to camera control instructions for three-dimensional scene rendering, and outputs rendering results to the display container of the multi-view interface construction module.

[0070] Business logic layer: Contains core business modules such as assembly tree management module, labeling module, base surface display and perspective control module, and attribute information dynamic display module. This layer implements specific business rules and algorithms for the shipbuilding industry, handles user operation logic, and coordinates the interaction of various functional modules.

[0071] User interface layer: Based on front-end framework construction, it uses responsive component-based design. This layer includes main scene display components, assembly tree navigation components, and attribute information panel components, and implements component communication through attribute passing and event triggering mechanisms.

[0072] Data service layer: Responsible for interacting with the backend interface to obtain assembly relationship data, model file paths, and dimension labeling information. It uses asynchronous loading and caching mechanisms to support incremental data loading and local storage optimization.

[0073] In an embodiment of the present application, the labeling module specifically includes:

[0074] The intelligent marking and measuring tool submodule automatically generates professional engineering markings by analyzing the geometric features of the model using a positioning dimension marking algorithm, and realizes spatial distance measurement through a measuring algorithm. The positioning dimension marking algorithm automatically generates professional engineering markings by analyzing the geometric features of the model. The algorithm first extracts the bounding box information of the model to determine the range and main dimensions of the model in three-dimensional space. According to the user-specified marking direction, the algorithm calculates the starting point and ending point position of the dimension line. The offset distance of the dimension line is determined by a dynamic algorithm, considering the model size, observation distance and the position of adjacent markings, to ensure that the markings do not overlap each other. The length of the extension line is calculated using an adaptive algorithm, with a base length of 20w of the model feature size, and minimum and maximum limit values are set. The algorithm detects the occlusion relationship between the marking and the model, and adjusts the marking position or adds a lead line if necessary. The sizing dimension marking algorithm specifically handles special process requirements in shipbuilding, and the system can identify different types of sizing dimensions. The marking algorithm parses the model's attribute data, extracts sizing dimension information and converts it into visual markings. For cumulative dimension marking, the algorithm calculates the cumulative distance between multiple feature points along the specified direction to generate chain dimension markings. The layout algorithm takes into account the specification requirements of engineering drawings to ensure that the arrangement of markings conforms to industry standards. The rendering of marking text uses Canvas texture technology to achieve high-quality text display. The system uses off-screen Canvas technology to render marking text using 2D drawing API, and the text rendering takes into account the device pixel ratio, using higher resolution textures on high DPI screens to ensure sharpness. The generated Canvas is converted into a Three.js texture object and applied to a Sprite material to create a marking label that always faces the camera. The size of the label is dynamically adjusted based on the camera distance to ensure appropriate size at different observation distances. The measuring tool provides accurate spatial distance measurement functionality. The measurement algorithm detects the three-dimensional space point corresponding to the mouse click position using ray casting technology, and the system maintains an array of measurement points to record the user-selected measurement point positions. When two points are selected, the algorithm calculates the Euclidean distance and generates a visual measurement result. The measurement line is drawn using a Line object with a dashed line style to distinguish it from the model edge lines. The distance label is displayed at the midpoint of the line connecting the two points, containing distance values and unit information. The measurement system supports continuous measurement mode, allowing users to continuously add measurement points to form a measurement chain.

[0075] The endpoint adsorption and precision measurement submodule intelligently identifies geometric feature points on the model surface through endpoint adsorption algorithms for positioning assistance. This submodule uses endpoint adsorption algorithms to provide precise positioning assistance by intelligently identifying geometric feature points on the model surface. The core of the algorithm is a feature point detection mechanism based on ray projection. When the mouse moves in the scene, the system will emit a ray from the camera position through the mouse position, detecting the intersection with the model in the scene. After obtaining the intersection, the algorithm searches for the nearest feature point in the local area around the intersection, and the search range is controlled by the adsorption distance threshold, which is set to 0.2 scene units. This value is a good balance between ease of use and accuracy after testing. The vertex search algorithm traverses the vertex buffer data of the model geometry. For each vertex, the algorithm first converts from the local coordinate system to the world coordinate system, applies the model's transformation matrix to obtain the actual spatial position of the vertex, and then calculates the distance between the vertex and the mouse ray intersection point. If the distance is less than the adsorption threshold, the vertex is selected as the candidate adsorption point. When there are multiple candidate points, the algorithm selects the nearest point as the final adsorption target. The vertex type adsorption point uses a sphere as a marker, with a size of 0.05 units, ensuring that it is clearly visible in the scene and does not block the model. The edge midpoint detection algorithm processes the model's topology to identify the midpoints of the edges. The algorithm first obtains the index array of the model, which defines the vertex connection relationship of the triangular face. For each triangle, the algorithm extracts the three edges and calculates the midpoint coordinates of each edge. The midpoint is calculated by averaging the coordinates of the two end points of the edge. Similar to vertex search, the algorithm checks the distance between each midpoint and the mouse position. The midpoints within the adsorption range are marked as a sphere with a size of 0.04 units, slightly smaller than the vertex marker. The coordinate label generation system provides real-time position feedback for the adsorption points. When an adsorption point is checked, the system creates a text label containing coordinate information. The label content includes the type identifier and three-dimensional coordinate values of the point, with two decimal places to balance accuracy and readability. The label is implemented using Sprite technology to ensure that it always faces the camera and is not affected by perspective transformation. The label position is set 0.2 units above the adsorption point to avoid blocking the adsorption point marker. The label background uses a semi-transparent black color, and the text uses white color to ensure good readability in various backgrounds.

[0076] In an embodiment of the present application, the left assembly catalog panel in the multi-view interface construction module is built as a view container of the assembly tree module. When the user clicks a node in the assembly tree, the assembly tree module triggers a node selection event, carrying the unique identifier and name path data of the node. The multi-view interface construction module captures the event through an event listening mechanism, and passes the selected information to the three-dimensional scene rendering module and the model loading module for model loading. Conversely, when the multi-view interface construction module detects the expansion and contraction operation of the panel, it will notify the assembly tree module to adjust the visible area of the assembly tree, triggering a virtual scrolling algorithm to recalculate the rendering range.

[0077] In an embodiment of the present application, the interaction between the assembly tree module and the model loading module is as follows: the model loading module is responsible for the actual geometric data loading. When the user selects an assembly node, the assembly tree module first obtains all the child model information corresponding to the node through the assembly information query service, and passes the model identifier list to the model loading module. The model loading module asynchronously loads the corresponding model file according to the identifier list, and returns the three-dimensional mesh object to the assembly tree module after the loading is completed. The assembly tree module organizes these model objects into the custom data area of the assembly tree, establishing a mapping relationship between the assembly logic and the rendering object.

[0078] In an embodiment of the present application, the interaction between the model loading module and the three-dimensional scene rendering module is as follows: after the model loading module completes the model file parsing, the mesh object created needs to be added to the scene structure of the three-dimensional scene rendering module. The model loading module calls the assembly tree model loading interface provided by the three-dimensional scene rendering module, and passes the unique identifier and geometric data of the model. The three-dimensional scene rendering module receives and executes the following processes: first, the mesh object is added to the corresponding grouping container, then the space bounding box of the model is calculated and stored in the custom data area, then the material scheme preset by the model loading module is applied, and finally the overall bounding sphere information of the scene is updated for camera adaptation. The three-dimensional scene rendering module also registers an interaction event listener for the newly loaded model, so that it can respond to mouse hover and click operations.

[0079] In an embodiment of the present application, the view angle control method between the multi-view interface construction module, the three-dimensional scene rendering module, and the base surface display and view angle control module is as follows:

[0080] When the user clicks the isometric view or standard orthogonal view button in the multi-view interface construction module interface, a view angle switching request is triggered. The multi-view interface construction module passes the request to the scene control module of the three-dimensional scene rendering module, and the three-dimensional scene rendering module calls the view angle calculation algorithm of the base surface display and view angle control module. The base surface display and view angle control module calculates the target camera parameters, including the spatial position, observation direction, and upward direction, according to the spatial bounding box of the currently selected model and the view type. The calculation result drives the camera object of the three-dimensional scene rendering module to smoothly transition to the target state through the animation interpolation engine. During the animation process, the three-dimensional scene rendering module continuously calls the rendering loop, and the display canvas of the multi-view interface construction module displays the transition screen in real time. After the animation is completed, the three-dimensional scene rendering module triggers a view angle change event to notify the multi-view interface construction module to update the button state.

[0081] In an embodiment of the present application, the process of interaction between the three-dimensional scene rendering module and the intelligent labeling and measurement tool submodule to generate labels is as follows:

[0082] When the user clicks the positioning size or sizing size button in the multi-view interface construction module, the multi-view interface construction module passes the selected object array to the three-dimensional scene rendering module through the attribute transmission mechanism. The labeling generation function of the three-dimensional scene rendering module is called, which internally calls the labeling algorithm of the intelligent labeling and measurement tool submodule. The intelligent labeling and measurement tool submodule first traverses the selected objects to extract the bounding box information of each model, and then calls the database query service to obtain the size definition data of the model. After obtaining the size data, the intelligent labeling and measurement tool submodule calculates the spatial position of the label, including the start and end points of the size line, the length of the extension line, and the position of the text label. The intelligent labeling and measurement tool submodule creates line segment objects and sprite label objects to represent the label elements, and returns these objects to the three-dimensional scene rendering module. The three-dimensional scene rendering module adds the label objects to the size label group of the scene, and updates the maintained label object array.

[0083] In this embodiment, the three-dimensional scene rendering module and the endpoint adsorption and precision measurement sub-module interact with the measurement as follows: the endpoint adsorption function (the endpoint adsorption and precision measurement sub-module) depends on the ray projection system and the scene object of the three-dimensional scene rendering module. When the user starts the endpoint adsorption mode, the adsorption detection function of the three-dimensional scene rendering module is continuously called. The function creates a ray projector, emits a ray based on the mouse position, and detects the intersection with the model in the three-dimensional scene rendering module scene. After detecting the intersection, the adsorption algorithm of the endpoint adsorption and precision measurement sub-module traverses the vertex buffer of the intersection model, and calculates the nearest vertex or edge midpoint. After finding the adsorption point, the endpoint adsorption and precision measurement sub-module creates a sphere marker and a coordinate label, and calls the scene object adding function of the three-dimensional scene rendering module to add it to the scene. When the mouse moves to generate a new adsorption point, the endpoint adsorption and precision measurement sub-module first calls the adsorption point removal function to remove the old marker, and then creates a new marker, to ensure that only one adsorption point is displayed in the scene.

[0084] In one embodiment of the application, the three-dimensional scene rendering module and the attribute information dynamic display module interact to perform attribute synchronization as follows: when the user clicks to select a model in the three-dimensional scene rendering module scene, the object selection function of the three-dimensional scene rendering module determines the object clicked through ray projection. The three-dimensional scene rendering module updates the selected object information state variable, and the value of the variable is a data structure containing the model name, unique identifier, and attributes. The attribute panel component of the attribute information dynamic display module observes the change of the selected object information through a state listening mechanism. Once a change is detected, the attribute information dynamic display module triggers the attribute query process: calls the object attribute acquisition function of the data service, and inputs the model identifier to obtain complete attribute data. After the data is returned, the formatting engine of the attribute information dynamic display module parses the attributes, and classifies them into basic information, material information, and time information. The attribute information dynamic display module binds the formatted data to the interface template through a calculation attribute mechanism, to realize dynamic update of the right panel. At the same time, the attribute information dynamic display module controls the display and hidden states of the panel according to the presence or absence of attribute data.

[0085] In an embodiment of the present application, the performance coordination process between the smart labeling and measuring tool sub-module and the endpoint adsorption and precise measurement sub-module is as follows: the labeling system (smart labeling and measuring tool sub-module) and the measuring system (endpoint adsorption and precise measurement sub-module) frequently create and destroy three-dimensional objects during operation, which may affect the rendering performance. The performance optimization module of the performance optimization and user experience enhancement module provides a unified object pool management mechanism. When the smart labeling and measuring tool sub-module needs to create a size label, the reusable line segment and label object is preferentially obtained from the object pool of the performance optimization and user experience enhancement module to avoid repeated geometry creation. The adsorption point label of the endpoint adsorption and precise measurement sub-module also adopts the object pool strategy, and a batch of sphere and label objects are created in advance, and are activated and hidden on demand. When the number of label objects exceeds the threshold, the frustum culling algorithm of the performance optimization and user experience enhancement module automatically skips the rendering of labels outside the field of view, reducing the load of the graphics processing unit. The performance optimization and user experience enhancement module also monitors the rendering frame rate of the scene, and when the frame rate is lower than the performance threshold, the display precision of the label is automatically reduced or the long-distance label is temporarily hidden to ensure the smoothness of the interaction.

[0086] In an embodiment of the present application, the data pipeline process between the assembly tree module, the three-dimensional scene rendering module, the model loading module and the system integration and deployment optimization module is as follows: when the system starts, the initialization module of the system integration and deployment optimization module loads the configuration file to determine the interface endpoint and resource path. The assembly tree module of the assembly tree module requests assembly relationship data through the interface address configured by the system integration and deployment optimization module, and the request is agented by the data service layer of the system integration and deployment optimization module, and the identity authentication token and error retry mechanism are added. After obtaining the data, the assembly tree module constructs the assembly tree structure, and publishes the assembly tree loading completion event through the event bus of the system integration and deployment optimization module. The three-dimensional scene rendering module listens to the event, prepares the scene environment and waits for model loading. When the user selects an assembly node, the model loader of the model loading module splices a complete resource locator using the model file path prefix configured by the system integration and deployment optimization module, and downloads the model file through the resource loader of the system integration and deployment optimization module. The loader of the system integration and deployment optimization module realizes the request queue, concurrency control and breakpoint resume functions to ensure the reliability of large file loading. The progress information in the loading process is broadcasted through the event bus of the system integration and deployment optimization module, and the progress indicator of the multi-view interface construction module subscribes to the event to update the display in real time.

[0087] The data flow path of the ship industry model navigation and labeling display system provided in the technical scheme of the present application is as follows:

[0088] The complete data flow of the user selecting an assembly node is as follows:

[0089] 1. User clicks the assembly tree node in the left panel of the multi-view interface building module;

[0090] 2. The assembly tree module captures the click event, extracts the unique identifier and hierarchical information of the node;

[0091] 3. The assembly tree module calls the assembly information query service to obtain the model list of the identifier, and obtains an array containing model path information;

[0092] 4. The assembly tree module transmits the query result to the parent coordination component of the multi-view interface building module through the event transmission mechanism;

[0093] 5. The parent component updates the selected object state array and triggers the attribute transmission mechanism;

[0094] 6. The three-dimensional scene rendering module obtains the selected object through the attribute receiving mechanism, and calls the assembly tree model loading function;

[0095] 7. The three-dimensional scene rendering module traverses the selected object, and calls the model loading function of the model loading module for each model;

[0096] 8. The model loading module asynchronously loads the model file through the model file parser, and parses the vertex and face data;

[0097] 9. The model loading module creates a mesh object, applies a material, and calculates a bounding box;

[0098] 10. The model loading module returns the mesh object to the three-dimensional scene rendering module, which adds it to the scene structure and registers the interaction;

[0099] 11. The three-dimensional scene rendering module updates the selected object information and triggers the attribute information dynamic display module attribute panel update;

[0100] 12. The attribute information dynamic display module queries the detailed attributes of the model, formats them, and displays them on the right panel;

[0101] 13. The three-dimensional scene rendering module triggers a re-render, and the user sees the loaded model in the display canvas.

[0102] Data flow of label generation:

[0103] 1. User clicks the sizing function button of the multi-view interface building module;

[0104] 2. The multi-view interface building module triggers the assembly label generation function of the three-dimensional scene rendering module through function call;

[0105] 3. The three-dimensional scene rendering module obtains the current selected object list and passes it to the intelligent labeling and measurement tool submodule;

[0106] 4. The smart labeling and measurement tool submodule iterates through each object, extracting name and bounding box information;

[0107] 5. The smart labeling and measurement tool submodule calls the database query service to get dimension definitions by identifier;

[0108] 6. The database service parses the dimension definition data file and matches the corresponding dimension records;

[0109] 7. The smart labeling and measurement tool submodule calculates the labeling position according to the dimension type (horizontal or vertical);

[0110] 8. The smart labeling and measurement tool submodule creates line segment geometry and canvas texture labels;

[0111] 9. The smart labeling and measurement tool submodule adds the labeled objects to the labeling object array of the three-dimensional scene rendering module;

[0112] 10. The three-dimensional scene rendering module iterates through the labeling object array and adds all labels to the scene;

[0113] 11. The performance monitoring of the performance optimization and user experience enhancement module detects the number of labels and enables the level of detail strategy if necessary;

[0114] 12. The three-dimensional scene rendering module performs rendering, and the labels are displayed on the model.

[0115] Control flow of view switching:

[0116] 1. The user drags the standard view switching button in the multi-view interface construction module;

[0117] 2. The multi-view interface construction module sets the drag state flag to true and displays the sub-function buttons;

[0118] 3. The user hovers over the front view button, and the multi-view interface construction module records the hover view type;

[0119] 4. The user releases the mouse, and the multi-view interface construction module calls the view setting function;

[0120] 5. The view setting function notifies the standard view switching function of the three-dimensional scene rendering module;

[0121] 6. The three-dimensional scene rendering module calls the view angle calculation algorithm of the base surface display and view angle control module and inputs the view type;

[0122] 7. The base surface display and view angle control module calculates the target camera position and orientation based on the model bounding box;

[0123] 8. The base surface display and view angle control module returns a parameter object containing position, target point, and upward direction.

[0124] 9. The three-dimensional scene rendering module creates an animation using an animation interpolation engine to interpolate the current camera parameters to the target parameters;

[0125] 10. The three-dimensional scene rendering module invokes the controller synchronization function when the animation is updated frame by frame;

[0126] 11. The rendering loop of the three-dimensional scene rendering module is continuously executed to display a smooth transition effect;

[0127] 12. When the animation is completed, the three-dimensional scene rendering module triggers a perspective change event, and the multi-view interface construction module updates the interface state.

[0128] Real-time feedback flow of endpoint adsorption:

[0129] 1. The user starts the endpoint adsorption function, and the multi-view interface construction module sets the adsorption enabled state to true;

[0130] 2. The mouse movement event listener of the three-dimensional scene rendering module detects that the adsorption mode is activated;

[0131] 3. When the mouse moves, the three-dimensional scene rendering module calls the adsorption detection function of the endpoint adsorption and precision measurement sub-module;

[0132] 4. The endpoint adsorption and precision measurement sub-module creates a ray projector and emits a ray based on the mouse coordinates;

[0133] 5. The endpoint adsorption and precision measurement sub-module detects the intersection of the ray and the model in the scene of the three-dimensional scene rendering module;

[0134] 6. The endpoint adsorption and precision measurement sub-module obtains the geometric vertex position data of the intersection object;

[0135] 7. The endpoint adsorption and precision measurement sub-module traverses the vertex positions and calculates the spatial distance from the intersection;

[0136] 8. The endpoint adsorption and precision measurement sub-module finds the nearest vertex whose distance is less than the threshold value and records its world coordinates;

[0137] 9. The endpoint adsorption and precision measurement sub-module calls the adsorption point removal function to remove the adsorption mark of the previous frame;

[0138] 10. The endpoint adsorption and precision measurement sub-module creates a new sphere mark and a canvas coordinate label;

[0139] 11. The endpoint adsorption and precision measurement sub-module adds the mark object to the scene of the three-dimensional scene rendering module and assigns a special custom data identifier;

[0140] 12. The object manager of the performance optimization and user experience enhancement module adds a mark to the measured object array;

[0141] 13. The next frame rendering of the three-dimensional scene rendering module, the adsorption point and the coordinate label are displayed on the model.

[0142] The state management and event driving of the ship industry model navigation and labeling display system provided in the technical scheme of the application are as follows:

[0143] The system adopts the responsive state management mechanism of the front-end framework. The three-dimensional rendering core module of the three-dimensional scene rendering module is taken as a state container, and a state variable is created through the responsive variable mechanism. These states are exposed to components through an interface, and the components obtain states and functions through a destructuring method. Key states include:

[0144] Selected object information state: current selected object information, which is commonly monitored by the multi-view interface construction module, the three-dimensional scene rendering module and the attribute information dynamic display module

[0145] Labeling function enabled state: labeling function switch, which controls the activation state of the intelligent labeling and measuring tool sub-module;

[0146] Texture display enabled state: texture display switch, which affects the material application logic of the model loading module;

[0147] Precise measurement enabled state: precise measurement mode, which coordinates the interaction behavior of the three-dimensional scene rendering module and the endpoint adsorption and precise measurement sub-module;

[0148] The event driving mechanism is based on the event communication system between components and the custom event bus (system integration and deployment optimization module). The three-dimensional scene rendering module publishes events such as object selection events and assembly tree model loading events through the event sending mechanism, and the application master component receives and coordinates the responses of each sub-component as the event hub. For communication across multiple layers of components, the event bus implemented by the system integration and deployment optimization module provides global publishing and subscribing capabilities. Modules publish events through event publishing interfaces, and other modules register listeners through event subscription interfaces to achieve decoupled communication.

[0149] The dependency relationship and module isolation of the ship industry model navigation and labeling display system provided in the technical scheme of the application are as follows:

[0150] The module dependency adopts a hierarchical design, and the dependency direction is strictly controlled:

[0151] Bottom layer modules (performance optimization and user experience enhancement module, system integration and deployment optimization module): not dependent on other business modules, only dependent on the graphics rendering engine and the front-end framework;

[0152] Intermediate layer modules (assembly tree module, model loading module, base surface display and view angle control module): rely on the data services of the performance optimization and user experience enhancement module and the performance optimization and system integration and deployment optimization module;

[0153] Upper layer modules (three-dimensional scene rendering module, intelligent labeling and measurement tool sub-module, endpoint adsorption and accurate measurement sub-module, attribute information dynamic display module): rely on the data and services provided by the intermediate layer;

[0154] Interface layer (multi-view interface construction module): rely on all modules, serve as an integration point to coordinate global interaction;

[0155] Module isolation is achieved through dependency injection and interface abstraction. The model loading module defines a model loading interface, and the specific implementation can be replaced with a parser of different formats. The intelligent labeling and measurement tool sub-module defines a labeling interface, supporting the extension of new labeling types without affecting existing functions. This design makes the system have good testability and maintainability, and the modification of a single module will not have a chain reaction.

[0156] The above is the preferred embodiment of the present application. It should be noted that for those skilled in the art, without departing from the principles of the present application, a number of improvements and refinements can be made, and these improvements and refinements should also be considered within the scope of protection of the present application.

Claims

1. A ship model navigation and annotation display system, characterized by: The system comprises: A multi-view interface construction module, which constructs a responsive multi-view architecture and displays the multi-view architecture externally, provides interaction, and comprises at least an assembly catalog, a three-dimensional scene, and attribute information; An assembly tree module, which constructs a ship assembly tree and outputs the constructed assembly catalog to the multi-view interface construction module; A three-dimensional scene rendering module, which performs three-dimensional rendering on a loaded ship industry model, generates a corresponding three-dimensional rendering scene, and outputs the three-dimensional rendering scene to the three-dimensional scene constructed by the multi-view interface module; A model loading module, which performs data loading on an input ship industry model and outputs the result to the three-dimensional scene rendering module for three-dimensional rendering; A labeling module, which analyzes information in a three-dimensional model and automatically generates engineering labeling; A base surface display and viewing angle control module, which processes base surface data of a real model, calculates an optimal observation angle, outputs a view with optimal display parameters of the model, and controls the viewing angle to realize output of a model view at different viewing angles; An attribute information dynamic display module, which analyzes attribute information of a selected model in a three-dimensional scene, generates basic attribute information, material information, and time information, and outputs the attribute information to the attribute information constructed by the multi-view interface module; A performance optimization and user experience enhancement module, which comprises a geometry cache pool, stores and caches geometry data in the cache pool, and shares the geometry data. A system integration and deployment optimization module, which realizes loose coupling communication among modules by using an event bus mechanism, and sets a central event distributor for registering event listeners and publishing events of the modules; The software and hardware architecture of the ship industry model navigation and labeling display system comprises: A hardware support layer, which provides a browser environment and an independent graphics processing unit for supporting three-dimensional graphics acceleration for system operation; A browser engine layer, which converts front-end script calls into underlying graphics instructions, and provides document object model operations, event processing, and resource management; A graphics rendering layer, which provides scene structure management, material systems, lighting calculation, and post-processing effects. The layer receives model data of the model loading module, responds to instructions of the three-dimensional scene rendering module, and outputs rendering results to the multi-view interface construction module; A business logic layer, which comprises the assembly tree module, the labeling module, the base surface display and viewing angle control module, and the attribute information dynamic display module. The business logic layer implements specific business rules and algorithms of the ship industry, processes user operation logic, and coordinates interaction of the functional modules; A user interface layer, which is based on a front-end frame constructed by the multi-view interface construction module and adopts a responsive component-based design. The user interface layer comprises a main scene display component, an assembly tree navigation component, and an attribute information panel component, and realizes communication among the components through attribute transmission and event triggering mechanisms; A data service layer, which interacts with a back-end interface to obtain assembly relationship data, model file paths, and dimension labeling information.

2. A marine industry model navigation and annotation display system as claimed in claim 1, characterised in that: The labeling module specifically comprises: An intelligent labeling and measurement tool sub-module, which generates professional engineering labeling by analyzing geometric features of a model through a positioning dimension labeling algorithm, and realizes spatial distance measurement through a measurement algorithm. The end-point adsorption and precision measurement sub-module intelligently identifies geometric feature points on the surface of a model through an end-point adsorption algorithm, and performs positioning assistance.

3. A marine industry model navigation and annotation display system as claimed in claim 2, characterised in that: The left assembly directory panel in the multi-view interface construction module serves as a view container of the assembly tree module; when a node in the assembly tree is triggered, the assembly tree module triggers a node selection event, carrying the unique identifier and name path data of the node; The multi-view interface construction module captures the event through an event listening mechanism, and passes the selected information to the three-dimensional scene rendering module and the model loading module for model loading; when the multi-view interface construction module detects an expansion or contraction operation of the panel, it notifies the assembly tree module to adjust the visible area of the assembly tree, and triggers a virtual scrolling algorithm to recalculate the rendering range.

4. A marine industry model navigation and annotation display system as claimed in claim 3, characterized in that: The interaction relationship between the assembly tree module and the model loading module is as follows: when a certain assembly node is triggered, the assembly tree module first acquires all the sub-model information corresponding to the node through an assembly information query service, and passes the model identifier list to the model loading module; The model loading module asynchronously loads the corresponding model file according to the identifier list, and returns the three-dimensional mesh object to the assembly tree module after the loading is completed; The assembly tree module organizes these model objects into a custom data area of the assembly tree, and establishes a mapping relationship between the assembly logic and the rendering object.

5. A marine industry model navigation and annotation display system as claimed in claim 4, characterised in that: The interaction relationship between the model loading module and the three-dimensional scene rendering module is as follows: after the model loading module completes the model file analysis, the created mesh object needs to be added to the scene structure of the three-dimensional scene rendering module; the model loading module calls the assembly tree model loading interface provided by the three-dimensional scene rendering module, and passes the unique identifier and geometric data of the model; after receiving, the three-dimensional scene rendering module executes the following processes: first, the mesh object is added to the corresponding grouping container, then the space bounding box of the model is calculated and stored in the custom data area, then the material scheme preset by the model loading module is applied, and finally the overall bounding sphere information of the scene is updated for camera adaptation; the three-dimensional scene rendering module registers an interaction event listener for the newly loaded model, so that it can respond to mouse hover and click operations.

6. A marine industry model navigation and annotation display system as claimed in claim 5, characterised in that: The view angle control mode between the multi-view interface construction module, the three-dimensional scene rendering module, and the base surface display and view angle control module is as follows: When the view angle switching request is triggered, the multi-view interface construction module passes the request to the three-dimensional scene rendering module, which calls the view angle calculation algorithm of the base surface display and view angle control module; the base surface display and view angle control module calculates the target camera parameters according to the space bounding box of the currently selected model and the view type; The calculation result drives the camera object of the three-dimensional scene rendering module to smoothly transition to the target state through an animation interpolation engine; during the animation process, the three-dimensional scene rendering module continuously calls the rendering loop, and the display canvas of the multi-view interface construction module displays the transition picture in real time; After the animation is completed, the three-dimensional scene rendering module triggers a view angle change event to notify the multi-view interface construction module to update the state.

7. A marine industry model navigation and annotation display system as claimed in claim 6, characterised in that: The process of generating a label through the interaction between the three-dimensional scene rendering module and the intelligent labeling and measurement tool submodule is as follows: When the labeling generation function of the three-dimensional scene rendering module is called, the function internally calls the labeling algorithm of the intelligent labeling and measuring tool submodule; the intelligent labeling and measuring tool submodule first traverses the selected object to extract the bounding box information of each model, and then calls the database query service to obtain the size definition data of the model; after obtaining the size data, the intelligent labeling and measuring tool submodule calculates the spatial position of the label, including the start and end points of the dimension line, the length of the extension line, and the position of the text label. The intelligent labeling and measuring tool submodule creates line segment objects and sprite label objects to represent the labeling elements, and returns these objects to the three-dimensional scene rendering module; The three-dimensional scene rendering module adds the labeling objects to the dimension labeling group of the scene, and updates the maintained labeling object array.

8. A marine industry model navigation and annotation display system as claimed in claim 7, characterized in that: The attribute synchronization process between the three-dimensional scene rendering module and the attribute information dynamic display module is as follows: when a model in the three-dimensional scene rendering module scene is selected, the object selection function of the three-dimensional scene rendering module determines the clicked object through ray casting; the three-dimensional scene rendering module updates the selected object information state variable, and the value of the variable is a data structure containing the model name, unique identifier and attributes; the attribute panel component of the attribute information dynamic display module observes the change of the selected object information through the state listening mechanism; once the change is detected, the attribute information dynamic display module triggers the attribute query process: calls the object attribute acquisition function of the data service, and inputs the model identifier to obtain the complete attribute data; After the data is returned, the formatting engine of the attribute information dynamic display module parses the attributes, which are classified into basic information, material information and time information. The attribute information dynamic display module binds the formatted data to the interface template through the attribute calculation mechanism, realizes the dynamic update of the right panel, and controls the display and hiding state of the panel according to the presence or absence of attribute data.

9. A marine industry model navigation and annotation display system as claimed in claim 8, characterized in that: The performance coordination process between the intelligent labeling and measuring tool submodule and the endpoint adsorption and accurate measurement submodule is as follows: the performance optimization and user experience enhancement module provides a unified object pool management mechanism; when the intelligent labeling and measuring tool submodule needs to create dimension labels, it preferentially obtains reusable line segments and label objects from the object pool of the performance optimization and user experience enhancement module to avoid repeated geometry creation; the adsorption point markers of the endpoint adsorption and accurate measurement submodule also adopt the object pool strategy, and a batch of sphere and label objects are created in advance, and are activated and hidden on demand; When the number of labeling objects exceeds the threshold, the view frustum culling algorithm of the performance optimization and user experience enhancement automatically skips the rendering of labeling outside the field of view, reducing the load of the graphics processing unit; the performance optimization and user experience enhancement also monitors the rendering frame rate of the scene, and when the frame rate is lower than the performance threshold, automatically reduces the display precision of the label or temporarily hides the long-distance label.

10. A marine industry model navigation and annotation display system as claimed in claim 9, characterized in that: The data pipeline process between the assembly tree module, the three-dimensional scene rendering module, the model loading module and the system integration and deployment optimization module is as follows: when the system starts, the initialization loading configuration file of the system integration and deployment optimization module determines the interface endpoint and the resource path; the assembly tree module of the assembly tree module requests the assembly relationship data through the interface address configured by the system integration and deployment optimization, and the request is agented by the data service layer of the system integration and deployment optimization, and the identity authentication token and the error retry mechanism are added. After the data is obtained, the assembly tree module constructs the assembly tree structure, and publishes the assembly tree loading completion event through the event bus of the system integration and deployment optimization; The three-dimensional scene rendering module listens to the event, prepares the scene environment and waits for the model to be loaded; when the assembly node is selected, the model loader of the model loading module splices the complete resource locator by using the model file path prefix configured by the system integration and deployment optimization, downloads the model file through the resource loader of the system integration and deployment optimization module, and the progress information in the loading process is broadcasted through the event bus of the system integration and deployment optimization module, and the progress indicator of the multi-view interface construction module subscribes to the event to update the display in real time.

Images