Model display method and device

Abstract

The invention relates to the technical field of model display, and discloses a model display method and device. The method comprises the steps of obtaining a model identifier of a to-be-displayed target model in a current page; obtaining a target model according to the model identifier and a preset global document object model; the target model is rendered and loaded through a preset 3D rendering engine, and the 3D rendering engine carries out rendering in a rendering container of the global document object model. According to the method and the device, the technical problem that the user experience is affected due to the fact that a model instance cannot be reused across components or routed in traditional Web3D development, so that the memory occupation is too high, and the WebGL context is easy to lose on low-performance equipment is solved.

Description

Technical Field

[0001] This application relates to the field of model display technology, and more specifically, to a model display method and apparatus. Background Technology

[0002] With the maturity of WebGL (Web Graphics Library) and related graphics libraries (such as Three.js), 3D robot simulation on the browser side has become possible and is increasingly popular. Currently, embedding and displaying the robot's 3D model (Three-Dimensional Model) in different pages or components has become a basic functional requirement in robot simulation web applications.

[0003] However, this application model faces a significant technical challenge: when a single-page application (SPA) or a complex website contains multiple views that need to display 3D models, the model resources loaded by each view continuously consume a large amount of graphics memory and system memory. If not properly managed, the rapid accumulation of memory can become a major bottleneck to system performance. Especially in large, complex projects or on performance-constrained devices, it is very easy to exceed the web browser's memory limit, leading to WebGL context lost errors, ultimately causing serious problems such as 3D model rendering failure and page crashes.

[0004] To mitigate this issue, common techniques include automatically reloading the model when the WebGL context is lost, or providing a refresh button for users to manually refresh and recreate the model. However, these methods make the webpage error readily apparent to users, harming both user experience and system reliability.

[0005] There is currently no effective solution to the above problems. Summary of the Invention

[0006] This application provides a model display method and apparatus to at least solve the technical problem that in traditional Web3D development, model instances cannot be reused across components or routes, resulting in excessive memory consumption, which in turn can easily lead to WebGL context loss on low-performance devices, thus affecting the user experience.

[0007] According to one aspect of the embodiments of this application, a model display method is provided, including:

[0008] Get the model identifier of the target model to be displayed on the current page;

[0009] A model loading request is sent to a preset global document object model based on the model identifier to obtain the target model;

[0010] The target model is rendered and loaded using a preset 3D rendering engine, wherein the 3D rendering engine renders the model within the rendering container of the global document object model.

[0011] Optionally, sending a model loading request to a preset global document object model based on the model identifier to obtain the target model includes:

[0012] The model identifier is sent to the global document object model, wherein the global document object model is constructed during the page initialization phase;

[0013] The target model is searched from a preset model library using the global document object model.

[0014] Optionally, the construction of the global document object model includes:

[0015] During the page initialization phase, DIV elements are created as rendering containers for the global document object model;

[0016] The rendering container is configured, including determining that the style of the rendering container inherits the style of its parent element.

[0017] Optionally, the target model is rendered and loaded using a preset 3D rendering engine, including:

[0018] The loading location of the target model is determined based on the context of the current page;

[0019] The rendering container is moved to the target container corresponding to the loading position, and the target model is rendered and loaded for display, wherein the target container is used to display the target model.

[0020] Optionally, determining the loading location of the target model based on the context of the current page includes:

[0021] The Vue computed property is determined based on the routing path of the current page, wherein the Vue computed property is used to represent the container identifier of the display container;

[0022] Listen for changes in the properties of the Vue computed properties using Vue's listeners;

[0023] The target container is determined based on the changes in the stated attributes.

[0024] Optionally, the method further includes:

[0025] During the rendering process of the 3D rendering engine, the size change of the rendering container where the 3D rendering engine is located is monitored;

[0026] If the size of the rendering container is zero, the rendering of the target model is paused; if the size of the rendering container is non-zero, the target model is rendered.

[0027] Optionally, if the current page does not need to display the target model, the method further includes:

[0028] Using the document object model tree, the rendering container is moved to a preset hidden state container;

[0029] The style of the hidden state container includes a first width and a first height, wherein the first width is less than a first width threshold and the first height is less than a first height threshold.

[0030] Optionally, the method further includes:

[0031] Configure the hidden state container to hide its display content by hiding overflow content and clearing floats.

[0032] Optionally, the method further includes:

[0033] If the current page no longer needs to display the target model, the target model is returned to the model library through the global document object model.

[0034] According to another aspect of the embodiments of this application, a model display device is also provided, comprising:

[0035] The first acquisition module is configured to acquire the model identifier of the target model to be displayed on the current page;

[0036] The second acquisition module is configured to send a model loading request to a preset global document object model based on the model identifier in order to acquire the target model;

[0037] The rendering module is configured to render and load the target model using a preset 3D rendering engine, wherein the 3D rendering engine renders the model within the rendering container of the global document object model.

[0038] According to another aspect of the embodiments of this application, a non-volatile storage medium is also provided, the non-volatile storage medium including a stored program, wherein, when the program is running, it controls the device where the non-volatile storage medium is located to execute any of the above-described model display methods.

[0039] According to another aspect of the embodiments of this application, a computer device is also provided, the computer device including a processor, the processor being configured to run a program, wherein the program executes any of the model display methods described above during runtime.

[0040] According to another aspect of the embodiments of this application, a computer program product is also provided, including a computer program that, when executed by a processor, implements any of the model display methods described above.

[0041] In this embodiment, a global document object model is established for unified resource management. By assigning a unique identifier to each model and reusing the same model instance across different routes or components, the number of model instances in memory is significantly reduced. This results in a significant reduction in memory usage and improved page switching smoothness. It also solves the technical problem that in traditional Web3D development, model instances cannot be reused across components or routes, leading to excessive memory usage and potentially causing WebGL context loss on low-performance devices, thus affecting the user experience. Attached Figure Description

[0042] The accompanying drawings, which are included to provide a further understanding of this application and form part of this application, illustrate exemplary embodiments and are used to explain this application, but do not constitute an undue limitation of this application. In the drawings:

[0043] Figure 1 A hardware structure block diagram of a computer terminal for implementing a model display method is shown;

[0044] Figure 2 This is a flowchart illustrating the model display method provided in the embodiments of this application;

[0045] Figure 3 This is a structural block diagram of a model display device provided according to an optional embodiment of this application. Detailed Implementation

[0046] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present application, and not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort should fall within the scope of protection of the present application.

[0047] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0048] First, some nouns or terms that appear in the description of the embodiments of this application shall be interpreted as follows:

[0049] According to an embodiment of this application, a method embodiment for model loading is provided. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0050] The method embodiment provided in Embodiment 1 of this application can be executed on a mobile terminal, computer terminal, or similar computing device. Figure 1 A hardware structure block diagram of a computer terminal for implementing a model display method is shown. Figure 1 As shown, the computer terminal 10 may include one or more processors (shown as 102a, 102b, ..., 102n in the figure) (the processor may include, but is not limited to, a microprocessor MCU or a programmable logic device FPGA, etc.) and a memory 104 for storing data. In addition, it may also include: a display, an input / output interface (I / O interface), a universal serial bus (USB) port (which may be included as one of the ports of a BUS bus), a network interface, a power supply, and / or a camera. Those skilled in the art will understand that... Figure 1 The structure shown is for illustrative purposes only and does not limit the structure of the aforementioned electronic device. For example, computer terminal 10 may also include... Figure 1 The more or fewer components shown, or having the same Figure 1 The different configurations shown.

[0051] It should be noted that the aforementioned one or more processors and / or other data processing circuits are generally referred to herein as "data processing circuits". These data processing circuits may be embodied, in whole or in part, in software, hardware, firmware, or any other combination thereof. Furthermore, the data processing circuits may be a single, independent processing module, or may be integrated, in whole or in part, into any other element within the computer terminal 10. As involved in the embodiments of this application, the data processing circuits serve as a processor control mechanism (e.g., selection of a variable resistor termination path connected to an interface).

[0052] The memory 104 can be used to store software programs and modules of application software, such as the program instructions / data storage device corresponding to the model display method in this embodiment. The processor executes various functional applications and data processing by running the software programs and modules stored in the memory 104, thereby implementing the model display method of the aforementioned application. The memory 104 may include high-speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 104 may further include memory remotely located relative to the processor, and these remote memories can be connected to the computer terminal 10 via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof.

[0053] The display can be, for example, a touchscreen liquid crystal display (LCD) that allows the user to interact with the user interface of the computer terminal 10.

[0054] Figure 2 This is a flowchart illustrating the model display method provided in the embodiments of this application, such as... Figure 2 As shown, the method includes the following steps:

[0055] Step S101: Obtain the model identifier of the target model to be displayed on the current page.

[0056] In this context, "current page" refers to the currently displayed page (e.g., a webpage), which includes page components. For example, in a Single Page Application (SPA), page switching is actually a switching of components or views; therefore, "current page" can refer to the currently active or displayed view component.

[0057] The target model refers to the specific 3D model to be displayed on the current page, such as a robot 3D model. A model identifier is a globally unique identifier assigned to each robot model, used to precisely identify a specific model. Different 3D models are pre-stored in a preset model library based on their model identifiers, and the 3D models in the model library are managed through a preset global document object model (global DOM). The document object model (DOM) connects web pages with scripts or programming languages ​​by storing the structure of a document (e.g., HTML representing a web page) in memory as objects. In this embodiment, a global document object model is constructed based on the document object model to centrally manage the 3D models used for loading and display. That is, the preset global document object model is a management object used to manage all 3D model instances in the model library. In this embodiment, a globally shared 3D DOM can be created during web page initialization to manage all robot 3D model instances. The model library is a dictionary or mapping table, with the model identifier as the key and the corresponding 3D model instance as the value. 3D models can be models that have been loaded and displayed on the current page or on other pages. Once a 3D model is loaded and displayed on a page, the Global Document Object Model (GDOM) assigns it a model identifier and stores the 3D model in the model library. The GDOM can include model state information to record whether each model instance is currently being used by a page.

[0058] In this step, when any page needs to display the target model, the model identifier of the target model to be displayed on the current page will be obtained first.

[0059] Step S102: Send a model loading request to the preset global document object model according to the model identifier to obtain the target model.

[0060] As an optional embodiment, in step S102, sending a model loading request to a preset global document object model based on the model identifier to obtain the target model can be achieved through the following steps:

[0061] Step S1021: Send the model identifier to the global document object model, wherein the global document object model is constructed during the page initialization phase;

[0062] Step S1022: Search for the target model from the preset model library using the global document object model.

[0063] In this embodiment, the model identifier is first sent to the global document object model, and a model loading request is sent to the preset global document object model. This step is usually implemented by calling an interface method provided by a global document object model.

[0064] After receiving the model identifier obtained in step S101, the Global Document Object Model can use the model identifier as a key to search for the corresponding model instance in the model library, thereby completing the acquisition of the target model.

[0065] Step S103: The target model is rendered and loaded using a preset 3D rendering engine, wherein the 3D rendering engine renders the model within the rendering container of the global document object model.

[0066] A 3D rendering engine refers to a technology library used on the web to render 3D graphics, such as Three.js and Babylon.js. This engine is created and configured during application initialization. Rendering refers to the process by which the engine calculates information such as the vertices, textures, and lighting of the model and ultimately draws the image on the screen. This process is usually continuous, i.e., a rendering loop.

[0067] In this step, after obtaining the target model to be displayed through the model identifier, the target model obtained in step S102 can be rendered and loaded using a preset 3D rendering engine in the rendering container of the global document object model, and then displayed on the current page. The rendering container is a component or structure used to manage and control model rendering.

[0068] Through the above steps S101 to S103, the target model can be rendered and loaded based on the global document object model by globally reusing model instances and global rendering containers. This effectively reduces the memory consumption caused by repeated model creation and loading, effectively avoids WebGL context loss errors triggered by memory overflow, ensures stable operation of low-performance devices, improves user experience, enhances the loading performance and response speed of the target model, and achieves efficient management of model resources.

[0069] Specifically: 1) The Global Document Object Model (GEM) can not only manage 3D models globally and reuse model instances globally, significantly reducing memory usage, but also fundamentally avoid the memory usage problem caused by the same model being repeatedly created and cached on different pages. This makes memory usage strongly correlated with the number of model types rather than the number of pages, making it particularly suitable for large projects with significant memory optimization effects. The GEM can also utilize the constructed global rendering container to centralize the rendering output of the target model into a single global rendering container, thereby simplifying the model loading and display architecture and reducing memory usage during the rendering process.

[0070] 2) Because memory usage is effectively controlled, the risk of WebGL context loss due to memory overflow is fundamentally eliminated, enabling stable and smooth robot simulation display even on performance-limited terminals such as mobile devices.

[0071] 3) For 3D models that have already been loaded, subsequent requests can directly reuse the idle 3D model instances in memory, eliminating repeated network requests, data parsing, and GPU upload processes, which greatly improves the response speed of page switching and model display, thereby improving the loading performance and response speed of the target model.

[0072] 4) With the global document object model, there is no need to repeatedly create and destroy 3D model instances. The rendering state can be switched with only lightweight DOM operations, with minimal resource overhead and avoiding the latency and performance loss caused by repeated model loading.

[0073] As an optional embodiment, the construction of the global document object model can be achieved through the following steps:

[0074] Step S201: During the page initialization phase, a DIV element is created as the rendering container for the global document object model.

[0075] Step S202: Configure the rendering container, wherein the configuration of the rendering container includes determining that the style of the rendering container is inherited from the style of its parent element.

[0076] A DIV (Division) is a container whose main function is to divide a webpage into areas for grouping and laying out other HTML elements (such as text, images, buttons, etc.), or as the target object for CSS styles and JavaScript operations.

[0077] During page initialization, a dedicated DIV element is created as the rendering container for the global document object model. This container is assigned the unique identifier `robot-common-3d`. The 3D rendering engine is configured within this container to draw and display the model. Step S202 is typically implemented using CSS, setting the rendering container's style to `width: 100%` and `height: 100%`. This ensures that the container itself has no fixed size; its size is entirely determined by the currently mounted parent element, guaranteeing that it can adapt to the size of the parent container.

[0078] In step S1022, the preset model library is a collection of key-value pairs maintained in memory by the global document object model. The key is the model identifier, and the value is the corresponding, already loaded 3D model instance.

[0079] Specifically, based on the received model identifier, a search is performed in a pre-defined model library. If a model instance corresponding to the model identifier is found in the pre-defined model library and that instance is idle, the existing instance is directly returned for reuse. If no corresponding model instance is found in the pre-defined model library, the Global Document Object Model (GDOM) will proactively execute the loading process: downloading the model file, parsing it, creating GPU resources, and generating a new model instance. Then, this new instance is returned as the search result, and simultaneously saved to the pre-defined model library for reuse in subsequent requests.

[0080] As an optional embodiment, in step S103, rendering and loading the target model using a preset 3D rendering engine can be achieved through the following steps:

[0081] Step S1031: Determine the loading location of the target model based on the context of the current page;

[0082] Step S1032: Move the rendering container to the target container corresponding to the loading position, and render and load the target model for display, wherein the target container is used to display the target model.

[0083] In an SPA, the most important context is routing information (i.e., URL path, such as / robot / detail). In addition, it may also include page state, user permissions, etc.

[0084] In this embodiment, when a page needs to display a 3D model, the system first dynamically determines the loading position of the target model based on the current page context. Then, it moves the rendering container to the target container corresponding to the loading position to render and load the target model. The target container is used to display the target model. This step replaces complex rendering control commands with a lightweight DOM operation and automatically starts and stops the display using the rendering engine's built-in mechanisms, thus avoiding unnecessary rendering calculations and greatly simplifying the code complexity.

[0085] Specifically, in step S1031, determining the loading location of the target model based on the context of the current page can be achieved through the following steps:

[0086] Step S301: Determine the Vue computed property based on the routing path of the current page, wherein the Vue computed property is used to represent the container identifier of the display container;

[0087] Step S302: Listen for changes in the properties of the Vue computed property using Vue's listener;

[0088] Step S303: Determine the target container based on the attribute changes.

[0089] First, define a Vue computed property, such as `targetContainerId`. Computed properties are a feature in Vue.js that allows you to declaratively define a value that depends on other data. When the dependent data changes, the computed property automatically recalculates its value. This property depends on the current page's route path (…). The `route.path` property performs logical calculations. These calculations involve writing mapping logic within the function body of the computed property to return the container identifier for the target container displayed on the page, based on different route paths.

[0090] Then, the system listens for changes to the `targetContainerId` property using Vue's watcher. When the computed property value in step S301 is updated to a valid container identifier, the watcher triggers a callback function. This function performs the following operations:

[0091] Retrieve the model container with the container identifier robot-common-3d;

[0092] Retrieves the target container used to display the model on the current page, as returned by the computed properties;

[0093] The appendChild method is used to move the robot-common-3d container from its current parent node and append it to the target container.

[0094] Finally, the target container can be determined based on the changes in the calculated attribute values. Once the robot-common-3d container is moved into a target container with actual dimensions (non-zero width and height), the 3D rendering engine automatically detects this change and resumes the rendering loop, allowing the model to be displayed correctly in the specified location.

[0095] This embodiment utilizes Vue's reactive system, namely computed properties and listeners, to automatically bind the display logic of the 3D model with the front-end routing state, thereby achieving automated and intelligent management of the model mounting location.

[0096] As an optional embodiment, step S103 can be implemented through the following steps: the method further includes:

[0097] Step S401: During the rendering process of the 3D rendering engine, monitor the size change of the rendering container where the 3D rendering engine is located.

[0098] Step S402: If the size of the rendering container is zero, pause the rendering of the target model; if the size of the rendering container is non-zero, render the target model.

[0099] In this embodiment, to further optimize performance, a linkage mechanism between rendering state and container size is established. During the rendering process of the 3D rendering engine, the 3D rendering engine continuously monitors changes in the size of its container. When the calculated width or height of the rendering container is detected to be 0px, the engine automatically pauses the rendering loop, stops calculating vertices, lighting, and pixel colors for each frame, and GPU and CPU-related calculations immediately cease, thereby significantly reducing the consumption of CPU and GPU resources. However, the model instance itself (geometric data, textures, etc.) remains completely retained in memory. When the rendering container size returns to a non-zero value, the rendering loop automatically resumes, starting from the paused state of the previous frame, and continues to smoothly run animations and interactions.

[0100] This embodiment dynamically switches the 3D model container between a "zero-size hidden container" and a "normal-size display container" to control the start and stop of the rendering engine, thereby achieving on-demand rendering, reducing the consumption of CPU and GPU resources, and optimizing rendering and display performance.

[0101] As an optional embodiment, if the current page does not need to display the target model, it can be achieved through the following steps:

[0102] Step S501: Move the rendering container to a preset hidden state container through the document object model tree;

[0103] Step S502, wherein the style of the hidden state container includes a hidden state container width of a first width and a hidden state container height of a first height, wherein the first width is less than a first width threshold and the first height is less than a first height threshold.

[0104] In this embodiment, when the page content does not need to display the 3D model, the system triggers the resource release mechanism by manipulating the document object model tree, moves the rendering container to a preset hidden state container, and hides the target model. The operation is convenient and quick.

[0105] Specifically, a hidden container is preset on the page, identified by `robot-common-view`. The hidden container's style is set to have a width and a height of 0. Setting both the first width and the first height to 0 ensures that the target model is completely hidden.

[0106] In practice, the first width and the first height can also be small non-zero values, which can be set according to actual needs. For example, the first width can be set to a small value (less than the first width threshold) to retain the width; while the first height can be set to 0 to not retain the height, so that the hidden state container retains its width as a placeholder.

[0107] Next, by executing the following code: `document.getElementById('robot-common-view').appendChild(document.getElementById('robot-common-3d'))`, the target container is moved into the display container. Since the parent container's size is zero, according to the aforementioned linkage mechanism, the 3D rendering engine immediately pauses its work, effectively releasing computing resources while preserving the model's state.

[0108] As an optional embodiment, step S502 can be achieved through the following steps:

[0109] Step S601: Configure the hidden state container by hiding the overflow content and clearing the float so that the hidden state container hides the display content.

[0110] Both `overflow` and `hidden` are CSS properties. Hiding overflow means that if the content within a container exceeds the container's boundaries, the excess portion should be clipped, absolutely preventing any visual residue of any pixels.

[0111] In CSS layout, floating elements removes them from the normal document flow. If all child elements inside a container are floating, the container might incorrectly calculate its height as 0. To solve this problem, configuring hidden containers to clear floats ensures that the `width:0;height:0` settings take effect from the source, unaffected by the layout of internal elements, thus maintaining layout stability and predictability.

[0112] As an optional embodiment, the method can be implemented through the following steps: The method further includes:

[0113] Step S701: If the current page no longer needs to display the target model, return the target model to the model library through the global document object model.

[0114] Specifically, when a page or component no longer needs to display the target model, the system does not destroy the model, but returns it to the model library in the global document object model for reuse in subsequent requests, and stops rendering animations of all models.

[0115] Scenarios where the target model no longer needs to be displayed may include: a user navigating from the current page to another page where the model does not need to be displayed; a user closing a modal or tab on the page that was previously displaying the model; or a change in the page's state that causes the model area to be hidden.

[0116] By employing the above steps and utilizing a global document object model instance, the problem of the same model being repeatedly created and cached on different pages is fundamentally avoided. This makes memory usage strongly correlated with the number of model types rather than the number of pages, making it particularly suitable for large projects with significant memory optimization effects. Furthermore, because memory usage is effectively controlled, the risk of WebGL Context Lost errors caused by memory overflow is fundamentally eliminated, enabling stable and smooth robot simulation display even on performance-constrained devices such as mobile devices. Simultaneously, for already loaded models, subsequent requests can directly reuse idle instances in memory, eliminating redundant network requests, data parsing, and GPU upload processes, greatly improving the response speed of page switching and model display.

[0117] It should be noted that, for the sake of simplicity, the foregoing method embodiments are all described as a series of actions. However, those skilled in the art should understand that this application is not limited to the described order of actions, as some steps may be performed in other orders or simultaneously according to this application. Furthermore, those skilled in the art should also understand that the embodiments described in the specification are preferred embodiments, and the actions and modules involved are not necessarily essential to this application.

[0118] Through the above description of the embodiments, those skilled in the art can clearly understand that the model display method according to the above embodiments can be implemented by means of software plus necessary general-purpose hardware platform. Of course, it can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes several instructions to cause a terminal device (which may be a mobile phone, computer, server, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0119] According to an embodiment of this application, a model display device for implementing the above-described model display method is also provided. Figure 3 This is a structural block diagram of the model display device provided according to the embodiments of this application, such as... Figure 3As shown, the model display device includes: a first acquisition module 100, configured to acquire the model identifier of the target model to be displayed on the current page; a second acquisition module 200, configured to send a model loading request to a preset global document object model according to the model identifier to acquire the target model; and a rendering module 300, configured to render and load the target model through a preset 3D rendering engine, wherein the 3D rendering engine renders in the rendering container of the global document object model. The model display device will be described below.

[0120] It should be noted that the first acquisition module 100, the second acquisition module 200, and the rendering module 300 mentioned above correspond to steps S101 to S103 in the embodiments. Multiple modules and their corresponding steps implement the same instances and application scenarios, but are not limited to the content disclosed in the above embodiments. It should also be noted that the above modules, as part of the device, can run on the computer terminal 10 provided in the embodiments.

[0121] Embodiments of this application may provide a computer device. Optionally, in this embodiment, the computer device may be located in at least one of a plurality of network devices in a computer network. The computer device includes a memory and a processor.

[0122] The memory can be used to store software programs and modules, such as the program instructions / modules corresponding to the model display method and apparatus in this application embodiment. The processor executes various functional applications and data processing by running the software programs and modules stored in the memory, thereby realizing the aforementioned model display method. The memory may include high-speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory may further include memory remotely located relative to the processor, and these remote memories can be connected to a computer terminal via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof.

[0123] The processor can invoke information and applications stored in the memory through the transmission device to perform the following steps: obtain the model identifier of the target model to be displayed on the current page; send a model loading request to a preset global document object model according to the model identifier to obtain the target model; render and load the target model through a preset 3D rendering engine, wherein the 3D rendering engine renders in the rendering container of the global document object model.

[0124] Optionally, the processor may also execute program code that performs the following steps: sending a model loading request to a preset global document object model based on the model identifier to obtain the target model, including: sending the model identifier to the global document object model, wherein the global document object model is constructed during the page initialization phase; and searching for the target model from a preset model library through the global document object model.

[0125] Optionally, the processor may also execute program code with the following steps: the construction of the global document object model includes: during the page initialization phase, creating a DIV element as a rendering container for the global document object model; configuring the rendering container, wherein the configuration of the rendering container includes determining that the style of the rendering container is inherited from the style of its parent element.

[0126] Optionally, the processor may also execute program code that performs the following steps: rendering and loading the target model using a preset 3D rendering engine, including: determining the loading position of the target model based on the context of the current page; moving the rendering container to the target container corresponding to the loading position; rendering and loading the target model for display, wherein the target container is used to display the target model.

[0127] Optionally, the processor may also execute program code that performs the following steps: determining the loading location of the target model based on the context of the current page, including: determining a Vue computed property based on the routing path of the current page, wherein the Vue computed property is used to represent the container identifier of the display container; listening to the property changes of the Vue computed property through a Vue listener; and determining the target container based on the property changes.

[0128] Optionally, the processor may also execute program code for the following steps: the method further includes: during the rendering process of the 3D rendering engine, monitoring the size change of the rendering container where the 3D rendering engine is located; if the size of the rendering container is zero, pausing the rendering of the target model; if the size of the rendering container is a non-zero value, rendering the target model.

[0129] Optionally, the processor may also execute program code for the following steps: if the current page does not need to display the target model, the method further includes: moving the rendering container to a preset hidden state container through the document object model tree; wherein the style of the hidden state container includes a hidden state container width of a first width and a hidden state container height of a first height, the first width being less than a first width threshold and the first height being less than a first height threshold.

[0130] Optionally, the processor may also execute program code that includes the following steps: the method further includes configuring the hidden state container by hiding overflow content and clearing floats, so that the hidden state container hides the display content.

[0131] Optionally, the processor may also execute program code that performs the following steps: the method further includes: if the current page no longer needs to display the target model, returning the target model to the model library through the global document object model.

[0132] This application provides a model loading scheme. By creating a globally unique model instance and combining it with the DOM's dynamic mounting mechanism, it achieves efficient reuse of model resources at the application level and on-demand rendering, thereby solving the technical problems of memory leaks and WebGL context loss caused by repeated model loading in related technologies.

[0133] Those skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be implemented by a program instructing the hardware related to the terminal device. The program can be stored in a non-volatile storage medium, which may include: flash drive, read-only memory (ROM), random access memory (RAM), disk or optical disk, etc.

[0134] Embodiments of this application also provide a non-volatile storage medium. Optionally, in this embodiment, the aforementioned non-volatile storage medium can be used to store the program code executed by the model display method provided in the above embodiments.

[0135] Optionally, in this embodiment, the non-volatile storage medium may be located in any computer terminal in a group of computer terminals in a computer network, or in any mobile terminal in a group of mobile terminals.

[0136] Optionally, in this embodiment, the non-volatile storage medium is configured to store program code for performing the following steps: obtaining the model identifier of the target model to be displayed on the current page; sending a model loading request to a preset global document object model according to the model identifier to obtain the target model; and rendering and loading the target model through a preset 3D rendering engine, wherein the 3D rendering engine renders in the rendering container of the global document object model.

[0137] Optionally, in this embodiment, the non-volatile storage medium is configured to store program code for performing the following steps: sending a model loading request to a preset global document object model according to the model identifier to obtain the target model, including: sending the model identifier to the global document object model, wherein the global document object model is constructed during the page initialization phase; and searching for the target model from a preset model library through the global document object model.

[0138] Optionally, in this embodiment, the non-volatile storage medium is configured to store program code for performing the following steps: the construction of the global document object model includes: during the page initialization phase, creating a DIV element as a rendering container for the global document object model; configuring the rendering container, wherein the configuration of the rendering container includes determining that the style of the rendering container is inherited from the style of its parent element.

[0139] Optionally, in this embodiment, the non-volatile storage medium is configured to store program code for performing the following steps: rendering and loading the target model using a preset 3D rendering engine, including: determining the loading position of the target model based on the context of the current page; moving the rendering container to the target container corresponding to the loading position, and rendering and loading the target model for display, wherein the target container is used to display the target model.

[0140] Optionally, in this embodiment, the non-volatile storage medium is configured to store program code for performing the following steps: determining the loading location of the target model based on the context of the current page, including: determining a Vue computed property based on the routing path of the current page, wherein the Vue computed property is used to represent the container identifier of the display container; listening to the property changes of the Vue computed property through Vue's listener; and determining the target container based on the property changes.

[0141] Optionally, in this embodiment, the non-volatile storage medium is configured to store program code for performing the following steps: the method further includes: during the rendering process of the 3D rendering engine, monitoring the size change of the rendering container where the 3D rendering engine is located; if the size of the rendering container is zero, pausing the rendering of the target model; if the size of the rendering container is a non-zero value, rendering the target model.

[0142] Optionally, in this embodiment, the non-volatile storage medium is configured to store program code for performing the following steps: if the current page does not need to display the target model, the method further includes: moving the rendering container to a preset hidden state container through the document object model tree; wherein the style of the hidden state container includes a hidden state container width of 0 and a hidden state container height of 0.

[0143] Optionally, in this embodiment, the non-volatile storage medium is configured to store program code for performing the following steps: the method further includes configuring the hidden state container by hiding overflow content and clearing floats, so that the hidden state container hides the display content.

[0144] Optionally, in this embodiment, the non-volatile storage medium is configured to store program code for performing the following steps: the method further includes: if the current page no longer needs to display the target model, returning the target model to the model library through the global document object model.

[0145] Embodiments of this application also provide a computer program product, including a computer program. Optionally, in this embodiment, when the computer program is executed by a processor, it can implement:

[0146] Get the model identifier of the target model to be displayed on the current page;

[0147] A model loading request is sent to a preset global document object model based on the model identifier to obtain the target model;

[0148] The target model is rendered and loaded using a preset 3D rendering engine, wherein the 3D rendering engine renders the model within the rendering container of the global document object model.

[0149] The sequence numbers of the embodiments in this application are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0150] In the above embodiments of this application, the descriptions of each embodiment have different focuses. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0151] In the several embodiments provided in this application, it should be understood that the disclosed technical content can be implemented in other ways. The device embodiments described above are merely illustrative; for example, the division of units can be a logical functional division, and in actual implementation, there may be other division methods. For instance, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the displayed or discussed mutual coupling, direct coupling, or communication connection may be through some interfaces; the indirect coupling or communication connection between units or modules may be electrical or other forms.

[0152] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0153] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0154] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a non-volatile storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as a USB flash drive, read-only memory (ROM), random access memory (RAM), portable hard drive, magnetic disk, or optical disk.

[0155] The above description is only a preferred embodiment of this application. It should be noted that for those skilled in the art, several improvements and modifications can be made without departing from the principle of this application, and these improvements and modifications should also be considered within the scope of protection of this application.

Claims

1. A model display method, characterized in that, include: Get the model identifier of the target model to be displayed on the current page; A model loading request is sent to a preset global document object model based on the model identifier to obtain the target model; The target model is rendered and loaded using a preset 3D rendering engine, wherein the 3D rendering engine renders the model within the rendering container of the global document object model.

2. The method according to claim 1, characterized in that, Based on the model identifier, a model loading request is sent to a preset global document object model to obtain the target model, including: The model identifier is sent to the global document object model, wherein the global document object model is constructed during the page initialization phase; The target model is searched from a preset model library using the global document object model.

3. The method according to claim 1, characterized in that, The construction of the global document object model includes: During the page initialization phase, DIV elements are created as rendering containers for the global document object model; The rendering container is configured, including determining that the style of the rendering container inherits the style of its parent element.

4. The method according to claim 3, characterized in that, The target model is rendered and loaded using a preset 3D rendering engine, including: The loading location of the target model is determined based on the context of the current page; The rendering container is moved to the target container corresponding to the loading position, and the target model is rendered and loaded for display, wherein the target container is used to display the target model.

5. The method according to claim 4, characterized in that, Determining the loading location of the target model based on the context of the current page includes: The Vue computed property is determined based on the routing path of the current page, wherein the Vue computed property is used to represent the container identifier of the display container; Listen for changes in the properties of the Vue computed properties using Vue's listeners; The target container is determined based on the changes in the stated attributes.

6. The method according to claim 1, characterized in that, The method further includes: During the rendering process of the 3D rendering engine, the size change of the rendering container where the 3D rendering engine is located is monitored; If the size of the rendering container is zero, the rendering of the target model is paused; if the size of the rendering container is non-zero, the target model is rendered.

7. The method according to claim 3, characterized in that, If the current page does not need to display the target model, the method further includes: Using the document object model tree, the rendering container is moved to a preset hidden state container; The style of the hidden state container includes a first width and a first height, wherein the first width is less than a first width threshold and the first height is less than a first height threshold.

8. The method according to claim 7, characterized in that, The method further includes: Configure the hidden state container to hide its display content by hiding overflow content and clearing floats.

9. The method according to claim 2, characterized in that, The method further includes: If the current page no longer needs to display the target model, the target model is returned to the model library through the global document object model.

10. A model display device, characterized in that, include: The first acquisition module is configured to acquire the model identifier of the target model to be displayed on the current page; The second acquisition module is configured to send a model loading request to a preset global document object model based on the model identifier in order to acquire the target model; The rendering module is configured to render and load the target model using a preset 3D rendering engine, wherein the 3D rendering engine renders the model within the rendering container of the global document object model.

Images