CN117093793A - Webpage 3D scene two-dimensional display method and system - Google Patents
Webpage 3D scene two-dimensional display method and system Download PDFInfo
- Publication number
- CN117093793A CN117093793A CN202311077499.1A CN202311077499A CN117093793A CN 117093793 A CN117093793 A CN 117093793A CN 202311077499 A CN202311077499 A CN 202311077499A CN 117093793 A CN117093793 A CN 117093793A
- Authority
- CN
- China
- Prior art keywords
- dimensional
- model
- rendering
- scene
- real time
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 36
- 238000009877 rendering Methods 0.000 claims abstract description 114
- 230000004044 response Effects 0.000 claims description 29
- 238000004458 analytical method Methods 0.000 claims description 20
- 230000004927 fusion Effects 0.000 claims description 18
- 238000013507 mapping Methods 0.000 claims description 12
- 238000012545 processing Methods 0.000 claims description 12
- 238000004590 computer program Methods 0.000 claims description 9
- 238000001514 detection method Methods 0.000 claims description 7
- 238000007499 fusion processing Methods 0.000 claims description 6
- 230000008569 process Effects 0.000 description 4
- 230000006870 function Effects 0.000 description 3
- 238000003491 array Methods 0.000 description 2
- 239000000463 material Substances 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T17/00—Three dimensional [3D] modelling, e.g. data description of 3D objects
Abstract
The invention provides a two-dimensional display method and a two-dimensional display system for a webpage 3D scene, wherein the method comprises the following steps: receiving an IP address input by a user in real time, and sending the IP address to a server to acquire webpage resource information corresponding to the IP address, which is issued by the server in real time; judging whether the webpage resource information contains a three-dimensional scene model in real time; if the webpage resource information is judged to contain the three-dimensional scene model in real time, extracting an HTML document contained in the three-dimensional scene model, and analyzing the HTML document to generate a corresponding DOM tree; detecting a model type corresponding to the three-dimensional scene model, and generating a corresponding rendering tree according to the model type and the DOM tree; and carrying out two-dimensional rendering on the three-dimensional scene model through the rendering tree to generate a corresponding two-dimensional picture, and displaying the two-dimensional picture in the webpage in real time. The method and the device can effectively improve the rendering efficiency and improve the use experience of the user.
Description
Technical Field
The invention relates to the technical field of data processing, in particular to a two-dimensional display method and system for a webpage 3D scene.
Background
With the progress of science and technology and the rapid development of productivity, the internet has been popularized in people's daily lives, and people can make shopping, learning and entertainment on the internet, which is greatly convenient for people's lives.
Most people acquire needed information by accessing a webpage through a browser, and in the process of accessing the webpage, a situation that a three-dimensional scene needs to be displayed in the webpage possibly occurs, so that the three-dimensional scene needs to be converted into a corresponding two-dimensional picture in the webpage to be displayed in real time.
However, in the prior art, in the process of converting a three-dimensional scene into a corresponding two-dimensional picture in a webpage, a large amount of conversion codes need to be written in a database, and the converted two-dimensional codes need to be analyzed and rendered in real time, so that more operation resources are required to be consumed, and meanwhile, the processing efficiency is low.
Disclosure of Invention
Based on the above, the invention aims to provide a two-dimensional display method and a two-dimensional display system for a webpage 3D scene, so as to solve the problem that in the prior art, in the process of converting a three-dimensional scene into a corresponding two-dimensional picture, more operation resources are required to be consumed, and the processing efficiency is low.
The first aspect of the embodiment of the invention provides:
a method for two-dimensional display of a web page 3D scene, the method comprising:
receiving an IP address input by a user in real time, and sending the IP address to a server to acquire webpage resource information corresponding to the IP address, which is issued by the server in real time;
judging whether the webpage resource information contains a three-dimensional scene model or not in real time;
if the webpage resource information is judged to contain the three-dimensional scene model in real time, extracting an HTML document contained in the three-dimensional scene model, and analyzing the HTML document to generate a corresponding DOM tree;
detecting a model type corresponding to the three-dimensional scene model, and generating a corresponding rendering tree according to the model type and the DOM tree;
and carrying out two-dimensional rendering on the three-dimensional scene model through the rendering tree to generate a corresponding two-dimensional picture, and displaying the two-dimensional picture in a webpage in real time.
The beneficial effects of the invention are as follows: the webpage resource information required by the user can be correspondingly obtained through the IP address received in real time, further, when the existence of the three-dimensional scene model in the webpage resource information is judged, the HTML document capable of representing the current three-dimensional scene model can be further extracted, based on the HTML document, a rendering tree capable of conducting rendering processing is further generated, the current three-dimensional scene model is subjected to two-dimensional rendering through the rendering tree, a corresponding two-dimensional picture can be rendered, and meanwhile real-time display can be conducted, so that the two-dimensional rendering of the three-dimensional scene model can be completed on the premise that a large amount of data is not generated and more computing resources are consumed, the rendering efficiency is correspondingly improved, and meanwhile the use experience of the user is improved.
Further, the step of sending the IP address to a server to obtain web resource information corresponding to the IP address, which is issued by the server in real time, includes:
sending an HTTP request to the server through the IP address, wherein the HTTP request comprises a request type, a request header and a request body;
feeding back a corresponding response instruction through the server according to the request type, the request head and the request main body, wherein the response instruction comprises a state code, a response head and a response main body;
judging whether the HTTP request is successful or not according to the status code in real time;
and if the HTTP request is judged to be successful in real time according to the state code, extracting the webpage resource information from the response header.
Further, the step of parsing the HTML document to generate a corresponding DOM tree includes:
carrying out full-disk scanning on the HTML document to identify a plurality of document nodes contained in the HTML document, wherein each document node has uniqueness;
and respectively converting each document node into a corresponding DOM element, and inputting a plurality of DOM elements into a preset DOM frame to correspondingly generate the DOM tree, wherein the DOM tree has uniqueness.
Further, the step of performing two-dimensional rendering on the three-dimensional scene model through the rendering tree to generate a corresponding two-dimensional picture includes:
calling out a preset renderer, and creating a rendering scene in the webpage;
inputting the rendering tree into the preset renderer to output a plurality of corresponding rendering nodes;
correspondingly adding each rendering node to each DOM element so as to render each DOM element and generate a plurality of corresponding two-dimensional pictures;
and performing splicing processing on the two-dimensional pictures to generate the two-dimensional pictures, and creating a two-dimensional UI interface in the rendering scene so as to display the two-dimensional pictures in the two-dimensional UI interface in real time.
Further, the step of creating a two-dimensional UI interface in the rendered scene includes:
creating a corresponding control button and a corresponding sliding block in the two-dimensional UI through a first preset program, and acquiring UI elements in the two-dimensional UI through a second preset program;
and establishing a mapping relation among the UI elements, the control buttons and the sliding blocks, and constructing a corresponding controller based on the mapping relation, wherein the controller is used for controlling the two-dimensional UI interface.
Further, the step of detecting the model type corresponding to the three-dimensional scene model includes:
when the three-dimensional scene model is acquired, identifying model elements contained in the three-dimensional scene model, wherein the model elements contain buildings, environments and characters;
and calculating the duty ratio of the building, the environment and the person in the three-dimensional scene model one by one, and determining the model type corresponding to the three-dimensional scene model according to the duty ratio.
Further, the step of generating a corresponding rendering tree according to the model type and the DOM tree includes:
calling a corresponding rendering model in a preset model database according to the model type, wherein the rendering model comprises an analysis layer, a fusion layer and an output layer;
inputting the model elements into the analysis layer so that the analysis layer outputs corresponding model features;
inputting the model features and the DOM numbers into the fusion layer at the same time, so that the fusion layer carries out fusion processing on the model features and the DOM numbers and generates the rendering tree;
and outputting the rendering tree in real time through the output layer, wherein the rendering tree has uniqueness.
A second aspect of an embodiment of the present invention proposes:
a web page 3D scene two-dimensional display system, the system comprising:
the receiving module is used for receiving the IP address input by the user in real time and sending the IP address to the server so as to acquire webpage resource information which is issued by the server in real time and corresponds to the IP address;
the judging module is used for judging whether the webpage resource information contains a three-dimensional scene model or not in real time;
the analysis module is used for extracting an HTML document contained in the three-dimensional scene model and analyzing the HTML document to generate a corresponding DOM tree if the three-dimensional scene model is judged to be contained in the webpage resource information in real time;
the detection module is used for detecting the model type corresponding to the three-dimensional scene model and generating a corresponding rendering tree according to the model type and the DOM tree;
and the rendering module is used for performing two-dimensional rendering on the three-dimensional scene model through the rendering tree so as to generate a corresponding two-dimensional picture, and displaying the two-dimensional picture in a webpage in real time.
Further, the receiving module is specifically configured to:
sending an HTTP request to the server through the IP address, wherein the HTTP request comprises a request type, a request header and a request body;
feeding back a corresponding response instruction through the server according to the request type, the request head and the request main body, wherein the response instruction comprises a state code, a response head and a response main body;
judging whether the HTTP request is successful or not according to the status code in real time;
and if the HTTP request is judged to be successful in real time according to the state code, extracting the webpage resource information from the response header.
Further, the parsing module is specifically configured to:
carrying out full-disk scanning on the HTML document to identify a plurality of document nodes contained in the HTML document, wherein each document node has uniqueness;
and respectively converting each document node into a corresponding DOM element, and inputting a plurality of DOM elements into a preset DOM frame to correspondingly generate the DOM tree, wherein the DOM tree has uniqueness.
Further, the rendering module is specifically configured to:
calling out a preset renderer, and creating a rendering scene in the webpage;
inputting the rendering tree into the preset renderer to output a plurality of corresponding rendering nodes;
correspondingly adding each rendering node to each DOM element so as to render each DOM element and generate a plurality of corresponding two-dimensional pictures;
and performing splicing processing on the two-dimensional pictures to generate the two-dimensional pictures, and creating a two-dimensional UI interface in the rendering scene so as to display the two-dimensional pictures in the two-dimensional UI interface in real time.
Further, the rendering module is specifically further configured to:
creating a corresponding control button and a corresponding sliding block in the two-dimensional UI through a first preset program, and acquiring UI elements in the two-dimensional UI through a second preset program;
and establishing a mapping relation among the UI elements, the control buttons and the sliding blocks, and constructing a corresponding controller based on the mapping relation, wherein the controller is used for controlling the two-dimensional UI interface.
Further, the detection module is specifically configured to:
when the three-dimensional scene model is acquired, identifying model elements contained in the three-dimensional scene model, wherein the model elements contain buildings, environments and characters;
and calculating the duty ratio of the building, the environment and the person in the three-dimensional scene model one by one, and determining the model type corresponding to the three-dimensional scene model according to the duty ratio.
Further, the detection module is specifically further configured to:
calling a corresponding rendering model in a preset model database according to the model type, wherein the rendering model comprises an analysis layer, a fusion layer and an output layer;
inputting the model elements into the analysis layer so that the analysis layer outputs corresponding model features;
inputting the model features and the DOM numbers into the fusion layer at the same time, so that the fusion layer carries out fusion processing on the model features and the DOM numbers and generates the rendering tree;
and outputting the rendering tree in real time through the output layer, wherein the rendering tree has uniqueness.
A third aspect of an embodiment of the present invention proposes:
a computer comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing a web page 3D scene two-dimensional display method as described above when the computer program is executed.
A fourth aspect of the embodiment of the present invention proposes:
a readable storage medium having stored thereon a computer program which when executed by a processor implements a web page 3D scene two-dimensional display method as described above.
Additional aspects and advantages of the invention will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of the invention.
Drawings
Fig. 1 is a flowchart of a two-dimensional display method of a 3D scene of a web page according to a first embodiment of the present invention;
fig. 2 is a block diagram of a two-dimensional display system for a 3D scene of a web page according to a sixth embodiment of the present invention.
The invention will be further described in the following detailed description in conjunction with the above-described figures.
Detailed Description
In order that the invention may be readily understood, a more complete description of the invention will be rendered by reference to the appended drawings. Several embodiments of the invention are presented in the figures. This invention may, however, be embodied in many different forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete.
It will be understood that when an element is referred to as being "mounted" on another element, it can be directly on the other element or intervening elements may also be present. When an element is referred to as being "connected" to another element, it can be directly connected to the other element or intervening elements may also be present. The terms "vertical," "horizontal," "left," "right," and the like are used herein for illustrative purposes only.
Unless defined otherwise, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this invention belongs. The terminology used herein in the description of the invention is for the purpose of describing particular embodiments only and is not intended to be limiting of the invention. The term "and/or" as used herein includes any and all combinations of one or more of the associated listed items.
Referring to fig. 1, a two-dimensional display method of a web page 3D scene provided by the first embodiment of the present invention is shown, and the two-dimensional display method of a web page 3D scene provided by the present embodiment can complete two-dimensional rendering of a three-dimensional scene model without generating a large amount of data and consuming more computing resources, thereby correspondingly improving rendering efficiency and improving user experience.
Specifically, the two-dimensional display method for the 3D scene of the web page provided by the embodiment specifically includes the following steps:
step S10, receiving an IP address input by a user in real time, and sending the IP address to a server to acquire webpage resource information corresponding to the IP address, which is issued by the server in real time;
step S20, judging whether the webpage resource information contains a three-dimensional scene model in real time;
step S30, if the three-dimensional scene model is judged to be contained in the webpage resource information in real time, extracting an HTML document contained in the three-dimensional scene model, and analyzing the HTML document to generate a corresponding DOM tree;
step S40, detecting a model type corresponding to the three-dimensional scene model, and generating a corresponding rendering tree according to the model type and the DOM tree;
and S50, performing two-dimensional rendering on the three-dimensional scene model through the rendering tree to generate a corresponding two-dimensional picture, and displaying the two-dimensional picture in a webpage in real time.
Specifically, in this embodiment, it should be first explained that the two-dimensional display method for a 3D scene of a web page provided in this embodiment is specifically applied to various browsers, and is used to convert the 3D scene in the web page into a corresponding two-dimensional picture for displaying in the process of accessing the web page by the browser, so as to meet the display requirement of the web page. Based on the above, when the browser receives the IP address input by the user in real time, the IP address is immediately sent to the server arranged in the background, so that the server can call the webpage resource information corresponding to the current IP address in the server. Specifically, the web resource information includes various different types of information, and based on this, the current browser needs to determine in real time whether the currently received web resource information includes a three-dimensional scene model, and perform corresponding processing.
Further, if the current webpage resource information includes the three-dimensional scene model, the HTML document corresponding to the current three-dimensional scene model can be further extracted, specifically, all the information of the current three-dimensional scene model is stored in the HTML document, that is, the two information are mutually corresponding, and based on the information, the current HTML document is analyzed, that is, the current three-dimensional scene model is processed. Further, a corresponding DOM (Document Object Model document object model) tree is generated according to the current HTML document, further, a needed rendering tree is further generated according to a model type corresponding to the current three-dimensional scene model and the DOM tree obtained in real time, specifically, the model type may include a scene, a person, an environment and the like, on the basis, the three-dimensional scene model is rendered in real time through the rendering tree, a corresponding two-dimensional picture can be generated, and meanwhile, the current two-dimensional picture can be displayed in real time in the current webpage.
Second embodiment
Specifically, in this embodiment, it should be noted that the step of sending the IP address to the server to obtain the web resource information corresponding to the IP address, which is issued by the server in real time, includes:
sending an HTTP request to the server through the IP address, wherein the HTTP request comprises a request type, a request header and a request body;
feeding back a corresponding response instruction through the server according to the request type, the request head and the request main body, wherein the response instruction comprises a state code, a response head and a response main body;
judging whether the HTTP request is successful or not according to the status code in real time;
and if the HTTP request is judged to be successful in real time according to the state code, extracting the webpage resource information from the response header.
Specifically, in this embodiment, it should be noted that, after the browser acquires the IP address input by the user in real time, the server that needs to be accessed can be found through the IP address, and at the same time, an HTTP request is sent to the server, where the HTTP request specifically includes a request type, a request header, and a request body. Further, the server can feed back a corresponding response instruction according to the current request type, the request header and the request main body, and specifically, the response instruction includes a corresponding status code, the response header and the corresponding main body. The state code can correspondingly reflect whether the HTTP request instruction is successful or not, and based on the state code, whether the current HTTP request is successful or not is judged in real time according to the current state code. Specifically, if yes, the response body fed back by the current server is indicated to contain the needed webpage resource information, the needed webpage resource information is correspondingly extracted, and if not, the current HTTP request is judged to be failed, and the needed webpage resource information is correspondingly not acquired.
Third embodiment
Specifically, in this embodiment, it should be further noted that the step of parsing the HTML document to generate a corresponding DOM tree includes:
carrying out full-disk scanning on the HTML document to identify a plurality of document nodes contained in the HTML document, wherein each document node has uniqueness;
and respectively converting each document node into a corresponding DOM element, and inputting a plurality of DOM elements into a preset DOM frame to correspondingly generate the DOM tree, wherein the DOM tree has uniqueness.
Specifically, in this embodiment, it should be further noted that, after the browser obtains the HTML document, the current HTML document is scanned in full, so that a plurality of document nodes included in the current HTML document can be correspondingly identified, and specifically, each document node is unique.
Further, the document nodes obtained in real time at present are respectively converted into corresponding DOM elements, and specifically, the DOM elements represent various elements in the webpage so as to facilitate subsequent display. Based on the method, the current DOM elements are further input into a preset DOM frame to correspondingly generate the needed DOM number, wherein the DOM number corresponds to the integral structure of the three-dimensional scene model and has uniqueness.
In addition, in this embodiment, it should be noted that the step of performing two-dimensional rendering on the three-dimensional scene model through the rendering tree to generate the corresponding two-dimensional picture includes:
calling out a preset renderer, and creating a rendering scene in the webpage;
inputting the rendering tree into the preset renderer to output a plurality of corresponding rendering nodes;
correspondingly adding each rendering node to each DOM element so as to render each DOM element and generate a plurality of corresponding two-dimensional pictures;
and performing splicing processing on the two-dimensional pictures to generate the two-dimensional pictures, and creating a two-dimensional UI interface in the rendering scene so as to display the two-dimensional pictures in the two-dimensional UI interface in real time.
In addition, in this embodiment, it should be noted that, after the required rendering tree is obtained through the above steps, in order to effectively perform two-dimensional rendering on the current three-dimensional scene model, a preset renderer inside the current browser is further called out, meanwhile, a rendering scene is created in a blank area in the current webpage, further, the rendering tree is correspondingly input into the current preset renderer, and specifically, the current preset renderer can perform identification and splitting processing on the current rendering tree, and split a plurality of corresponding rendering nodes.
Further, each current rendering node is correspondingly added to each DOM element, so that rendering processing can be correspondingly performed on each DOM element, and meanwhile, a two-dimensional picture corresponding to the content contained in each rendering node is generated.
In addition, in this embodiment, it should be further noted that the step of creating a two-dimensional UI interface in the rendered scene includes:
creating a corresponding control button and a corresponding sliding block in the two-dimensional UI through a first preset program, and acquiring UI elements in the two-dimensional UI through a second preset program;
and establishing a mapping relation among the UI elements, the control buttons and the sliding blocks, and constructing a corresponding controller based on the mapping relation, wherein the controller is used for controlling the two-dimensional UI interface.
In addition, in this embodiment, it should be further described that, in order to display the two-dimensional image rendered in real time, so as to improve the user experience, a two-dimensional UI interface is created in the current webpage first, and at the same time, a corresponding control button and a slider are created in the current two-dimensional UI interface through the existing CSS (Cascading Style Sheets cascading style sheet) software, where the control button and the slider can correspondingly control various functions in the current two-dimensional UI interface. Further, various UI elements in the current two-dimensional UI interface can also be obtained through an existing javaScript (dynamic scripting language) program. On the basis, the mapping relation between each UI element and the control button and the sliding block can be established, and a required controller is further constructed based on the current mapping relation, so that a user can correspondingly control the current two-dimensional UI interface through the controller.
Fourth embodiment
In this embodiment, it should be noted that the step of detecting the model type corresponding to the three-dimensional scene model includes:
when the three-dimensional scene model is acquired, identifying model elements contained in the three-dimensional scene model, wherein the model elements contain buildings, environments and characters;
and calculating the duty ratio of the building, the environment and the person in the three-dimensional scene model one by one, and determining the model type corresponding to the three-dimensional scene model according to the duty ratio.
In this embodiment, it should be noted that, when the browser identifies the three-dimensional scene model, the model type corresponding to the current three-dimensional scene model and the model elements included in the model type may be further identified, and specifically, the model elements may include a building, an environment, a person, and the like. Further, based on the area of the current whole three-dimensional scene model, the area sizes of the building, the environment and the person occupied in the current whole three-dimensional scene model are identified one by one, based on the area sizes, the duty ratio of the current building, the environment and the person in the current three-dimensional scene model can be calculated one by one, finally, the model type corresponding to the current three-dimensional scene model can be determined according to the model element with the largest current duty ratio, and specifically, the person model, the environment model or the building model can be determined.
Fifth embodiment
In this embodiment, it should be noted that the step of generating the corresponding rendering tree according to the model type and the DOM tree includes:
calling a corresponding rendering model in a preset model database according to the model type, wherein the rendering model comprises an analysis layer, a fusion layer and an output layer;
inputting the model elements into the analysis layer so that the analysis layer outputs corresponding model features;
inputting the model features and the DOM numbers into the fusion layer at the same time, so that the fusion layer carries out fusion processing on the model features and the DOM numbers and generates the rendering tree;
and outputting the rendering tree in real time through the output layer, wherein the rendering tree has uniqueness.
In this embodiment, it should be noted that, after determining the required model type through the above steps, a rendering model adapted to the current model type may be called in a preset model database, where the rendering model includes an parsing layer, a fusion layer and an output layer. Based on the above, the model elements are correspondingly input into the current analysis layer, and the analysis layer can output corresponding model features.
Furthermore, the model features and the obtained DOM tree are simultaneously input into the fusion layer, meanwhile, the fusion layer can perform fusion processing on the current model features and DOM numbers and generate the rendering tree, and finally, the current rendering tree can be correspondingly output in real time through the output layer, and the rendering tree is unique.
Referring to fig. 2, a sixth embodiment of the present invention provides:
a web page 3D scene two-dimensional display system, wherein the system comprises:
the receiving module is used for receiving the IP address input by the user in real time and sending the IP address to the server so as to acquire webpage resource information which is issued by the server in real time and corresponds to the IP address;
the judging module is used for judging whether the webpage resource information contains a three-dimensional scene model or not in real time;
the analysis module is used for extracting an HTML document contained in the three-dimensional scene model and analyzing the HTML document to generate a corresponding DOM tree if the three-dimensional scene model is judged to be contained in the webpage resource information in real time;
the detection module is used for detecting the model type corresponding to the three-dimensional scene model and generating a corresponding rendering tree according to the model type and the DOM tree;
and the rendering module is used for performing two-dimensional rendering on the three-dimensional scene model through the rendering tree so as to generate a corresponding two-dimensional picture, and displaying the two-dimensional picture in a webpage in real time.
In the above two-dimensional display system for web page 3D scene, the receiving module is specifically configured to:
sending an HTTP request to the server through the IP address, wherein the HTTP request comprises a request type, a request header and a request body;
feeding back a corresponding response instruction through the server according to the request type, the request head and the request main body, wherein the response instruction comprises a state code, a response head and a response main body;
judging whether the HTTP request is successful or not according to the status code in real time;
and if the HTTP request is judged to be successful in real time according to the state code, extracting the webpage resource information from the response header.
In the above two-dimensional display system for web page 3D scene, the parsing module is specifically configured to:
carrying out full-disk scanning on the HTML document to identify a plurality of document nodes contained in the HTML document, wherein each document node has uniqueness;
and respectively converting each document node into a corresponding DOM element, and inputting a plurality of DOM elements into a preset DOM frame to correspondingly generate the DOM tree, wherein the DOM tree has uniqueness.
In the above two-dimensional display system for web page 3D scene, the rendering module is specifically configured to:
calling out a preset renderer, and creating a rendering scene in the webpage;
inputting the rendering tree into the preset renderer to output a plurality of corresponding rendering nodes;
correspondingly adding each rendering node to each DOM element so as to render each DOM element and generate a plurality of corresponding two-dimensional pictures;
and performing splicing processing on the two-dimensional pictures to generate the two-dimensional pictures, and creating a two-dimensional UI interface in the rendering scene so as to display the two-dimensional pictures in the two-dimensional UI interface in real time.
In the above two-dimensional display system for web page 3D scene, the rendering module is further specifically configured to:
creating a corresponding control button and a corresponding sliding block in the two-dimensional UI through a first preset program, and acquiring UI elements in the two-dimensional UI through a second preset program;
and establishing a mapping relation among the UI elements, the control buttons and the sliding blocks, and constructing a corresponding controller based on the mapping relation, wherein the controller is used for controlling the two-dimensional UI interface.
In the above two-dimensional display system for web page 3D scene, the detection module is specifically configured to:
when the three-dimensional scene model is acquired, identifying model elements contained in the three-dimensional scene model, wherein the model elements contain buildings, environments and characters;
and calculating the duty ratio of the building, the environment and the person in the three-dimensional scene model one by one, and determining the model type corresponding to the three-dimensional scene model according to the duty ratio.
In the above two-dimensional display system for web page 3D scene, the detection module is further specifically configured to:
calling a corresponding rendering model in a preset model database according to the model type, wherein the rendering model comprises an analysis layer, a fusion layer and an output layer;
inputting the model elements into the analysis layer so that the analysis layer outputs corresponding model features;
inputting the model features and the DOM numbers into the fusion layer at the same time, so that the fusion layer carries out fusion processing on the model features and the DOM numbers and generates the rendering tree;
and outputting the rendering tree in real time through the output layer, wherein the rendering tree has uniqueness.
A seventh embodiment of the present invention provides a computer, including a memory, a processor, and a computer program stored in the memory and capable of running on the processor, where the processor implements the two-dimensional display method for a web page 3D scene provided in the above embodiment when executing the computer program.
An eighth embodiment of the present invention provides a readable storage medium having stored thereon a computer program, wherein the program when executed by a processor implements the web page 3D scene two-dimensional display method provided in the above embodiment.
In summary, the two-dimensional display method and system for the webpage 3D scene provided by the embodiment of the invention can complete the two-dimensional rendering of the three-dimensional scene model on the premise of not generating a large amount of data and consuming more computing resources, so that the rendering efficiency is correspondingly improved, and the use experience of a user is improved.
The above-described respective modules may be functional modules or program modules, and may be implemented by software or hardware. For modules implemented in hardware, the various modules described above may be located in the same processor; or the above modules may be located in different processors in any combination.
Logic and/or steps represented in the flowcharts or otherwise described herein, e.g., a ordered listing of executable instructions for implementing logical functions, can be embodied in any computer-readable medium for use by or in connection with an instruction execution system, apparatus, or device, such as a computer-based system, processor-containing system, or other system that can fetch the instructions from the instruction execution system, apparatus, or device and execute the instructions. For the purposes of this description, a "computer-readable medium" can be any means that can contain, store, communicate, propagate, or transport the program for use by or in connection with the instruction execution system, apparatus, or device.
More specific examples (a non-exhaustive list) of the computer-readable medium would include the following: an electrical connection (electronic device) having one or more wires, a portable computer diskette (magnetic device), a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber device, and a portable compact disc read-only memory (CDROM). In addition, the computer readable medium may even be paper or other suitable medium on which the program is printed, as the program may be electronically captured, via, for instance, optical scanning of the paper or other medium, then compiled, interpreted or otherwise processed in a suitable manner, if necessary, and then stored in a computer memory.
It is to be understood that portions of the present invention may be implemented in hardware, software, firmware, or a combination thereof. In the above-described embodiments, the various steps or methods may be implemented in software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented in hardware, as in another embodiment, may be implemented using any one or combination of the following techniques, as is well known in the art: discrete logic circuits having logic gates for implementing logic functions on data signals, application specific integrated circuits having suitable combinational logic gates, programmable Gate Arrays (PGAs), field Programmable Gate Arrays (FPGAs), and the like.
In the description of the present specification, a description referring to terms "one embodiment," "some embodiments," "examples," "specific examples," or "some examples," etc., means that a particular feature, structure, material, or characteristic described in connection with the embodiment or example is included in at least one embodiment or example of the present invention. In this specification, schematic representations of the above terms do not necessarily refer to the same embodiments or examples. Furthermore, the particular features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples.
The foregoing examples illustrate only a few embodiments of the invention and are described in detail herein without thereby limiting the scope of the invention. It should be noted that it will be apparent to those skilled in the art that several variations and modifications can be made without departing from the spirit of the invention, which are all within the scope of the invention. Accordingly, the scope of protection of the present invention is to be determined by the appended claims.
Claims (10)
1. A method for two-dimensional display of a web page 3D scene, the method comprising:
receiving an IP address input by a user in real time, and sending the IP address to a server to acquire webpage resource information corresponding to the IP address, which is issued by the server in real time;
judging whether the webpage resource information contains a three-dimensional scene model or not in real time;
if the webpage resource information is judged to contain the three-dimensional scene model in real time, extracting an HTML document contained in the three-dimensional scene model, and analyzing the HTML document to generate a corresponding DOM tree;
detecting a model type corresponding to the three-dimensional scene model, and generating a corresponding rendering tree according to the model type and the DOM tree;
and carrying out two-dimensional rendering on the three-dimensional scene model through the rendering tree to generate a corresponding two-dimensional picture, and displaying the two-dimensional picture in a webpage in real time.
2. The web page 3D scene two-dimensional display method according to claim 1, wherein: the step of sending the IP address to a server to obtain web resource information corresponding to the IP address, which is issued by the server in real time, includes:
sending an HTTP request to the server through the IP address, wherein the HTTP request comprises a request type, a request header and a request body;
feeding back a corresponding response instruction through the server according to the request type, the request head and the request main body, wherein the response instruction comprises a state code, a response head and a response main body;
judging whether the HTTP request is successful or not according to the status code in real time;
and if the HTTP request is judged to be successful in real time according to the state code, extracting the webpage resource information from the response header.
3. The web page 3D scene two-dimensional display method according to claim 1, wherein: the step of parsing the HTML document to generate a corresponding DOM tree includes:
carrying out full-disk scanning on the HTML document to identify a plurality of document nodes contained in the HTML document, wherein each document node has uniqueness;
and respectively converting each document node into a corresponding DOM element, and inputting a plurality of DOM elements into a preset DOM frame to correspondingly generate the DOM tree, wherein the DOM tree has uniqueness.
4. A web page 3D scene two-dimensional display method according to claim 3, characterized in that: the step of performing two-dimensional rendering on the three-dimensional scene model through the rendering tree to generate a corresponding two-dimensional picture comprises the following steps:
calling out a preset renderer, and creating a rendering scene in the webpage;
inputting the rendering tree into the preset renderer to output a plurality of corresponding rendering nodes;
correspondingly adding each rendering node to each DOM element so as to render each DOM element and generate a plurality of corresponding two-dimensional pictures;
and performing splicing processing on the two-dimensional pictures to generate the two-dimensional pictures, and creating a two-dimensional UI interface in the rendering scene so as to display the two-dimensional pictures in the two-dimensional UI interface in real time.
5. The method for two-dimensional display of a 3D scene of a web page according to claim 4, wherein: the step of creating a two-dimensional UI interface in the rendered scene includes:
creating a corresponding control button and a corresponding sliding block in the two-dimensional UI through a first preset program, and acquiring UI elements in the two-dimensional UI through a second preset program;
and establishing a mapping relation among the UI elements, the control buttons and the sliding blocks, and constructing a corresponding controller based on the mapping relation, wherein the controller is used for controlling the two-dimensional UI interface.
6. The web page 3D scene two-dimensional display method according to claim 1, wherein: the step of detecting the model type corresponding to the three-dimensional scene model comprises the following steps:
when the three-dimensional scene model is acquired, identifying model elements contained in the three-dimensional scene model, wherein the model elements contain buildings, environments and characters;
and calculating the duty ratio of the building, the environment and the person in the three-dimensional scene model one by one, and determining the model type corresponding to the three-dimensional scene model according to the duty ratio.
7. The web page 3D scene two-dimensional display method according to claim 6, wherein: the step of generating a corresponding rendering tree according to the model type and the DOM tree comprises the following steps:
calling a corresponding rendering model in a preset model database according to the model type, wherein the rendering model comprises an analysis layer, a fusion layer and an output layer;
inputting the model elements into the analysis layer so that the analysis layer outputs corresponding model features;
inputting the model features and the DOM numbers into the fusion layer at the same time, so that the fusion layer carries out fusion processing on the model features and the DOM numbers and generates the rendering tree;
and outputting the rendering tree in real time through the output layer, wherein the rendering tree has uniqueness.
8. A web page 3D scene two-dimensional display system, the system comprising:
the receiving module is used for receiving the IP address input by the user in real time and sending the IP address to the server so as to acquire webpage resource information which is issued by the server in real time and corresponds to the IP address;
the judging module is used for judging whether the webpage resource information contains a three-dimensional scene model or not in real time;
the analysis module is used for extracting an HTML document contained in the three-dimensional scene model and analyzing the HTML document to generate a corresponding DOM tree if the three-dimensional scene model is judged to be contained in the webpage resource information in real time;
the detection module is used for detecting the model type corresponding to the three-dimensional scene model and generating a corresponding rendering tree according to the model type and the DOM tree;
and the rendering module is used for performing two-dimensional rendering on the three-dimensional scene model through the rendering tree so as to generate a corresponding two-dimensional picture, and displaying the two-dimensional picture in a webpage in real time.
9. A computer comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements the method of two-dimensional display of a web page 3D scene as claimed in any one of claims 1 to 7 when the computer program is executed by the processor.
10. A readable storage medium having stored thereon a computer program, which when executed by a processor implements a method of two-dimensional displaying a 3D scene of a web page as claimed in any of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311077499.1A CN117093793A (en) | 2023-08-25 | 2023-08-25 | Webpage 3D scene two-dimensional display method and system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311077499.1A CN117093793A (en) | 2023-08-25 | 2023-08-25 | Webpage 3D scene two-dimensional display method and system |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117093793A true CN117093793A (en) | 2023-11-21 |
Family
ID=88781723
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311077499.1A Pending CN117093793A (en) | 2023-08-25 | 2023-08-25 | Webpage 3D scene two-dimensional display method and system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117093793A (en) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20170357383A1 (en) * | 2016-06-10 | 2017-12-14 | Ebay Inc. | Optimization for browser rendering during navigation |
| CN107832108A (en) * | 2016-09-14 | 2018-03-23 | 阿里巴巴集团控股有限公司 | Rendering intent, device and the electronic equipment of 3D canvas web page elements |
| US20180143757A1 (en) * | 2016-11-18 | 2018-05-24 | Zspace, Inc. | 3D User Interface |
| CN111859215A (en) * | 2020-06-30 | 2020-10-30 | 维沃移动通信有限公司 | Page display method and device, electronic equipment and readable storage medium |
| CN115550687A (en) * | 2022-09-23 | 2022-12-30 | 中国电信股份有限公司 | Three-dimensional model scene interaction method, system, equipment, device and storage medium |
| CN116503529A (en) * | 2023-04-13 | 2023-07-28 | 阿里巴巴（中国）有限公司 | Rendering, 3D picture control method, electronic device, and computer-readable storage medium |
-
2023
- 2023-08-25 CN CN202311077499.1A patent/CN117093793A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20170357383A1 (en) * | 2016-06-10 | 2017-12-14 | Ebay Inc. | Optimization for browser rendering during navigation |
| CN107832108A (en) * | 2016-09-14 | 2018-03-23 | 阿里巴巴集团控股有限公司 | Rendering intent, device and the electronic equipment of 3D canvas web page elements |
| US20180143757A1 (en) * | 2016-11-18 | 2018-05-24 | Zspace, Inc. | 3D User Interface |
| CN111859215A (en) * | 2020-06-30 | 2020-10-30 | 维沃移动通信有限公司 | Page display method and device, electronic equipment and readable storage medium |
| CN115550687A (en) * | 2022-09-23 | 2022-12-30 | 中国电信股份有限公司 | Three-dimensional model scene interaction method, system, equipment, device and storage medium |
| CN116503529A (en) * | 2023-04-13 | 2023-07-28 | 阿里巴巴（中国）有限公司 | Rendering, 3D picture control method, electronic device, and computer-readable storage medium |
Non-Patent Citations (1)
| Title |
|---|
| 吕智涵;冯圣中;陈戈;: "基于多维WebGIS的三维互动网络虚拟社区", 系统仿真学报, no. 09, 8 September 2013 (2013-09-08) * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112433799A (en) | Page generation method, device, equipment and medium | |
| US8549395B2 (en) | Method and system for transforming an integrated webpage | |
| JP4583218B2 (en) | Method, computer program, and system for evaluating target content | |
| AU2017210597A1 (en) | System and method for the online editing of pdf documents | |
| CN108829371B (en) | Interface control method and device, storage medium and electronic equipment | |
| CN109032917B (en) | Page debugging method and system, mobile terminal and computer terminal | |
| KR20190001894A (en) | Method for creating web documents and Apparatus thereof | |
| CN108632361B (en) | Webpage online method, server, system and storage medium | |
| US20150149888A1 (en) | Systems and methods for executing aspects of a document | |
| CN113655999B (en) | Page control rendering method, device, equipment and storage medium | |
| CN111428169A (en) | Optimization method, system, server and storage medium for page loading | |
| US20040100489A1 (en) | Automatic 3-D web content generation | |
| CN111737614B (en) | Page display method, page display device, electronic equipment and storage medium | |
| CN113688341B (en) | Dynamic picture decomposition method and device, electronic equipment and readable storage medium | |
| CN113887442A (en) | OCR training data generation method, device, equipment and medium | |
| CN114168853A (en) | Data visualization display method, device, medium and electronic equipment | |
| CN114218052A (en) | Service interaction graph generation method, device, equipment and storage medium | |
| CN110442806B (en) | Method and apparatus for recognizing image | |
| CN113535541A (en) | Test method, test device, storage medium and computer equipment | |
| CN117093793A (en) | Webpage 3D scene two-dimensional display method and system | |
| CN114741144B (en) | Web-side complex form display method, device and system | |
| CN116578795A (en) | Webpage generation method and device, storage medium and electronic equipment | |
| CN113971251A (en) | Webpage output method, system and computer readable storage medium | |
| CN114443022A (en) | Method for generating page building block and electronic equipment | |
| CN114331932A (en) | Target image generation method and device, computing equipment and computer storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |