CN-121980102-A - Model display method and device

CN121980102ACN 121980102 ACN121980102 ACN 121980102ACN-121980102-A

Abstract

The application 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 identification of a target model to be displayed in a current page, obtaining the target model according to the model identification and a preset global document object model, and rendering and loading the target model through a preset 3D rendering engine, wherein the 3D rendering engine renders in a rendering container of the global document object model. The application solves the technical problems that the traditional Web3D development model example cannot be multiplexed across components or routes, so that the memory occupation is too high, and the WebGL context is easy to be lost on low-performance equipment, thereby influencing the user experience.

Inventors

DUAN HUAN
LI SHIZHENG
QI ZHENXIANG

Assignees

节卡机器人股份有限公司

Dates

Publication Date: 20260505
Application Date: 20251231

Claims (10)

1. A model display method, characterized by comprising: obtaining a model identification of a target model to be displayed in a current page; sending a model loading request to a preset global document object model according to the model identification so as to acquire the target model; And carrying out rendering loading on the target model through a preset 3D rendering engine, wherein the 3D rendering engine performs rendering in a rendering container of the global document object model.
2. The method of claim 1, wherein sending a model load request to a preset global document object model according to the model identification to obtain the target model comprises: Sending the model identification to the global document object model, wherein the global document object model is constructed in a page initialization stage; and searching the target model from a preset model library through the global document object model.
3. The method of claim 1, wherein the building of the global document object model comprises: In the page initialization stage, a DIV element is created as a rendering container of the global document object model; The rendering container is configured, and the configuration of the rendering container comprises the step of determining that the style of the rendering container is the style of inheriting the parent element.
4. A method according to claim 3, wherein rendering loading the object model by a preset 3D rendering engine comprises: Determining the loading position of the target model according to the context of the current page; And moving the rendering container to a target container corresponding to the loading position, and rendering, loading and displaying the target model, wherein the target container is used for displaying the target model.
5. The method of claim 4, wherein determining the loading location of the target model based on the context of the current page comprises: determining a Vue calculation attribute based on the routing path of the current page, wherein the Vue calculation attribute is used for representing a container identifier of a display container; monitoring attribute change of the attribute calculated by the Vue through a listener of the Vue; and determining the target container according to the attribute change.
6. The method according to claim 1, wherein the method further comprises: Monitoring the dimensional change of a rendering container where the 3D rendering engine is positioned in the rendering process of the 3D rendering engine; and if the size of the rendering container is a non-zero value, rendering the target model.
7. The method of claim 3, wherein if the current page does not require the target model to be displayed, the method further comprises: Moving the rendering container to a preset hidden state container through a document object model tree; The pattern of the hidden state container comprises a hidden state container width being a first width and a hidden state container height being a first height, the first width being less than a first width threshold, the first height being less than a first height threshold.
8. The method of claim 7, wherein the method further comprises: the hidden state container is configured by hiding overflow content and clearing float such that the hidden state container hides display content.
9. The method according to claim 2, wherein the method further comprises: And if the current page does not need to display the target model any more, returning the target model to the model library through the global document object model.
10. A model display device, characterized by comprising: the first acquisition module is configured to acquire a model identifier of a target model to be displayed in a current page; The second acquisition module is configured to send a model loading request to a preset global document object model according to the model identification so as to acquire the target model; And the rendering module is configured to render and load the target model through a preset 3D rendering engine, wherein the 3D rendering engine renders in a rendering container of the global document object model.

Description

Model display method and device Technical Field The application relates to the technical field of model display, in particular to a model display method and device. Background With the maturation of WebGL (WebGraphicsLibrary, web graphic library) and related graphic libraries (e.g., three.js), three-dimensional simulation of robots at the browser has become possible and increasingly popular. Currently, in the application of a robot simulation web page, embedding and displaying a 3D model (Three-DimensionalModel) of a robot in different pages or components has become a basic functional requirement. However, this application model presents a serious technical challenge in that when a single web application (SinglePageApplication, SPA) or complex web site contains multiple views that require 3D models to be presented, the model resources loaded by each view continue to occupy significant amounts of graphics memory and system memory. If not managed properly, the rapid accumulation of memory will become a major bottleneck for system performance. Particularly, in a large-scale complex project or terminal device with limited performance, the memory upper limit of the Web browser is easily exceeded, and then WebGLcontext lost (WebGL context is lost) errors are caused, so that the serious problems of rendering failure, page collapse and the like of the 3D model are finally caused. To alleviate this problem, the related art generally reloads the model automatically in the event of WebGL context loss, or gives a refresh button to recreate the model by manual refresh by the user. However, this method can make the user obviously perceive the web page error, and impair the user experience and the reliability of the system. In view of the above problems, no effective solution has been proposed at present. Disclosure of Invention The embodiment of the application provides a model display method and device, which at least solve the technical problems that the memory occupation is too high due to the fact that a model instance cannot be multiplexed across components or routes in the traditional Web3D development, and the WebGL context is easily lost on low-performance equipment, so that the user experience is affected. According to an aspect of an embodiment of the present application, there is provided a model display method including: obtaining a model identification of a target model to be displayed in a current page; sending a model loading request to a preset global document object model according to the model identification so as to acquire the target model; And carrying out rendering loading on the target model through a preset 3D rendering engine, wherein the 3D rendering engine performs rendering in a rendering container of the global document object model. Optionally, 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 identification to the global document object model, wherein the global document object model is constructed in a page initialization stage; and searching the target model from a preset model library through the global document object model. Optionally, the building of the global document object model includes: In the page initialization stage, a DIV element is created as a rendering container of the global document object model; The rendering container is configured, and the configuration of the rendering container comprises the step of determining that the style of the rendering container is the style of inheriting the parent element. Optionally, performing rendering loading on the target model through a preset 3D rendering engine, including: Determining the loading position of the target model according to the context of the current page; And moving the rendering container to a target container corresponding to the loading position, and rendering, loading and displaying the target model, wherein the target container is used for displaying the target model. Optionally, determining the loading position of the target model according to the context of the current page includes: determining a Vue calculation attribute based on the routing path of the current page, wherein the Vue calculation attribute is used for representing a container identifier of a display container; monitoring attribute change of the attribute calculated by the Vue through a listener of the Vue; and determining the target container according to the attribute change. Optionally, the method further comprises: Monitoring the dimensional change of a rendering container where the 3D rendering engine is positioned in the rendering process of the 3D rendering engine; and if the size of the rendering container is a non-zero value, rendering the target model. Optionally, 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 thr