2.5 D configuration graph dynamic generation method, system, medium, product and equipment

Abstract

The invention belongs to the technical field of cloud configuration. According to the 2.5 D configuration graph dynamic generation method and system, the medium, the product and the equipment, the numerical value change of a configuration model is monitored, a single changed configuration model is determined according to numerical value change information, a method for dynamically modifying the model in a corresponding model template is called according to the type of the single changed configuration model, the single changed configuration model is dynamically modified, and the dynamic generation efficiency of the 2.5 D configuration graph is improved. According to the method, a 2.5 D configuration graph is dynamically generated, so that an Internet of Things user can dynamically generate a 2.5 D configuration model in real time through simple data input, the interaction experience is enhanced, the development efficiency of the 2.5 D model is greatly improved, and the function optimization of an Internet of Things cloud configuration designer can be effectively improved; and the Internet of Things technology is promoted to more intelligently and efficiently serve intelligent manufacturing, automation and intelligent application scenes.

Description

Technical Field

[0001] The present invention relates to the technical field of cloud configuration, and particularly relates to a method for dynamically generating a 2.5D configuration diagram, a system for dynamically generating a 2.5D configuration diagram, a computer device, a computer-readable storage medium, and a computer program product. Background Art

[0002] The statements in this part only provide background art related to the present invention and do not necessarily constitute prior art.

[0003] With the rapid development of Internet of Things technology, device interconnection and interoperability have become possible, and the amount of data has increased sharply. As the core technology of Internet of Things management, cloud configuration realizes remote monitoring, configuration, and management of devices through a cloud platform. With the advancement of intelligent manufacturing, cloud configuration technology is constantly evolving to support more complex data processing, more advanced visualization, and more flexible device interaction to meet the needs of modern industrial automation and intelligence.

[0004] In order to meet the diverse visualization monitoring needs of different scenarios in the Internet of Things field, it is required that the cloud configuration designer can quickly generate 2.5D configurations with low consumption and high degrees of freedom. However, when existing Internet of Things cloud configuration designers draw 2.5D configurations, they mostly use two-dimensional pictures or animated pictures to simulate 2.5D effects using visual effects. When the requirements change, it is necessary to redraw the pictures or even model and then convert them into two-dimensional pictures, and the construction efficiency of 2.5D models is very low. Summary of the Invention

[0005] To solve the deficiencies of the prior art, the present invention provides a method, system, medium, product, and device for dynamically generating a 2.5D configuration diagram, enabling Internet of Things users to dynamically and real-time generate a 2.5D configuration model through simple data input, enhancing the interaction experience and greatly improving the development efficiency of 2.5D models, and effectively improving the functional optimization of Internet of Things cloud configuration designers, promoting the Internet of Things technology to serve intelligent manufacturing, automation, and smart application scenarios more intelligently and efficiently.

[0006] To achieve the above object, the present invention adopts the following technical solutions:

[0007] In a first aspect, the present invention provides a method for dynamically generating a 2.5D configuration diagram.

[0008] A method for dynamically generating a 2.5D configuration diagram includes the following processes:

[0009] Initialize the rendering environment of the three-dimensional model library;

[0010] Create a configuration model based on a model template, create an auxiliary function model based on an auxiliary model template, create additional features based on a feature template, and add the auxiliary function model, additional features, and configuration model to the rendering environment;

[0011] Monitor the numerical changes of the configuration model, determine the single configuration model that has changed based on the numerical change information, call the method for dynamically modifying the model in the corresponding model template according to the type of the changed single configuration model, dynamically modify the changed single configuration model, and dynamically generate a 2.5D configuration diagram.

[0012] As a further limitation of the first aspect of the present invention, use the three.js 3D model library to initialize the rendering environment of the three.js 3D model library, including: initializing the creation of a scene, initializing a camera, and initializing a renderer.

[0013] Initializing the creation of a scene includes: parsing the configuration data in JSON format, and sequentially calling each model construction method to initialize the corresponding single configuration model and add it to the created scene;

[0014] When initializing the creation of a scene, define a method for retrieving a single configuration model, including: matching the key of the changed value in JSON with the identifier of the single configuration model to locate the single configuration model.

[0015] Initializing a camera includes: defining an orthographic camera and a perspective camera for switching viewpoints, and configuring a method for dynamically modifying camera parameters;

[0016] Initializing a renderer includes: defining the anti-aliasing effect of the scene and the background transparency effect, and providing a modifiable frame rate setting interface.

[0017] As a further limitation of the first aspect of the present invention, creating a configuration model based on a model template includes:

[0018] Based on the model template, parse the data related to the configuration model in the configuration data, use the obtained geometric information to construct geometric bodies, use the configuration model color or picture information as a material and add it to the geometric bodies, splice and bind multiple geometric bodies in the form of a Group in the 3D model library to form a single complex model, and create a configuration model according to one or more complex models.

[0019] As a further limitation of the first aspect of the present invention, the method for dynamically modifying the configuration model defined in the model template includes:

[0020] Directly modify the attributes and dynamically modify the attribute values of the geometric body of the configuration model; or, if attribute modification is not supported, select to delete the old configuration model and recreate the configuration model using the newly monitored configuration data.

[0021] As a further limitation of the first aspect of the present invention, the auxiliary model template defines and creates an auxiliary function model, and the auxiliary function model includes: an auxiliary grid model, an auxiliary coordinate axis model, and an auxiliary ray model.

[0022] As a further limitation of the first aspect of the present invention, the additional features include: supporting model dragging and model highlighting in the rendering environment.

[0023] As a further limitation of the first aspect of the present invention, a user input page is built, and the user input page supports that the values input by the user can be passed into the configuration JSON data.

[0024] As a further limitation of the first aspect of the present invention, in the VUE framework, the three.js rendering environment is initialized with the View.vue file as the entry.

[0025] In the second aspect, the present invention provides a 2.5D configuration diagram dynamic generation system.

[0026] A 2.5D configuration diagram dynamic generation system includes:

[0027] A rendering environment initialization unit, configured to: initialize the rendering environment of the three-dimensional model library;

[0028] A model creation unit, configured to: create a configuration model based on the model template, create an auxiliary function model based on the auxiliary model template, create additional features based on the feature template, and add the auxiliary function model, additional features, and configuration model to the rendering environment;

[0029] A configuration diagram dynamic generation unit, configured to: monitor the numerical changes of the configuration model, determine the geometric bodies in the changed configuration model according to the numerical change information, call the method for dynamically modifying the model in the corresponding model template according to the type of the changed configuration model, dynamically modify the single changed configuration model, and dynamically generate a 2.5D configuration diagram.

[0030] In the third aspect, the present invention provides a computer device, including: a processor and a computer-readable storage medium;

[0031] A processor, adapted to execute a computer program;

[0032] The computer-readable storage medium stores a computer program, and when the computer program is executed by the processor, it implements the 2.5D configuration diagram dynamic generation method as described in the first aspect of the present invention.

[0033] Fourthly, the present invention provides a computer-readable storage medium storing a computer program, which is adapted to be loaded and executed by a processor to perform the 2.5D configuration diagram dynamic generation method as described in the first aspect of the present invention.

[0034] Fifthly, the present invention provides a computer program product including a computer program, which when executed by a processor, implements the 2.5D configuration diagram dynamic generation method as described in the first aspect of the present invention.

[0035] Compared with the prior art, the beneficial effects of the present invention are as follows:

[0036] 1. The present invention innovatively proposes a 2.5D configuration diagram dynamic generation strategy, enabling IoT users to dynamically and real-time generate 2.5D configuration models through simple data input, enhancing the interaction experience and greatly improving the development efficiency of 2.5D models. It can effectively improve the functional optimization of IoT cloud configuration designers and promote the more intelligent and efficient service of IoT technology for intelligent manufacturing, automation, and smart application scenarios.

[0037] 2. The present invention innovatively proposes a scenario initialization creation strategy. Using the three.js three-dimensional model construction library based on WebGL as the basis for constructing configuration models, it defines a method for retrieving a single configuration model. By matching the keys of the changed values in JSON with the identifiers of the single configuration model, the single configuration model is located, and then the dynamic modification method in the model template of the single configuration model is called to modify the model, achieving the effect of dynamically adjusting model data.

[0038] 3. The present invention innovatively defines a model template. By parsing the JSON data related to the model in the configuration data, using the parsed geometric information to construct geometric bodies, using the model color or picture information as materials and adding them to the geometric bodies, and adding multiple simple geometric bodies in the form of a Group in three.js for splicing and binding to form a single complex model. Each Group serves as a three-dimensional model object in the three.js three-dimensional model library, achieving the efficient construction of configuration models.

[0039] 4. The present invention innovatively designs a strategy for dynamically updating a configuration model based on monitored data. By monitoring the numerical changes of the configuration model, a single changed configuration model is determined according to the numerical change information. According to the type of the changed single configuration model, a method for dynamically modifying the model in the corresponding model template is called (it can directly modify the attributes and dynamically modify the attribute values of the geometric body of the configuration model; or, if attribute modification is not supported, select to delete the old configuration model and recreate the configuration model using the newly monitored configuration data), and the changed single configuration model is dynamically modified, realizing the dynamic generation of the 2.5D configuration diagram.

[0040] Advantages of additional aspects of the present invention will be partly given in the following description, partly will become obvious from the following description, or will be understood through the practice of the present invention. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] The accompanying drawings forming a part of this specification are used to provide a further understanding of the present invention. The schematic embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation to the present invention.

[0042] Figure 1 It is a schematic flowchart of the method for dynamically generating a 2.5D configuration diagram provided in Embodiment 1 of the present invention;

[0043] Figure 2 It is a schematic flowchart of the method for generating a single configuration model provided in Embodiment 1 of the present invention;

[0044] Figure 3 It is a schematic diagram of the 2.5D configuration construction case (water service scenario) provided in Embodiment 1 of the present invention;

[0045] Figure 4 It is a schematic diagram of a 2.5D configuration diagram dynamic generation system provided in Embodiment 2 of the present invention;

[0046] Figure 5 It is a schematic diagram of a computer device provided in Embodiment 3 of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0047] The present invention will be further described below in conjunction with the accompanying drawings and embodiments.

[0048] It should be noted that the following detailed description is exemplary and is intended to provide further explanation of the present invention. Unless otherwise specified, all technical and scientific terms used herein have the same meaning as commonly understood by those of ordinary skill in the technical field to which the present invention belongs.

[0049] Without conflict, the embodiments in the present invention and the features in the embodiments can be combined with each other.

[0050] Embodiment 1:

[0051] This implementation method proposes a method for dynamically generating 2.5D configuration diagrams. The 2.5D configuration diagram is a graphical representation method that uses two-dimensional elements to display three-dimensional effects and is widely used in fields such as industrial monitoring, data center management, and smart park construction. Although it is essentially a two-dimensional graph, through clever perspective selection and line application, it can display a visual effect close to three-dimensional, can display multiple sides and details of an object in a limited two-dimensional space, is convenient for observers to understand and analyze. Compared with a complete three-dimensional graph, the production cost of the 2.5D configuration diagram is lower, while maintaining a good visual effect.

[0052] In industries such as automobile manufacturing and electronics manufacturing, 2.5D configuration diagrams are widely used in production line monitoring. Through an intuitive graphical interface, operation and maintenance personnel can understand the operating status of the production line in real time and discover and solve problems in a timely manner. When applied to data center management, the 2.5D configuration diagram can help data center managers quickly master information such as equipment layout and operating status, improve management efficiency. By dynamically displaying data such as power load, equipment model, and CPU load, managers can make more accurate decisions. When applied to the construction of smart parks, 2.5D configuration diagrams can be used to display information such as the building layout, energy efficiency management, and parking lot management of the park. By integrating multiple sub-business systems such as buildings, energy efficiency, parking lots, construction, and energy, the integration of park control, perception, monitoring, and analysis is realized.

[0053] Preferably in the present invention, the construction of the 2.5D configuration model is implemented based on the VUE front-end development framework. Among them, the VUE front-end development framework is a progressive JavaScript framework for building user interfaces, a JavaScript framework for building user interfaces. It is built based on standard HTML, CSS, and JavaScript, and provides a declarative and component-based programming model. The core library of VUE only focuses on the view layer and is easy to integrate into existing projects.

[0054] Preferably, in the present invention, a 2.5D configuration model is quickly constructed based on the three.js 3D model library (it can be understood that in some other implementation manners, other similar rendering libraries can also be used to achieve this, which will not be elaborated here). The three.js 3D model library is a JavaScript 3D graphics library based on WebGL. It allows developers to create and display 3D graphic content on web pages. Three.js encapsulates the underlying complexity of WebGL and provides simple and easy-to-use APIs, enabling developers to easily create 3D scenes, models, animations, and interactive effects without having to deeply understand the underlying implementation of WebGL. Developers can use Three.js to create amazing 3D effects. Three.js allows developers to create a scene that contains all 3D elements (Scene). All objects (such as geometries, lights, cameras, etc.) must be added to the scene to be rendered. It provides various camera types such as Perspective Camera and Orthographic Camera to help developers define the part of the scene that the user sees and determine the perspective and range of the rendered image. It supports various geometry types, such as cubes, spheres, cylinders, etc. Developers can create custom 3D geometries.

[0055] In the present invention, preferably, the VUE file is used as the entry point to initialize the three.js rendering environment. Among them, the View.vue file is a VUE single-file component (SFC) used to define a view or component in a VUE application. In this file, complex functions can be implemented by combining the template, script, and style functions of VUE.

[0056] The present invention innovatively adopts a simple data model to drive the rapid generation of a 2.5D dynamic model to meet the requirements of the cloud configuration designer for the rapid customization of non-planar configuration elements. It not only optimizes the construction process of basic configuration elements but also, through a streamlined code architecture, achieves the lightweight of the model and a significant improvement in the rendering speed. The rendering process is optimized by using streamlined logic, reducing resource consumption. In addition, the modular design strategy of the present invention not only enhances the scalability and maintainability of the system but also provides strong support for secondary development, providing an efficient, flexible, and easily extensible foundation for similar application scenarios.

[0057] More specifically, for the method of dynamically generating a 2.5D configuration diagram in this implementation manner, the VUE file is used as the entry point to initialize the three.js rendering environment. A configuration model, an auxiliary function model, and a feature function are created from multiple model templates and added to the rendering environment. The VUE framework listens for data changes and dynamically modifies the model. As Figure 1 shown, it includes the following detailed processes:

[0058] S1: Initialize the rendering environment.

[0059] Before building a model with three.js, it is necessary to initialize and create a scene, initialize a camera, and initialize a renderer. More specifically, in this implementation method, methods for initializing and creating a scene, initializing a camera, and initializing a renderer are defined respectively, and fixed basic features are set.

[0060] S1.1: The method for initializing and creating a scene, specifically including:

[0061] Parse the configuration data in JSON format, and then call each model building method in sequence (use the existing building methods and call them directly. The specific building methods will not be elaborated here), initialize the corresponding single configuration model and add it to the scene. In addition, a method for retrieving a single model is defined in this method. By matching the key of the changed value in JSON with the identifier of the single model, the model can be located, and then the dynamic modification method in the creation template of the configuration model is called to modify the model to achieve the effect of dynamically adjusting the model data.

[0062] JSON (JavaScript Object Notation) in this implementation method is a lightweight data exchange format. The syntax of JSON is derived from JavaScript object notation, but it is a text format independent of the language. JSON uses the key-value pair method to represent data. The key must be a string and be enclosed in double quotes; the value can be of various types, such as string, number, boolean, array, object, or null.

[0063] S1.2: The method for initializing a camera, specifically including:

[0064] Define an orthographic camera and a perspective camera to switch the viewing angle effect, provide a method for dynamically modifying camera parameters (equivalent to modifying the viewing angle direction and distance), support user input or rotation of the scene to customize the preset viewing angle, and use a fixed viewing angle to view the 3D model to achieve a 2.5D effect.

[0065] More specifically, the camera is divided into two types: orthographic and perspective. The configuration of the orthographic camera is determined by the viewport range, zoom ratio, camera position, and viewing direction. The configuration of the perspective camera is determined by the camera aspect ratio, camera position, and viewing direction. When the configuration information and the camera object are passed in, parse the configuration information, determine the camera type, calculate the configuration data required by the camera according to the parsing result, modify the camera parameters, and then call the update method of the camera to make the camera observe with the new configuration.

[0066] S1.3: Method for initializing a renderer, specifically including:

[0067] The anti-aliasing effect of the scene and the background transparency effect are defined. Among them, the anti-aliasing effect of the scene is an image processing technology aimed at reducing or eliminating jagged edges in images and videos, improving the smoothness and realism of the picture; the background transparency effect is a commonly used visual effect in graphic design and web design, which can make the background of an element transparent or semi-transparent, thus showing the underlying content or background.

[0068] This implementation also provides a modifiable frame rate setting interface to meet the animation processing effects under different performance and visual requirements. Here, the frame rate (Frame Rate) refers to the number of frames displayed per second (FPS, Frames Per Second). A high frame rate can provide a smoother animation effect, but it will also increase the computational burden. Therefore, the frame rate setting needs to balance performance and visual effects, and this implementation can achieve frame rate modification through the modifiable frame rate setting interface. For example, it can allow users to specify the number of frames per second, let users know the current frame rate setting, limit the minimum and maximum values of the frame rate to ensure the stability and performance of the system, and so on.

[0069] S2: Define a model template.

[0070] The model template is the core component for creating a specific single configuration model. The method for defining the model template specifically includes:

[0071] Parse the JSON data related to the model in the configuration data, and use the geometric information to construct geometric bodies. Use the model color or picture information as the material and add it to the geometric bodies. Piece and bind multiple simple geometric bodies (such as cuboids, cubes, cylinders, cones, etc.) in the form of a Group in three.js to form a single complex model; in addition, define the method for the geometric body model that can be shared separately into a material library for quickly constructing the same geometric bodies and adding them to the Group. A single Group is used as a 3D model object in the three.js 3D model library, and basic information such as a fixed number, name, and model type is calibrated, that is, the construction of a single complex model is completed.

[0072] More specifically, in this implementation, based on the hierarchical structure of three.js, complex geometric bodies are composed of higher-level Groups formed by multiple simple geometric bodies as Groups, and each simple geometric body may in turn be composed of more refined Objects or Groups. For example, a square pool is composed of four cuboids as the pool walls, a bottom surface, and a water surface. Each simple geometric body can dynamically modify information such as size, material, and position. When a configuration contains multiple complex models, it actually contains an array of multiple model parameter objects. By parsing this array, information such as the size, position, and material of all complex models can be obtained.

[0073] In this implementation, preferably, according to a single model template and a common material library, the geometric properties of the model are constructed. For example, the following steps can be adopted: Select a suitable model template from the common material library, which may be a basic geometric shape (such as a cube, a sphere, etc.) or a complex model file (such as GLTF, OBJ, etc.); Load textures, materials, or other required resources from the common material library; Use the geometry classes of three.js (such as THREE.BoxGeometry, THREE.SphereGeometry, etc.) to define the geometric properties of the model; Apply the loaded materials and textures to the geometry to create a model with visual effects; Add the constructed model to the three.js 3D model library for rendering.

[0074] In this implementation, the model template determines models of the same form. The method of modifying geometric body information is defined in the template. After the model is retrieved and located in the scene, the model template defines the method of modifying the geometric body information in the configuration JSON data, which is divided into two cases: ① The attributes can be directly modified, and the attribute values of the model object are dynamically modified to achieve the change effect; ② Dynamic modification of attributes is not supported. Select to delete the old model and recreate the model with new data.

[0075] For any geometric body that "can directly modify attributes", information such as size, material, and position can be dynamically modified. For some geometric bodies that do not support dynamic modification in three.js, they need to be deleted and rebuilt.

[0076] For example, the cuboid constructed by THREE.BoxGeometry() does not support modification of length, width and height. When the configuration data changes and the length, width and height of the cuboid need to be modified, reconstruction must be selected, while the position, material and other contents are generally not required. The specific strategy selected refers to certain attributes of simple geometric bodies in a complex model, and does not represent the entire model in general. In the modification method of a complex model, it is necessary to provide a method for modifying the attributes of all geometric bodies in the model, which includes both direct modification types and deletion and reconstruction types. Therefore, it is preferred in this implementation to directly modify the geometric bodies that support dynamic modification, and to delete and rebuild the geometric bodies that do not support dynamic modification.

[0077] In this implementation, the auxiliary model template is the core component for creating auxiliary models. The auxiliary model template defines and creates auxiliary grid models, coordinate axis models, and light models. The principle is similar to that of ordinary model templates. It does not need to be bound to a Group. After being added to the configuration scene, it is distinguished by a fixed number.

[0078] The creation process of a single configuration model is as follows: Figure 2 As shown, define geometric object properties → generate simple geometric objects (such as cubes, cuboids, cylinders, cones, troughs, etc.) → combine various geometric objects → generate an overall model (i.e., a single configuration model) → monitor configuration data changes → determine whether the model data has changed. If so, find the geometric object, modify the geometric object, and return to the step of generating the overall model; if not, end.

[0079] S3: Build additional features.

[0080] In this implementation, the configuration scene supports model dragging and model highlighting: ① Model dragging: This solution uses the model dragger of three.js, which locks and drags the model effect in the scene through a fixed number, binds the mouse event to the dragger to listen to the target position information of the model when the dragging ends, and stores the data in the configuration JSON data in reverse, and feeds back to the user editing page at the same time; ② Model highlighting: This solution uses the ray function of three.js, provides the current mouse coordinates and camera object as parameters to the ray creation method to generate a ray entity, passes the scene object to the ray entity to obtain the intersection object (geometry), retrieves the model where the object is located from the superior, and dynamically modifies the model material color.

[0081] S4: Build the user input page.

[0082] This implementation method can rely on different cloud configuration designer products as the basic framework, and the page needs to meet the requirement that the user input values can be passed into the configuration JSON data. For example, optionally, "VUE + Ant Design component library" can be used to build the user interaction page, which includes functions such as model addition, deletion, model name, camera, auxiliary functions, model position, model size, and model material editing, as well as effect display and operation areas. Among them, Ant Design here is an enterprise-level UI design language based on React and a React component library. "VUE + Ant Design component library" is the implementation of Ant Design in the VUE ecosystem. It inherits the design language of Ant Design and the ease of use of Vue.js, providing a set of high-quality and reusable UI components for VUE developers. "VUE + Ant Design component library" provides the same design language as Ant Design, including colors, fonts, spacing, etc., ensuring the consistency of the overall visual effect and user experience of the application; moreover, it provides a rich component library, covering all aspects from basic components (such as buttons, input boxes) to complex components (such as tables, modal boxes), meeting most development needs. Due to the above advantages, this implementation method can quickly and efficiently build the user interaction page.

[0083] S5: Listen for dynamic data modification.

[0084] In this implementation method, the vue.watch() listener in VUE is used to listen for changes in the configuration JSON values, and the change information is passed into the method for retrieving model changes in the rendering scene of step S1 to determine the single configuration model that has changed. Then, according to the type of the single configuration model, the method for dynamically modifying the configuration model in the corresponding model template in step S2 is called, and then the specific single configuration model number is passed in to modify the model.

[0085] Through the above steps, the present invention realizes a method for quickly generating a 2.5D configuration diagram in a configuration designer under the VUE development framework, designs and implements a simple configuration creation case, and the effect is as Figure 3 shown. It is a 2.5D configuration construction case in the water service scenario, including a square water tank and a circular water tank. It can be seen that the generation effect is good and can meet better design requirements.

[0086] Embodiment 2:

[0087] As Figure 4 shown, this implementation method also provides a 2.5D configuration diagram dynamic generation system, including:

[0088] A rendering environment initialization unit, configured to: initialize the rendering environment of the three.js 3D model library;

[0089] A model creation unit, configured to: create a configuration model based on a model template, create an auxiliary function model based on an auxiliary model template, create additional features based on a feature template, and add the auxiliary function model, the additional features, and the configuration model to a rendering environment;

[0090] A configuration diagram dynamic generation unit, configured to: monitor numerical changes of the configuration model, determine the geometric bodies in the changed configuration model according to the numerical change information, call a method for dynamically modifying the model in the corresponding model template according to the type of the changed configuration model, dynamically modify the single changed configuration model, and dynamically generate a 2.5D configuration diagram.

[0091] The specific working methods of the above units can be found in the introduction in Embodiment 1 and will not be elaborated here.

[0092] It can be understood that the above units can be respectively or all combined into one or several other units to form, or a certain one (or some) of the units can be further split into multiple smaller units in terms of function to form, which can achieve the same operation without affecting the realization of the technical effects of the embodiments of the present application. The above units are divided based on logical functions. In actual applications, the function of one unit can also be realized by multiple units, or the functions of multiple units can be realized by one unit. In other embodiments of the present application, the system can also include other units. In actual applications, these functions can also be assisted by other units and can be realized by the cooperation of multiple units.

[0093] According to another embodiment of the present application, the system described in this embodiment can be constructed by running a computer program (including program code) capable of executing the respective steps involved in the corresponding method described in Embodiment 1 on a general computing device such as a computer including processing elements and storage elements such as a central processing unit (CPU), a random access memory (RAM), and a read-only memory (ROM), and the method of Embodiment 1 of the present application can be implemented. The computer program can be recorded on a computer-readable recording medium, for example, and loaded into the above computing device through the computer-readable recording medium and run therein.

[0094] Embodiment 3:

[0095] In view of the 2.5D configuration diagram dynamic generation method provided in Embodiment 1, this implementation provides an electronic device, such as Figure 5As shown, the electronic device includes a processor 1001, a communication interface 1002, and a computer-readable storage medium 1003. Among them, the processor 1001, the communication interface 1002, and the computer-readable storage medium 1003 can be connected through a bus or other means.

[0096] Among them, the communication interface 1002 is used to receive and send data. The computer-readable storage medium 1003 can be stored in the memory of the electronic device. The computer-readable storage medium 1003 is used to store computer programs. The computer programs include program instructions. The processor 1001 is used to execute the program instructions stored in the computer-readable storage medium 1003.

[0097] The processor 1001 (or CPU (Central Processing Unit)) is the computing core and control core of the electronic device, and is suitable for implementing one or more instructions. Specifically, it is suitable for loading and executing one or more instructions to implement the corresponding method flow or corresponding function.

[0098] The processor 1001 is configured to execute the following process: initialize the rendering environment of the three.js 3D model library; create a configuration model based on the model template, create an auxiliary function model based on the auxiliary model template, create additional features based on the feature template, and add the auxiliary function model, additional features, and configuration model to the rendering environment; listen for numerical changes in the configuration model, determine the geometric bodies in the changed configuration model according to the numerical change information, call the method for dynamically modifying the model in the corresponding model template according to the type of the changed configuration model, dynamically modify the changed single configuration model, and dynamically generate a 2.5D configuration diagram.

[0099] Embodiment 4:

[0100] In view of the 2.5D configuration diagram dynamic generation method provided in Embodiment 1 of the present invention, this implementation manner can also provide a computer-readable storage medium (Memory). The computer-readable storage medium is a memory device in the electronic device and is used to store programs and data. It can be understood that the computer-readable storage medium here can include both the built-in storage medium in the electronic device and, of course, the extended storage medium supported by the electronic device. The computer-readable storage medium provides a storage space, and this storage space stores the processing system of the electronic device.

[0101] Also, one or more instructions suitable for being loaded and executed by a processor are stored in this storage space, and these instructions can be one or more computer programs (including program codes). It should be noted that the computer-readable storage medium here can be a high-speed RAM memory or a non-volatile memory, such as at least one disk memory; optionally, it can also be at least one computer-readable storage medium located far from the aforementioned processor.

[0102] In one embodiment, one or more instructions are stored in the computer-readable storage medium; the one or more instructions stored in the computer-readable storage medium are loaded and executed by the processor to implement the following process:

[0103] Initialize the rendering environment of the three.js 3D model library; create a configuration model based on the model template, create an auxiliary function model based on the auxiliary model template, create additional features based on the feature template, and add the auxiliary function model, additional features, and configuration model to the rendering environment; monitor the numerical changes of the configuration model, determine the geometric bodies in the changed configuration model according to the numerical change information, call the method for dynamically modifying the model in the corresponding model template according to the type of the changed configuration model, dynamically modify the single changed configuration model, and dynamically generate a 2.5D configuration diagram.

[0104] Embodiment 5:

[0105] In view of the 2.5D configuration diagram dynamic generation method provided in Embodiment 1 of the present invention, this implementation manner can also provide a computer program product or a computer program. The computer program product or the computer program includes computer instructions, and the computer instructions are stored in a computer-readable storage medium. The processor of the electronic device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the electronic device executes the following process: Initialize the rendering environment of the three.js 3D model library; create a configuration model based on the model template, create an auxiliary function model based on the auxiliary model template, create additional features based on the feature template, and add the auxiliary function model, additional features, and configuration model to the rendering environment; monitor the numerical changes of the configuration model, determine the geometric bodies in the changed configuration model according to the numerical change information, call the method for dynamically modifying the model in the corresponding model template according to the type of the changed configuration model, dynamically modify the single changed configuration model, and dynamically generate a 2.5D configuration diagram.

[0106] Those of ordinary skill in the art can realize that the units and algorithm steps of each example described in combination with the embodiments disclosed in this application can be implemented by electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are executed in a hardware or software manner depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of this application.

[0107] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the processes or functions according to the embodiments of this application are generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions can be stored in a computer-readable storage medium or transmitted through a computer-readable storage medium. The computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center in a wired manner (such as coaxial cable, optical fiber, digital subscriber line (DSL)) or wirelessly (such as infrared, wireless, microwave, etc.). The computer-readable storage medium can be any available medium that the computer can access or a data processing device such as a server or data center that includes one or more integrated available media. The available medium can be a magnetic medium (such as a floppy disk, hard disk, magnetic tape), an optical medium (such as a DVD), or a semiconductor medium (such as a solid state disk (SSD)), etc.

[0108] The above are only the preferred embodiments of the present invention and are not used to limit the present invention. For those skilled in the art, the present invention can have various changes and modifications. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principle of the present invention shall be included within the protection scope of the present invention.

Claims

1. A method for dynamically generating a 2.5D configuration diagram, characterized in that: The process includes: Initialize the rendering environment of the 3D model library; Creating a configuration model based on a model template, creating an auxiliary function model based on an auxiliary model template, creating an additional feature based on a feature template, and adding the auxiliary function model, the additional feature, and the configuration model to a rendering environment; Monitor the value changes of the configuration model, determine the changed single configuration model according to the value change information, call the method for dynamically modifying the model in the corresponding model template according to the type of the changed single configuration model, dynamically modify the changed single configuration model, and dynamically generate a 2.5D configuration diagram.

2. The 2.5D configuration diagram dynamic generation method according to claim 1, characterized in that: The three.js three-dimensional model library is used to initialize the rendering environment of the three.js three-dimensional model library, including: initializing the creation of a scene, initializing a camera, and initializing a renderer.

3. The 2.5D configuration diagram dynamic generation method as claimed in claim 2, characterized in that: Initialize the creation scene, including: parsing the configuration data in JSON format, calling each model construction method in sequence, initializing the corresponding single configuration model and adding it to the creation scene; When the scene is initially created, a method for retrieving a single configuration model is defined, including: matching the key of the changed value in the JSON with the identifier of the single configuration model to locate the single configuration model.

4. The 2.5D configuration diagram dynamic generation method according to claim 2, characterized in that: Initialize the camera, including: define the orthographic camera and the perspective camera for switching viewing angles, and configure a method for dynamically modifying camera parameters; Initialize the renderer, including: defining the scene anti-aliasing effect and background transparency effect, and providing a modifiable frame rate setting interface.

5. The method for dynamically generating a 2.5D configuration diagram according to any one of claims 1 to 4, characterized in that: Create a configuration model based on a model template, including: Based on the model template, the data related to the configuration model in the configuration data is parsed, the geometric information obtained by parsing is used to build the geometric body, the configuration model color or picture information is used as the material to add to the geometric body, and multiple geometric bodies are spliced ​​and bound in the form of Group in the 3D model library to form a single complex model. The configuration model is created based on one or more complex models.

6. The method for dynamically generating a 2.5D configuration diagram according to any one of claims 1 to 4, characterized in that: The method of dynamically modifying the configuration model is defined in the model template, including: Directly modify the attributes to dynamically modify the attribute values ​​of the geometry of the configuration model; or, if attribute modification is not supported, choose to delete the old configuration model and recreate the configuration model using the newly monitored configuration data.

7. A 2.5D configuration diagram dynamic generation system, characterized in that: include: The rendering environment initialization unit is configured to: initialize the rendering environment of the three-dimensional model library; The model creation unit is configured to: create a configuration model based on the model template, create an auxiliary function model based on the auxiliary model template, create an additional feature based on the feature template, and add the auxiliary function model, the additional feature and the configuration model to the rendering environment; The configuration diagram dynamic generation unit is configured to: monitor the numerical changes of the configuration model, determine the geometric body in the changed configuration model according to the numerical change information, call the method for dynamically modifying the model in the corresponding model template according to the type of the changed configuration model, dynamically modify the changed single configuration model, and dynamically generate a 2.5D configuration diagram.

8. A computer device, characterized in that: include: a processor and a computer readable storage medium; a processor adapted to execute a computer program; A computer-readable storage medium, wherein a computer program is stored in the computer-readable storage medium, and when the computer program is executed by the processor, the method for dynamically generating a 2.5D configuration diagram according to any one of claims 1 to 6 is implemented.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and the computer program is suitable for being loaded by a processor and executing the 2.5D configuration diagram dynamic generation method according to any one of claims 1 to 6.

10. A computer program product, characterized in that The computer program product comprises a computer program, and when the computer program is executed by a processor, the method for dynamically generating a 2.5D configuration diagram according to any one of claims 1 to 6 is implemented.

Images