Web end interactive spinning simulation three-dimensional visualization system

Abstract

The invention provides a Web end interactive spinning simulation three-dimensional visualization system. The Web end interactive spinning simulation three-dimensional visualization system comprises a client and a server, the client constructs a single page application based on a Vue.js framework to realize a user interaction interface; spinning process parameters input by a user are received in the single page application, and the spinning process parameters are sent to the server in real time; receiving geometric model data and grid model data sent by the server, and performing three-dimensional visualization and rendering in a browser by using a Three.js engine; and the server side is used for generating or dynamically updating geometric model data and grid model data of the spinning model based on the Node.js and Express framework and the spinning process parameters, and feeding back the geometric model data and the grid model data to the client side. The spinning simulation three-dimensional visual display system successfully realizes the functions of spinning simulation three-dimensional visual display, uploading and deleting of various models, model modification and the like, can smoothly run at a Web end without additional plug-ins, and has the characteristics of simplicity and convenience in operation and rich functions.

Description

Technical Field

[0001] This invention relates to the field of digital simulation technology for metal plastic forming, specifically to an interactive 3D visualization system for spinning forming processes based on WebGL. This system provides a visual analysis tool for spinning process development through real-time 3D rendering and dynamic adjustment of process parameters on a browser-based interface. Background Technology

[0002] With the increasing demand for lightweight, high-strength metal components in the aerospace industry, spinning has become a key technology for the precision machining of difficult-to-deform materials such as titanium alloys and high-temperature alloys due to its high material utilization and forming accuracy. Traditional spinning process development mainly relies on trial and error, involving repeated modifications to mold parameters and physical experiments. This approach is not only time-consuming and costly but also struggles to capture the transient changes in metal flow during the forming process. While numerical simulation technology can simulate the spinning process, existing solutions have significant limitations: commercial finite element software such as DEFORM-3D requires high-performance workstations, has complex modeling processes and is computationally time-consuming, and simulation results are typically presented as static cloud maps or data tables, lacking intuitive 3D dynamic visualization; dedicated spinning simulation systems based on OpenGL are platform-dependent, requiring users to install specific plugins or client programs, hindering cross-platform access and collaborative operation.

[0003] In the field of Web 3D visualization technology, existing solutions mostly focus on the display and interaction of simple models, and have not yet effectively addressed the specific needs of spinning process simulation. For example, while WebGL engines such as Three.js support basic model rendering, they lack specific optimizations for the dynamic deformation process of spinning: First, they cannot achieve real-time mapping between process parameters (such as feed ratio and spinneret radius) and mesh deformation, requiring users to resubmit calculations after adjusting parameters; second, their lighting and material systems are simple, making it difficult to represent the unique surface textures and stress gradients of metal plastic deformation; and third, they lack compatibility support for multi-format process models (such as STL tooling models) and simulation data. These problems mean that existing Web visualization solutions can only serve as result viewers in spinning process analysis and cannot support truly interactive process development. Summary of the Invention

[0004] The technical problem solved by this invention is to overcome the shortcomings of the prior art. This invention proposes a web-based interactive three-dimensional visualization system for spinning simulation, which enables process engineers to intuitively explore the impact of spinning parameters on forming quality through a browser without the need for professional simulation knowledge, thus significantly shortening the process development cycle.

[0005] The solution of this invention is: a web-based interactive spinning simulation 3D visualization system, which includes a client and a server;

[0006] The client-side application is a single-page application built on the Vue.js framework, which implements the user interface. The application receives spinning process parameters input by the user and sends them to the server in real time. It also receives geometric model data and mesh model data sent by the server and uses the Three.js engine to perform 3D visualization and rendering in the browser.

[0007] On the server side, based on the Node.js and Express framework, and based on the spinning process parameters, the geometric model data and mesh model data of the spinning model are generated or dynamically updated and fed back to the client.

[0008] Preferably, the client includes a componentized interface unit, a real-time data binding unit, a multi-view real-time linkage unit, and a 3D visualization and rendering engine;

[0009] The component-based interface unit is built on the Vue.js framework, which constructs multiple single-page applications and displays them in a loop. Each single-page application provides a parameter form and a 3D view component. The parameter form is used to facilitate users to input spinning process parameters, including geometric parameters, material parameters, spinning wheel parameters, mandrel parameters, mesh control parameters, and process curve parameters. The 3D view component is used to display the 3D scene, geometric model view, or mesh model view.

[0010] The real-time data binding unit receives the geometric model data and mesh model data of the spinning model from the server, and uses the v-model directive to achieve two-way binding between form parameters and the geometric model view or mesh model view; through DOM manipulation and JavaScript event handling mechanisms, it realizes real-time synchronization and linkage updates between form parameters and 3D views.

[0011] A 3D visualization and rendering engine, based on WebGL and integrated with Three.js, to build, manage, and render 3D scenes, geometric model views, or mesh model views in real time.

[0012] Preferably, the 3D visualization engine includes:

[0013] The scene building and view management unit configures the renderer, camera, and light sources;

[0014] The interactive control unit, which integrates the OrbitControls controller from Three.js, is used to respond to mouse events and implement rotation, translation, and scaling operations on the geometry model view and the mesh model view.

[0015] The view switching unit enables real-time switching between the geometric model view and the mesh model view.

[0016] Preferably, the specific operations of the scene construction and view management unit are as follows:

[0017] The BufferGeometry interface of Three.js converts the server-calculated geometric and mesh model data into WebGL renderable objects, namely, a geometric model view and a mesh model view. Frustum clipping and level of detail strategies are used to optimize the rendering performance of these views. The vertex shader uses the Phong lighting model to calculate per-vertex lighting, and the fragment shader implements a physically based rendering material system, simulating anisotropic specular effects on metallic surfaces through metallicity and roughness. A multi-source mixed lighting environment is configured using ambient light, directional light, and point light sources, with the directional light direction aligned with the rotary feed direction. Point light sources focus on contact areas to enhance detail.

[0018] Preferably, the method for cutting the view cone is as follows:

[0019] Construct a bounding box hierarchy for scene objects and detect the spatial relationship between the model bounding box and the camera frustum. Automatically skip the execution flow of vertex shaders and fragment shaders for displaying mesh objects that are completely outside the frustum. For partially intersecting models, trigger triangle-level clipping. Dynamically update the bounding box hierarchy for dynamically deformable models.

[0020] Preferably, the level of detail strategy is as follows:

[0021] The distance d between the model and the camera is calculated in real time, and then based on a preset threshold vector. The model of detail currently being displayed is dynamically scheduled based on the scheduling function. The model of detail currently being displayed is sent to the componentized interface unit through the WebGL rendering pipeline and displayed on the 3D view function component of the componentized interface unit.

[0022] The scheduling function is:

[0023]

[0024] Where {LOD_1, LOD_2, ..., LOD_n} represents the nth level of detail model; the larger n is, the coarser the corresponding level of detail model. n The preset distance threshold for the nth layer.

[0025] Preferably, the server includes a RESTful API interface, a WebSocket communication channel, a model processing module, and a model data storage unit;

[0026] The RESTful API interface handles geometric parameters and mesh control parameters sent by the client via the HTTPS protocol; the server and client use the RESTful API interface to achieve one-way communication for transmitting geometric model data and mesh model data.

[0027] The WebSocket communication channel maintains a persistent connection, enabling low-latency bidirectional transmission of data for revolver process parameter adjustment and model status update.

[0028] The model processing module creates and updates geometric model data based on the geometric parameters in the resolver process parameters; it performs mesh generation and optimization on the parametric geometric model based on the geometric model data and mesh control parameters, converts the parametric geometric model into a vertex-face structure 3D mesh model, and sends the geometric model data and mesh model data to the client.

[0029] The model data storage unit manages the geometric parameters, geometric model data, and mesh model data of the spinning model.

[0030] Preferably, the model processing module automatically optimizes the mesh distribution based on the material flow characteristics during spinning. In the contact area, the mesh is refined to a precision of 0.1 mm to accurately capture deformation details, while in non-critical areas, a mesh density of 0.5 mm is maintained to ensure computational efficiency.

[0031] Preferably, the client uses IndexedDB to store static model data, which is then stored after gzip compression; the server uses a Redis-based distributed cache to cache the spinning process parameters in memory.

[0032] Preferably, the geometric view uses the Phong shader model to display the appearance features after spinning, and the mesh view is rendered through the vertex shader. When switching views, the level of detail strategy is automatically triggered, the number of model faces is dynamically adjusted according to the current viewing distance, and the Octree space segmentation method is used for progressive loading, prioritizing the display of low-precision models and then gradually refining them.

[0033] The advantages of this invention compared to the prior art are:

[0034] (1) The system innovatively integrates parametric modeling, dynamic mesh updating and industrial-grade rendering technology into the browser environment, so that process engineers can intuitively explore the influence of spinning parameters on forming quality through the browser without professional simulation knowledge, which significantly shortens the process development cycle.

[0035] (2) The present invention realizes real-time bidirectional binding between process parameters and three-dimensional models through the Vue framework. Users can immediately observe the mesh deformation effect when adjusting the wheel trajectory or billet size.

[0036] (3) In order to improve the smoothness of interaction of large-scale grid data, this invention has developed a progressive loading and view frustum clipping method to ensure that real-time rendering of 60FPS can still be achieved in a 10Mbps network environment.

[0037] (4) This invention utilizes the Vue framework structure and WebGL technology and Three.js to achieve a variety of functional improvements. It can run smoothly on the Web without additional plugins, improving work efficiency, user experience and the richness of functions.

[0038] (5) This invention can load a spin-formed model containing 500,000 facets within 1.5 seconds and maintain an interactive frame rate of 60 FPS. It solves the problem of the cumbersome construction process of traditional 3D spin-formed model display systems, making modeling and visualization simpler and more efficient, lowering the threshold for learning and use, and simplifying the construction process;

[0039] (6) This invention enables web-based operation without plugin requirements, improves the universality and user experience of the system, meets the usage needs of different devices, expands the application scope, and enhances cross-platform compatibility and user-friendliness.

[0040] (7) This invention can be applied to the development of titanium alloy casing spinning process for aero-engines, shortening the traditional trial and error cycle from 3 weeks to 8 hours and reducing material waste by 22%.

[0041] (8) This invention provides an efficient and convenient solution for spinning model modeling and large-scale industrial model visualization, supports rapid verification and optimization in related research and practical applications, and promotes the development of industrial simulation technology. Attached Figure Description

[0042] The accompanying drawings, which are included to provide a further understanding of embodiments of the invention and form part of this application, do not constitute a limitation thereof. In the drawings:

[0043] Figure 1 This is a schematic diagram of the system implementation technology of an embodiment of the present invention;

[0044] Figure 2 This is a system architecture diagram of an embodiment of the present invention;

[0045] Figure 3 This is a schematic diagram of the system functional modules according to an embodiment of the present invention;

[0046] Figure 4 This is a diagram showing the interactive interface for visualizing the three-dimensional model in an embodiment of the present invention.

[0047] Figure 5 This is a meshed representation of the spinning simulation process model according to an embodiment of the present invention;

[0048] Figure 6 This is a diagram illustrating the model upload process in an embodiment of the present invention. Detailed Implementation

[0049] The present invention will be further described below with reference to the accompanying drawings and examples. However, it should not be construed as the present invention being limited to the following examples. Any modifications and improvements to the present invention in this field without departing from the concept of the present invention should be included within the scope of protection of the present invention.

[0050] like Figure 1 and Figure 2 As shown, this invention provides a web-based interactive 3D visualization system for spinning simulation. By integrating the Vue framework, WebGL rendering engine, and parametric modeling technology, it achieves real-time simulation and dynamic visualization of the spinning process. This system overcomes the limitations of traditional desktop simulation software, providing a lightweight and highly interactive browser-based solution for process development.

[0051] This invention provides a web-based interactive 3D visualization system and method for spinning process simulation. Through deep integration of the Vue framework and WebGL technology, it achieves parametric modeling, dynamic rendering, and real-time interactive functions for the spinning process. Specifically, it includes the following system architecture and core modules:

[0052] 1. System Architecture Implementation

[0053] This system adopts a client-server (C / S) architecture. The client is built on the Vue.js 2 framework, utilizing its component-based development mode and two-way data binding feature to split the user interface into multiple independent functional modules such as single-page applications and 3D view functional components. This achieves efficient decoupling and reuse of system functions, and the v-model directive enables two-way data binding between process parameters and the 3D view. The server is built using the Node.js runtime environment and the Express framework, constructing an API interface that conforms to the RESTful specification to handle data requests and responses. At the same time, the integration of the WebSocket protocol enables real-time two-way communication between the client and the server, ensuring immediate feedback on model parameter adjustments and interactive operations.

[0054] The main functions of the client and server are:

[0055] The client-side application is a single-page application built on the Vue.js framework, which implements the user interface. The application receives spinning process parameters input by the user and sends them to the server in real time. It also receives geometric model data and mesh model data sent by the server and uses the Three.js engine to perform 3D visualization and rendering in the browser.

[0056] On the server side, based on the Node.js and Express framework, and based on the spinning process parameters, the geometric model data and mesh model data of the spinning model are generated or dynamically updated and fed back to the client.

[0057] The core 3D visualization module integrates the Three.js library for efficient rendering of spun models. This library, based on WebGL hardware acceleration technology, supports 3D graphics processing by utilizing GPU resources. It can load and parse model files in industry-standard formats such as glTF and STL. The glTF format supports complete scene data including materials and animations, while the STL format is suitable for the rapid parsing of triangular mesh models. By utilizing GPU hardware acceleration through WebGL technology, the rendering performance of large-scale 3D models is significantly improved. The Three.js library provides scene graph management functionality, supporting simultaneous loading and hierarchical control of multiple models. The Three.js library also provides a parser module specifically for processing glTF and STL format 3D model files, extracting geometric data such as vertex coordinates, face indices, and normal vectors, and converting them into WebGL-renderable BufferGeometry objects. The material system in the Three.js library supports physically based rendering (PBR) effects, realistically simulating the surface optical properties of metallic materials. The physically based rendering (PBR) material system, combined with ambient light, can accurately reproduce stress stripes and orange peel effects on the metal surface during the spun process.

[0058] In the system architecture, the client securely transmits data with the server via HTTPS. It utilizes three core objects provided by Three.js—Scene, Camera, and Renderer—to construct a visualization environment. The camera supports orthogonal and perspective projection modes and can dynamically adjust the viewing angle. The lighting system employs a combination of ambient light, parallel light, and point light sources, using the Phong shading model to achieve realistic rendering of the surface lighting of the spun model. A single-page application (SPA) architecture is adopted, with Vue Router enabling multi-view switching and Vuex used for state management to ensure data synchronization between functional modules. The component-based development model divides the system's functions into multiple modules, such as parameter input components, model display components, and operation control components. These modules communicate and exchange data via props and events. The v-model directive enables two-way binding between form input fields and the data model; when the user modifies the parameter input value, the system automatically triggers real-time updates and rendering of the 3D model.

[0059] Therefore, the client includes a componentized interface unit, a real-time data binding unit, a multi-view real-time linkage unit, and a 3D visualization and rendering engine;

[0060] The component-based interface unit is built on the Vue.js framework, which constructs multiple single-page applications and displays them in a loop. Each single-page application provides a parameter form and a 3D view component. The parameter form is used to facilitate users to input spinning process parameters, including geometric parameters, material parameters, spinning wheel parameters, mandrel parameters, mesh control parameters, and process curve parameters. The 3D view component is used to display the 3D scene, geometric model view, or mesh model view.

[0061] The real-time data binding unit receives the geometric model data and mesh model data of the spinning model from the server, and uses the v-model directive to achieve two-way binding between form parameters and the geometric model view or mesh model view; through DOM manipulation and JavaScript event handling mechanisms, it realizes real-time synchronization and linkage updates between form parameters and 3D views.

[0062] A 3D visualization and rendering engine, based on WebGL and integrated with Three.js, to build, manage, and render 3D scenes, geometric model views, or mesh model views in real time.

[0063] Preferably, the 3D visualization engine includes:

[0064] The scene building and view management unit configures the renderer, camera, and light sources;

[0065] The interactive control unit, which integrates the OrbitControls controller from Three.js, is used to respond to mouse events and implement rotation, translation, and scaling operations on the geometry model view and the mesh model view.

[0066] The view switching unit enables real-time switching between the geometric model view and the mesh model view.

[0067] The server-side is also equipped with data validation middleware to verify the validity of process parameters submitted by the client, including numerical range checks and format validation. The RESTful API interface uses JSON format for data exchange and supports HTTP request methods such as GET, POST, PUT, and DELETE. A WebSocket communication channel establishes a persistent connection, enabling real-time message push from the server to the client, including calculation progress notifications and anomaly alarms. The server-side deployment uses an Nginx reverse proxy for load balancing, and MongoDB is used to store model parameters and user operation logs, with indexes optimizing query efficiency. The entire system uses Vuex for state management, enabling centralized storage and cross-component sharing of data such as spinning model parameters and view settings, ensuring real-time synchronization between 3D visualization and user input. The system requires a client browser supporting the WebGL 2.0 standard, a server with at least 14 CPU cores and 8GB of memory to ensure computational performance under concurrent user access, and a network bandwidth of at least 10Mbps to ensure fast model file transmission.

[0068] The server includes a RESTful API interface, a WebSocket communication channel, a model processing module, and a model data storage unit;

[0069] The RESTful API interface handles geometric parameters and mesh control parameters sent by the client via the HTTPS protocol; the server and client use the RESTful API interface to achieve one-way communication for transmitting geometric model data and mesh model data.

[0070] The WebSocket communication channel maintains a persistent connection, enabling low-latency bidirectional transmission of data for revolver process parameter adjustment and model status update.

[0071] The model processing module creates and updates geometric model data based on the geometric parameters in the resolver process parameters; it performs mesh generation and optimization on the parametric geometric model based on the geometric model data and mesh control parameters, converts the parametric geometric model into a vertex-face structure 3D mesh model, and sends the geometric model data and mesh model data to the client.

[0072] The model data storage unit manages the geometric parameters, geometric model data, and mesh model data of the spinning model.

[0073] 2. Implementation of Parametric Modeling

[0074] (1) Parameter Input and Calculation: The system has a built-in spinning process parameter database. It receives user-inputted process parameters through a form component built with Vue.js. The pipe parameters include an inner diameter of 20-200mm (accuracy ±0.1mm) and a wall thickness of 1-10mm (accuracy ±0.05mm). The spinning wheel parameters include a corner radius of 2-15mm (accuracy ±0.2mm) and a feed speed of 0.05-0.5mm / s (adjustable step size 0.01mm / s). The mandrel parameters cover key process parameters such as a cone angle of 5-30° (adjustable step size 1°). Figure 4 As shown. After parameter input, the system performs real-time calculations based on the ALE (Arbitrary Lagrangian-Eulerian) mesh adaptive algorithm. This algorithm automatically optimizes the mesh distribution according to the material flow characteristics during spinning. In the contact area, the mesh is refined to 0.1mm accuracy to precisely capture deformation details, while in non-critical areas, a 0.5mm mesh density is maintained to ensure computational efficiency. Simultaneously, an incremental update strategy is employed to reduce computational load, keeping the response time for a single parameter adjustment within 500ms. Figure 5 As shown.

[0075] (2) The system provides dual operation modes of form input and slider adjustment through an interactive parameter input interface, and implements a real-time parameter verification mechanism, including numerical range checking and logical relationship verification (e.g., the inner diameter must be smaller than the outer diameter). When the user adjusts the parameters, the system calculates the material deformation in real time based on the physical model established by finite element theory, and outputs physical quantities such as stress-strain distribution and material flow characteristics using an incremental solution algorithm. In response to the large deformation characteristics unique to the spinning process, the system adopts the ALE (Arbitrary Lagrange-Euler) hybrid mesh adaptive algorithm, implements dynamic mesh refinement processing (local mesh size 0.1-0.5mm) in the contact area between the spinning wheel and the pipe, maintains the basic mesh size (2-5mm) in the non-contact area, and ensures the accuracy of deformation simulation through a local mesh re-division mechanism that is executed once every 0.1 seconds.

[0076] (3) Model generation and rendering: The server-generated geometric model data and mesh model data are converted into WebGL renderable objects, namely, geometric model view and mesh model view, through the BufferGeometry interface of Three.js. This interface directly manipulates the binary buffer to achieve efficient data transmission. The vertex shader uses the Phong lighting model to calculate per-vertex lighting. The fragment shader implements a physically based rendering (PBR) material system. The anisotropic specular effect of the metal surface is simulated by the metallic parameter (adjustable from 0 to 1) and the roughness parameter (adjustable from 0 to 1). The light source system uses ambient light (intensity 0.8), parallel light (intensity 1.2) and point light (intensity 0.5) to configure a multi-light source mixed lighting environment. The direction of the parallel light is consistent with the direction of the rotary wheel feed to highlight the process features, while the point light focuses on the contact area to enhance the detail. The rendering process uses the requestAnimationFrame mechanism to achieve a smooth frame rate of 60FPS, and optimizes the rendering performance through frustum culling and level of detail (LOD) technology. The parametric modeling process described above separates the computation and rendering threads using WebWorker, ensuring that the user interface response time is less than 100ms. The resulting spinning model supports 360° free rotation (rotation sensitivity 0.5° / pixel), smooth scaling (scaling ratio 0.8-5 times), and translation (movement speed 1.5 times the mouse displacement) via mouse interaction. It also provides a one-click switching function between geometric view and mesh view. The mesh view can display engineering information such as node number and unit ID. All parameter settings and view states are uniformly managed through Vuex to ensure data consistency.

[0077] The distance d between the model and the camera is calculated in real time, and then based on a preset threshold vector. The model of detail currently being displayed is dynamically scheduled based on the scheduling function. The model of detail currently being displayed is sent to the componentized interface unit through the WebGL rendering pipeline and displayed on the 3D view function component of the componentized interface unit.

[0078] The scheduling function is:

[0079]

[0080] Where {LOD_1, LOD_2, ..., LOD_n} represents the nth level of detail model; the larger n is, the coarser the corresponding level of detail model. n The preset distance threshold for the nth layer.

[0081] 3. Mesh generation and quality assessment

[0082] (1) Mesh generation: By calling the Gmsh algorithm, high-quality structured or transitional finite element meshes are generated based on geometric parameters and mesh control parameters; and the STEP, IGES, and BREP format CAD files are parsed by the trimesh algorithm and converted into STL format for visualization and simulation.

[0083] This invention employs a size field The controlled adaptive mesh generation method generates 3D mesh model data, as detailed below:

[0084] Mesh control parameters are obtained from the spinning process parameters. These mesh control parameters include the number of subdivisions, the target cell size h_target, the curvature control parameter c_curve, and the proximity control parameter c_prox.

[0085] A mesh size field is constructed based on the target cell size h_target, curvature control parameter c_curve, and proximity control parameter c_prox;

[0086] The grid size field is:

[0087]

[0088] in, For the local radius of curvature, The shortest distance from the grid center to the feature boundary. This refers to the grid size;

[0089] The geometric model is divided according to the number of segments. A spin-formed hexahedral finite element mesh is generated using a mesh size field. In areas with large curvature or small gaps, a transition mesh is automatically used to refine the mesh, resulting in three-dimensional mesh model data.

[0090] (2) Mesh quality control: By adjusting the mesh generation parameters of Gmsh, the control unit size distribution and aspect ratio are controlled to achieve adaptive optimization of the mesh, ensuring the accuracy and efficiency of simulation calculation.

[0091] The methods for quality assessment and optimization of geometric meshes are as follows:

[0092] A portion of the finite element mesh elements of the spun products were randomly selected as the mesh elements to be evaluated.

[0093] The evaluation index of the grid cell to be evaluated is calculated based on a mathematical model, and the evaluation index includes the determinant of the Jacobian matrix;

[0094] Based on the evaluation indicators of the grid units to be evaluated, the unqualified units of the grid units to be evaluated are counted.

[0095] If the determinant det(J) of the Jacobian matrix has a negative value, then the grid cell to be evaluated is unqualified.

[0096] For substandard mesh elements, the quality metric Q(elem) of finite element mesh element i can be gradually improved by performing Laplace smoothing or optimizing the node positions of the finite element mesh elements of the spun product. i ), until the quality error function E of the entire mesh. mesh If the values ​​are below the acceptable threshold, grid data is ultimately obtained.

[0097] Quality error function of the entire mesh Where Q(elem) i Q(elem) is the quality measure of unit i. i ) is the quality measure of unit i;

[0098] If the aspect ratio of a cell exceeds a preset threshold, the cell is considered distorted; Q(elem) i Very low;

[0099] If the aspect ratio of a cell exceeds a preset threshold, the cell is considered distorted; Q(elem) i (Very low.)

[0100] 4. Implementation of dynamic interactive functions

[0101] (1) Viewpoint Control: The system uses the OrbitControls module of Three.js to implement dynamic viewpoint control of the model, supporting precise rotation around the X / Y / Z axes in 0.1° increments (rotation range ±180°), and model translation via mouse drag (sensitivity coefficient 0.8, supporting inertial damping effect to enhance operation smoothness). A scroll wheel scaling mechanism is also used (scaling ratio 1.2, minimum scaling factor 0.5x, maximum scaling factor 10x). During interaction, the system achieves smooth rendering at 60FPS through the requestAnimationFrame mechanism and uses debounce technology to optimize high-frequency operation response, ensuring interaction latency is controlled within 100ms. In addition, the system provides a viewpoint reset function, allowing users to restore the default viewpoint (30° overhead angle, twice the model height from the model center) with a single keystroke or UI button. All viewpoint parameters are managed through Vuex to ensure data synchronization between multiple components.

[0102] (2) View Switching: The system supports one-click switching between geometric view and mesh view. The geometric view uses a Phong shaded model to display the appearance features after spinning, while the mesh view renders an ALE adaptive mesh (mesh density 0.1-0.5mm) and a Von Mises stress cloud map (stress value range 0-500MPa, color mapping uses Jet color spectrum) through a vertex shader. When switching views, the system automatically triggers the LOD (Level of Detail) optimization strategy, dynamically adjusting the number of model faces according to the current viewing distance (loading time of a 500,000-face model is ≤1.5 seconds on a 10Mbps network), and adopts a progressive loading method to prioritize displaying low-precision models and then gradually refine them. In the mesh view, users can select to show / hide node numbers, element IDs, and stress scales through the toolbar. All view status parameters are persistently stored in the browser's IndexedDB, and session recovery is supported.

[0103] (3) Multi-model management: The system supports simultaneous uploading and management of 10 tooling models in glb / STL format (single file ≤ 50MB). Hierarchical model management is achieved through the SceneGraph module of Three.js (supporting parent-child node relationship transformation). Users can adjust the model position by dragging (accuracy ±0.1mm) or input precise coordinates (X / Y / Z axis range ±1000mm) through the attribute panel. Figure 6 As shown. Model visibility control employs instantiation rendering technology, ensuring performance optimization through dual control of material visibility (material.visible) and object visibility (object.visible). The upload interface uses the HTML5 File API to implement multi-file selection and asynchronous upload (supporting breakpoint resumption), and displays the upload progress in real time (progress bar precision 1%). Simultaneously, it uses WebWorker for file format validation (only allowing glb / STL formats) and size limit detection (≤50MB). All uploaded models are stored in the browser's LocalStorage (supporting LRU caching and eviction policies) to ensure offline access capability.

[0104] (4) Data binding and differential update

[0105] A parameter mapping function was established. in It is a vector of form parameters. It is the parameter vector that generates the geometry in Three.js;

[0106] when Changes At that time, through calculation This minimizes the geometric attributes that need to be updated, and notifies the WebGL renderer to perform efficient incremental updates by setting BufferGeometry.attributes.needsUpdate=true.

[0107] 4. Performance optimization implementation

[0108] (1) Progressive Loading: The system uses the Octree spatial segmentation method to progressively load the model. By constructing an octree spatial index structure (8 node depths, maximum number of faces per node 5000), the system dynamically adjusts the level of detail (LOD) of the mesh based on the current viewpoint distance. When the viewpoint distance to the model is more than 200m, the system automatically reduces the number of faces to 10% of the original model (error threshold ±2%), while preserving key feature contours. As the viewpoint distance shortens to within 50m, a medium-precision mesh is gradually loaded (face count restored to 50%). When the viewpoint distance is less than 10m, a full-precision model (100% face count) is loaded. This algorithm performs spatial segmentation calculations in a background thread using WebWorker, avoiding blocking the main thread and ensuring smooth interactive operations (response latency <50ms). During loading, a fade-in / fade-out transition effect (duration 300ms) is used to eliminate visual jarring, and seamless switching is achieved by preloading adjacent spatial nodes (within a radius of 15m). Test data shows that this solution reduces the initial loading time of a 500,000-facet model from 3.2s to 1.5s (under a 10Mbps network environment) and reduces memory usage by 65%.

[0109] (2) View Frustum Clipping: The system integrates the FrustumCulling module of Three.js to achieve efficient view frustum clipping. By constructing the bounding box hierarchy of scene objects (BVH, construction time <5ms), the spatial relationship between the model's bounding box and the camera's view frustum is detected every frame. For mesh objects completely outside the view frustum (accounting for approximately 35-45% of the total), the execution flow of vertex shaders and fragment shaders is automatically skipped for display; for partially intersecting models, precise triangle-level clipping is triggered (using the WebGL Occlusion Query extension). This solution reduces the GPU rendering load by 40% (actual test data) and achieves a stable frame rate of 60FPS (inter-frame fluctuation <±2FPS) on a 14-core, 8GB memory workstation. For dynamically deformable models, the system dynamically updates the bounding box data every 10 frames (update time <1ms), balancing computational accuracy and performance consumption. View frustum clipping and progressive loading work together to improve the rendering efficiency of complex scenes by more than 3 times.

[0110] (3) Caching Mechanism: The static system is designed with a multi-level caching architecture: 1) The client uses IndexedDB to store static model data (maximum capacity 500MB, LRU eviction policy). Model files are stored after gzip compression (compression rate 60-70%), reducing the time for secondary loading by 80% (from 1.2s to 0.25s); 2) The server implements a Redis-based distributed cache (TTL set to 24 hours) to cache frequently accessed spinning process parameters (such as pipe size, spinning wheel feed speed, etc.) in memory, reducing API response time from 120ms to 30ms; 3) The browser caches static resources (model textures, JS scripts, etc.) and achieves permanent caching through content hash fingerprinting (Cache-Control: max-age = 31536000). Tests show that after optimization, the system memory usage is stable at ≤100MB (Chrome memory snapshot data), and no memory leaks occur after 2 hours of continuous operation (memory growth <5MB). The caching module enables offline access through Service Worker, allowing loaded models to continue to be displayed even when the network is interrupted (availability reaches 95%).

[0111] 5. Industrial Application Implementation

[0112] In this embodiment, the system implements the following process flow:

[0113] (1) Process engineers input key parameters through the system interface: initial pipe dimensions (outer diameter Φ150mm±0.1mm, wall thickness 3mm±0.05mm, length 400mm), wheel geometry parameters (corner radius R8mm, rake angle 12°), and motion trajectory (helix angle 25°±0.5°, axial feed ratio 1.2). The system calculates material flow in real time based on an explicit dynamic algorithm (time step 0.1ms), updates the 3D model status every 50ms using the Three.js engine, and synchronously displays the equivalent plastic strain cloud map (color scale range 0-1.5) and thickness distribution (warning threshold ±10%). An adaptive time step technique is used during the calculation process; when a local deformation gradient is detected to exceed a critical value (…),… The system automatically refines the mesh (minimum element size 0.05mm) to ensure that the simulation accuracy of critical areas (such as the flange transition area) meets engineering requirements (error <5%).

[0114] (2) Provide quantitative analysis tools for the mesh view: 1) The thickness analysis module automatically marks areas where the thinning rate exceeds the limit (>15% is marked with a red warning) and generates cross-sectional curves (sampling interval 0.5mm); 2) The stress state monitoring displays Von Mises stress concentration areas (>800MPa triggers a warning).

[0115] (3) Export the process parameter set to the PLM system to complete version management and team collaborative annotation. Practical application shows that the system reduces the traditional trial-and-error cycle from 3 weeks to 8 hours and reduces material waste by 22%.

[0116] The application value of this system is particularly prominent in the aerospace field. Taking the spinning of a titanium alloy casing for a certain type of aero-engine as an example, traditional methods require 2-3 weeks to complete process verification, while this system can complete the entire process analysis from parameter input and dynamic simulation to defect prediction within one day, reducing material waste by 30%. This system can also be seamlessly integrated into enterprise PLM systems, enabling cloud-based collaborative management and version control of process data, providing key technical support for intelligent manufacturing transformation.

[0117] Although the invention has been disclosed above with reference to preferred embodiments, it is not intended to limit the invention. Any person skilled in the art can make possible changes and modifications to the technical solutions of the invention by utilizing the methods and techniques disclosed above without departing from the spirit and scope of the invention. Therefore, any simple modifications, equivalent changes and alterations made to the above embodiments based on the technical essence of the invention without departing from the content of the technical solutions of the invention shall fall within the protection scope of the technical solutions of the invention.

Claims

1. A web-based interactive three-dimensional visualization system for spinning simulation, characterized in that... Includes both client and server; The client-side application is a single-page application built on the Vue.js framework, which implements the user interface. The application receives spinning process parameters input by the user and sends them to the server in real time. It also receives geometric model data and mesh model data sent by the server and uses the Three.js engine to perform 3D visualization and rendering in the browser. On the server side, based on the Node.js and Express framework, and based on the spinning process parameters, the geometric model data and mesh model data of the spinning model are generated or dynamically updated and fed back to the client.

2. The web-based interactive spinning simulation 3D visualization system according to claim 1, characterized in that, The client includes a componentized interface unit, a real-time data binding unit, a multi-view real-time linkage unit, and a 3D visualization and rendering engine; The component-based interface unit is built on the Vue.js framework, which constructs multiple single-page applications and displays them in a loop. Each single-page application provides a parameter form and a 3D view component. The parameter form is used to facilitate users to input spinning process parameters, including geometric parameters, material parameters, spinning wheel parameters, mandrel parameters, mesh control parameters, and process curve parameters. The 3D view component is used to display the 3D scene, geometric model view, or mesh model view. The real-time data binding unit receives the geometric model data and mesh model data of the spinning model from the server, and uses the v-model directive to achieve two-way binding between form parameters and the geometric model view or mesh model view; through DOM manipulation and JavaScript event handling mechanisms, it realizes real-time synchronization and linkage updates between form parameters and 3D views. A 3D visualization and rendering engine, based on WebGL and integrated with Three.js, to build, manage, and render 3D scenes, geometric model views, or mesh model views in real time.

3. The web-based interactive spinning simulation 3D visualization system according to claim 2, characterized in that, The 3D visualization engine includes: The scene building and view management unit configures the renderer, camera, and light sources; The interactive control unit, which integrates the OrbitControls controller from Three.js, is used to respond to mouse events and implement rotation, translation, and scaling operations on the geometry model view and the mesh model view. The view switching unit enables real-time switching between the geometric model view and the mesh model view.

4. The web-based interactive spinning simulation 3D visualization system according to claim 1, characterized in that, The specific operations for scene building and view management units are as follows: The BufferGeometry interface of Three.js converts the server-calculated geometric and mesh model data into WebGL renderable objects, namely, a geometric model view and a mesh model view. Frustum clipping and level of detail strategies are used to optimize the rendering performance of these views. The vertex shader uses the Phong lighting model to calculate per-vertex lighting, and the fragment shader implements a physically based rendering material system, simulating anisotropic specular effects on metallic surfaces through metallicity and roughness. A multi-source mixed lighting environment is configured using ambient light, directional light, and point light sources, with the directional light direction aligned with the rotary feed direction. Point light sources focus on contact areas to enhance detail.

5. The web-based interactive spinning simulation 3D visualization system according to claim 4, characterized in that, The method for cropping the view frustum is as follows: Construct a bounding box hierarchy for scene objects and detect the spatial relationship between the model bounding box and the camera frustum. Automatically skip the execution flow of vertex shaders and fragment shaders for displaying mesh objects that are completely outside the frustum. For partially intersecting models, trigger triangle-level clipping. Dynamically update the bounding box hierarchy for dynamically deformable models.

6. The web-based interactive spinning simulation 3D visualization system according to claim 4, characterized in that, The level of detail strategy is as follows: The distance d between the model and the camera is calculated in real time, and then based on a preset threshold vector. The model of detail currently being displayed is dynamically scheduled based on the scheduling function. The model of detail currently being displayed is sent to the componentized interface unit through the WebGL rendering pipeline and displayed on the 3D view function component of the componentized interface unit. The scheduling function is: Where {LOD_1, LOD_2, ..., LOD_n} represents the nth level of detail model; the larger n is, the coarser the corresponding level of detail model. n The preset distance threshold for the nth layer.

7. The web-based interactive spinning simulation 3D visualization system according to claim 1, characterized in that, The server includes a RESTful API interface, a WebSocket communication channel, a model processing module, and a model data storage unit; The RESTful API interface handles geometric parameters and mesh control parameters sent by the client via the HTTPS protocol; the server and client use the RESTful API interface to achieve one-way communication for transmitting geometric model data and mesh model data. The WebSocket communication channel maintains a persistent connection, enabling low-latency bidirectional transmission of data for revolver process parameter adjustment and model status update. The model processing module creates and updates geometric model data based on the geometric parameters in the resolver process parameters; Based on the geometric model data and mesh control parameters, the parametric geometric model is meshed and optimized, and then converted into a vertex-face structure 3D mesh model. The geometric model data and mesh model data are then sent to the client. The model data storage unit manages the geometric parameters, geometric model data, and mesh model data of the spinning model.

8. The web-based interactive spinning simulation 3D visualization system according to claim 7, characterized in that, The model processing module automatically optimizes the mesh distribution based on the material flow characteristics during spinning. In the contact area, the mesh is refined to 0.1mm precision to accurately capture deformation details, while in non-critical areas, a mesh density of 0.5mm is maintained to ensure computational efficiency.

9. The web-based interactive spinning simulation 3D visualization system according to claim 1, characterized in that, The client uses IndexedDB to store static model data, which is then stored after gzip compression. The server uses a Redis-based distributed cache to cache the spinning process parameters in memory.

10. The web-based interactive spinning simulation 3D visualization system according to claim 1, characterized in that, The geometric view uses the Phong shader model to show the appearance features after spinning. The mesh view is rendered using a vertex shader. When switching views, the level of detail strategy is automatically triggered. The number of model faces is dynamically adjusted according to the current viewing distance, and the Octree space segmentation method is used for progressive loading. The low-precision model is displayed first and then gradually refined.

Images