CN112560189A - Page display method and device, computer equipment and readable storage medium - Google Patents
Page display method and device, computer equipment and readable storage medium Download PDFInfo
- Publication number
- CN112560189A CN112560189A CN202011558768.2A CN202011558768A CN112560189A CN 112560189 A CN112560189 A CN 112560189A CN 202011558768 A CN202011558768 A CN 202011558768A CN 112560189 A CN112560189 A CN 112560189A
- Authority
- CN
- China
- Prior art keywords
- page
- automobile model
- dimensional
- display
- target file
- 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 71
- 238000012544 monitoring process Methods 0.000 claims abstract description 18
- 239000011159 matrix material Substances 0.000 claims description 18
- 238000009877 rendering Methods 0.000 claims description 14
- 238000004590 computer program Methods 0.000 claims description 9
- 238000005286 illumination Methods 0.000 claims description 5
- 238000012545 processing Methods 0.000 claims description 5
- 238000004806 packaging method and process Methods 0.000 claims description 4
- 238000013519 translation Methods 0.000 claims description 4
- 238000005538 encapsulation Methods 0.000 claims description 3
- 230000008569 process Effects 0.000 description 12
- 230000005540 biological transmission Effects 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 238000012549 training Methods 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 241000233805 Phoenix Species 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000000605 extraction Methods 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 239000000463 material Substances 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000007781 pre-processing Methods 0.000 description 1
- 230000035807 sensation Effects 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
- 230000009466 transformation Effects 0.000 description 1
- 238000000844 transformation Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F30/00—Computer-aided design [CAD]
- G06F30/10—Geometric CAD
- G06F30/15—Vehicle, aircraft or watercraft design
-
- 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/953—Querying, e.g. by the use of web search engines
- G06F16/9538—Presentation of query results
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/005—General purpose rendering architectures
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- Theoretical Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Geometry (AREA)
- Databases & Information Systems (AREA)
- General Engineering & Computer Science (AREA)
- Computer Graphics (AREA)
- Mathematical Analysis (AREA)
- Mathematical Optimization (AREA)
- Pure & Applied Mathematics (AREA)
- Computer Hardware Design (AREA)
- Evolutionary Computation (AREA)
- Computational Mathematics (AREA)
- Aviation & Aerospace Engineering (AREA)
- Software Systems (AREA)
- Automation & Control Theory (AREA)
- Data Mining & Analysis (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention discloses a page display method, a page display device, computer equipment and a readable storage medium, which relate to the technical field of application program display and comprise the steps of monitoring the operation of a user on a page and obtaining a display request according to the page operation; calling a related target file according to the display request; the method comprises the steps of calling a renderer on a browser page canvas, displaying the established three-dimensional automobile model according to the operation result of the renderer, achieving three-dimensional display of the automobile model on the browser canvas, and solving the problems that specific software generally needs to be installed in existing three-dimensional file display, when an automobile accessory image is viewed, the three-dimensional software needs to be called to be opened, and operation is quite inconvenient.
Description
Technical Field
The invention relates to the technical field of application program display, in particular to a page display method and device, computer equipment and a readable storage medium.
Background
With the development of market economy, the quantity of automobiles owned in China is continuously increased, so that the demand of automobile after-market accessories is also continuously increased. However, at present, common accessory pictures are mostly adopted in automobile accessory webpages, and details of accessories cannot be viewed from multiple directions.
Therefore, a method for displaying automobile parts in three dimensions is needed, however, the existing three-dimensional file display generally needs to install specific software, when the images of the automobile parts are viewed, the three-dimensional software needs to be called to open, the images cannot be directly viewed in a browser, and particularly when a plurality of parts need to be viewed, the operation is very inconvenient.
Disclosure of Invention
The invention aims to provide a page display method, a page display device, computer equipment and a readable storage medium, which are used for solving the problems that the existing three-dimensional file display generally needs to install specific software, and when an automobile accessory image is checked, the three-dimensional software needs to be called to be opened, so that the operation is very inconvenient.
In order to achieve the above object, the present invention provides a page display method, including:
monitoring the operation of a user on a page, and obtaining a display request according to the page operation;
calling a related target file according to the display request;
and calling a renderer on the browser page canvas, and displaying the established three-dimensional automobile model according to the operation result of the renderer.
Further, the retrieving of the associated target file according to the presentation request includes the following steps:
sending the display request to a back-end server, and acquiring a target file address stored on the IOBS platform cloud through the back-end server;
and calling the associated target file according to the target file address.
Further, calling a renderer and displaying the established three-dimensional automobile model according to an operation result of the renderer, wherein the method comprises the following steps:
and calling a 3D tool three. js packaging 3D drawing protocol Web GL to display the established three-dimensional automobile model.
Further, the step of calling a 3D tool three. js encapsulation 3D drawing protocol Web GL to display the established three-dimensional automobile model includes the following steps:
adopting a three.js tool to obtain a three-dimensional automobile model according to the target file;
and calling bottom-layer graphic hardware by adopting the Web GL drawing protocol to display the three-dimensional automobile model through a browser page.
And further, obtaining a three-dimensional automobile model according to the target file by adopting a three.
Analyzing the target file to obtain the inclusion or connection relation among all parts of the automobile model;
assembling each part by adopting a model matrix and a view matrix to obtain an initial automobile model;
and processing by adopting a preset illumination matrix based on the initial automobile model to obtain a three-dimensional automobile model.
Further, the method further comprises:
and adjusting the three-dimensional automobile model in real time according to the user operation to obtain an updated three-dimensional automobile model and displaying the updated three-dimensional automobile model on a canvas of the browser.
Further, the adjusting the three-dimensional automobile model in real time according to the user operation to obtain an updated three-dimensional automobile model and display the updated three-dimensional automobile model on a browser canvas includes the following steps:
monitoring the operation of a user on a page canvas, and executing a corresponding script language according to the operation on the page canvas;
and adjusting the established three-dimensional automobile model according to the executed script language, wherein the adjustment comprises rotation, translation and zooming, and the updated three-dimensional automobile model is obtained and displayed on a browser canvas.
In order to achieve the above object, the present invention further provides a page display method and device, including:
the monitoring module is used for monitoring the operation of a user on a page and obtaining a display request according to the page operation;
the acquisition module is used for calling the associated target file according to the display request;
and the rendering module is used for calling the renderer on the browser page canvas and displaying the established three-dimensional automobile model according to the operation result of the renderer.
In order to achieve the above object, the present invention further provides a computer device, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the page display method when executing the computer program.
In order to achieve the above object, the present invention further provides a computer-readable storage medium, which includes a plurality of storage media, each storage medium storing a computer program, and the computer programs stored in the storage media, when executed by a processor, collectively implement the steps of the page display method.
According to the page display method, the page display device, the computer equipment and the readable storage medium, the target file associated with the automobile model to be displayed is called through the display request, the renderer is called through the rendering module after the target file is obtained, the three-dimensional automobile model established according to the target file is displayed on the browser page canvas, the three-dimensional display of the automobile model on the browser canvas is achieved, and the problems that specific software generally needs to be installed when the existing three-dimensional file is displayed, and when the automobile accessory image is viewed, the three-dimensional software needs to be called to be opened, and the operation is very inconvenient are solved.
Drawings
FIG. 1 is a flowchart of a first embodiment of a page display method according to the present invention;
FIG. 2 is a flowchart of a page display method according to an embodiment of the present invention, for determining an auto part to be displayed according to a user selection;
FIG. 3 is a flowchart illustrating a method for retrieving an associated target file according to the display request according to a first embodiment of the page display method of the present invention;
fig. 4 is a flowchart of a three-dimensional automobile model established by calling a 3D tool three. js encapsulation 3D drawing protocol Web GL to show in the first page showing method embodiment of the present invention;
FIG. 5 is a flowchart of a method for displaying a page according to an embodiment of the present invention, in which a 3D tool is adopted three.js to obtain a three-dimensional automobile model according to the target file;
FIG. 6 is a flowchart illustrating the method further comprising adjusting the three-dimensional automobile model according to a user operation in the first embodiment of the page displaying method according to the present invention;
FIG. 7 is a flowchart illustrating a process of adjusting the three-dimensional automobile model according to a user operation to obtain an updated three-dimensional automobile model and displaying the updated three-dimensional automobile model on a browser canvas in the first embodiment of the page displaying method according to the present invention;
FIG. 8 is a schematic diagram of a program module of a second apparatus for page display method according to the present invention;
fig. 9 is a schematic diagram of a hardware structure of a computer device according to a third embodiment of the present invention.
Reference numerals:
4. page display method device 41, model training module 42 and preprocessing module
43. Execution module 431, analysis unit 432 and extraction unit
433. Adjusting unit 5, computer device 51, memory
52. Processor 53, network interface
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention is described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
It should be noted that the embodiments and features of the embodiments may be combined with each other without conflict. Furthermore, the terms "first", "second" and "first" are used for descriptive purposes only and are not to be construed as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of the present invention, "a plurality" means two or more unless specifically defined otherwise.
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 in the description herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the invention. As used herein, the term "and/or" includes any and all combinations of one or more of the associated listed items.
The invention provides a page display method, a page display device, computer equipment and a readable storage medium, relates to the technical field of application program display, and aims to provide a page display method based on a monitoring module, an acquisition module, a rendering module and an adjustment module. The method comprises the steps of monitoring the operation of a user on a page through a monitoring module, obtaining a display request according to the selection of the user, then obtaining unique identification information corresponding to an automobile model to be displayed and included in the display request through an obtaining module to call a target file related to the automobile model to be displayed, calling a renderer through a rendering module after obtaining the target file, and displaying a three-dimensional automobile model established according to the target file on a canvas of a browser page. The three-dimensional display of the automobile model on the browser canvas is realized through the mode, the display is different from the existing two-dimensional picture display, and the problems that specific software is generally required to be installed in the existing three-dimensional file display, when an automobile accessory image is checked, the three-dimensional software is required to be called to be opened, and the operation is very inconvenient are solved.
Example one
Referring to fig. 1, the present embodiment of a page display method, which relates to an automobile model page display method, is applied to an automobile part creation platform browser page, and includes the following steps:
s100: monitoring the operation of a user on a page, and obtaining a display request according to the page operation;
the automobile part display method is used for an automobile part browser page, a user can click pre-configured labels such as automobile part labels or automobile pictures to achieve three-dimensional display of the automobile parts when browsing the automobile parts on the creation platform, the problem that in the prior art, only one or more two-dimensional pictures are displayed on most automobile part webpages, three-dimensional display is not supported, and details of the parts cannot be viewed in multiple directions is solved. Specifically, the user's operations on the page include, but are not limited to, clicking, dragging, and the like.
The step S100 is used for determining the automobile parts to be displayed according to the user selection, and referring to fig. 2, the method specifically includes the following steps:
s110: presetting a plurality of three-dimensional automobile model names on the page, wherein the states of the three-dimensional automobile model names are set to be unselected;
in the scheme, the name of the automobile model is set as a preset tag on a front-end page, so that a user can select to view the corresponding three-dimensional automobile model, and in a specific implementation scene, tags in other forms can be selected so as to be convenient for the user to click, as an example, not a limitation, an accessory (namely the automobile model in the scheme) picture, a marking character and the like, or a preset formulated triggering mode is adopted.
S120: monitoring the operation on the page in real time to obtain the name of the selected three-dimensional automobile model;
in the steps, the selected three-dimensional automobile model can be not limited to one, specifically, the automobile models can be selected to be checked in sequence, the three-dimensional automobile models can be checked without page jump by the display method of the scheme, the three-dimensional automobile models can jump into third-party software without page jump in the process of checking the page, and the problem that the existing special software needs to be opened to cause complex use is reduced.
S130: and generating a display request according to the selected three-dimensional automobile model name.
In this scheme, based on the above steps, the automobile model to be displayed may be determined according to the name of the selected three-dimensional automobile model, and a display request is generated according to a unique identifier (specifically, name, code, etc.) corresponding to the automobile model, so that a file of the automobile model is called for three-dimensional display in the following step.
S200: calling a related target file according to the display request;
in the above solution, the associated target file is a three-dimensional file corresponding to the automobile model to be displayed, and may be determined by the unique identifier corresponding to the automobile model in the step S130, and it should be particularly noted that, in order to meet the requirement of three-dimensional display, unlike a two-dimensional picture (e.g., jpg) often used in the prior art, the target file is 3D.
Specifically, referring to fig. 3, the retrieving the associated target file specifically includes the following steps:
providing an IOBS platform cloud used for storing a plurality of target files in advance;
before the target file is called, the target file needs to be uploaded to the IOBS platform cloud manually or automatically, the file uploading can be operated in batches, and when the target file is stored on the IOBS platform cloud, file addresses corresponding to all the target files can be generated automatically, so that the corresponding target file can be called by obtaining the file addresses in the subsequent steps.
S210: sending the display request to an IOBS platform cloud to a back-end server, and acquiring a target file address stored on the IOBS platform cloud through the back-end server;
in the scheme, in the implementation process of three-dimensional display, a background server (Backend API) is required to call the target file stored on the IOBS platform cloud, so that after a display request is sent to the background server, the background server sends the request to the IOBS platform cloud, and then the returned target file address can be obtained from the background server.
S220: and calling the associated target file according to the target file address.
Based on the step S210, the address of the target file generated on the IOBS platform cloud may be obtained, and the target file may be called according to the target file.
S300: and calling a renderer on the browser page canvas, and displaying the established three-dimensional automobile model according to the operation result of the renderer.
In the present solution, a JS Client Render is adopted as a renderer, dynamically-loadable images are displayed on a front-end page, and in order to adapt to the use in an actual usage scene, the rendering process in step S300 may also be executed by adopting other existing renderers, such as, for example and without limitation, renderers such as a CSS2drender, an svg Render, and a canvas renderer.
In this embodiment, the step S300 includes the following specific steps: and calling a 3D tool three. js packaging 3D drawing protocol Web GL to display the established three-dimensional automobile model.
Specifically, three.js performs one-layer packaging on the basis of the API interface of the WebGL, abstracts the details of the API, and disassembles the 3D scene into meshes, materials and light sources. It should be noted that, besides three. JS tool (JS Client Render), Web GL protocol is required to implement three-dimensional display. Specifically, the step of calling the 3D tool three. js package 3D drawing protocol Web GL to display the established three-dimensional automobile model refers to fig. 4, and includes the following steps:
s310: js obtaining a three-dimensional automobile model according to the target file by adopting a 3D tool three;
specifically, referring to fig. 5, the obtaining of the three-dimensional automobile model according to the object file by using the 3D tool three.js in the step S310 includes the following steps:
s311: analyzing the target file to obtain the inclusion or connection relation among all parts of the automobile model;
in the above steps, a certain automobile model (accessory) may include one or more components, and the final three-dimensional automobile model is generated by assembling according to the positions or connection relations of the components, so that the target file needs to be analyzed and the specific positions of the components are obtained by analyzing when the three-dimensional automobile model is generated.
S312: assembling each part by adopting a model matrix and a view matrix to obtain an initial automobile model;
in the above steps, the model matrix is used to represent a series of transformations, the model matrix and the view matrix are used to position each component, and may be adjusted autonomously according to the analysis result of the target file, and the model matrix and the view matrix are mainly used to position each component, thereby completing assembly to obtain a complete three-dimensional automobile model, and meanwhile, the model matrix and the view matrix may also be used to implement operations such as translation and rotation of the model in the process of adjusting the three-dimensional automobile model according to user operations in subsequent step S400.
S313: and processing by adopting a preset illumination matrix based on the initial automobile name to obtain a three-dimensional automobile model.
It should be noted that the illumination matrix is used for generating shadow sensations at different angles, so that the three-dimensional automobile model is more real and clear, the light intensity and the angle in the illumination matrix are preset optimal parameters, the optimal parameters can be obtained through manual multiple adjustment, fire and phoenix can also be automatically calculated through the training model, and the adjustment can be preset according to the type of the automobile model. More specifically, the scheme is based on the Threejs technology, a special form of combining a plurality of hemispherical lights and a plurality of parallel lights in a tool library is adopted, continuous improvement and testing are carried out, the optimal angle result is preferably selected by utilizing color differences of different angles, the effect of clearly seeing the model and the texture can be realized from various angles, and the definition and the texture visibility of the model are kept in the process of randomly rotating and zooming the model by a user.
S320: and calling bottom layer graphics hardware by adopting the 3D drawing protocol Web GL to display the three-dimensional automobile model through a browser page.
As described in step S300 above, the three-dimensional model needs to rely on the protocol Web GL to realize the display of the front-end browser page, and the direct display of the three-dimensional automobile model in the browser page can be realized through the above steps, which is different from the problem that only two-dimensional pictures can be displayed in the prior art, which causes the inability to view details in all directions, and the manner of obtaining the display is simple and easy to operate.
After the renderer is called and the established three-dimensional automobile model is displayed according to the operation result of the renderer, in order to facilitate a user to view details of the automobile model more accurately and comprehensively, referring to fig. 6, the method further includes S400: adjusting the three-dimensional automobile model according to the user operation to obtain an updated three-dimensional automobile model and displaying the updated three-dimensional automobile model on a browser canvas, specifically referring to fig. 7, the method comprises the following steps:
s410: monitoring the operation of a user on a page canvas, and executing a corresponding script language according to the operation on the page canvas;
in the above steps, the adjustment of the three-dimensional automobile model is performed according to the operation of the user on the canvas, for example, a certain part of the automobile model is enlarged to observe local details, and the like, the adjustment of the model by the user is limited to the adjustment of angles, proportions or component positions, and the original object file is not modified, so that the adjusted automobile model can be re-rendered after the user adjusts the rendering process by executing the change of parameters in the script language control rendering process, and the adjusted automobile model is displayed.
S420: and adjusting the established three-dimensional automobile model according to the executed script language, obtaining an updated three-dimensional automobile model and displaying the updated three-dimensional automobile model on a browser canvas, wherein the adjustment comprises but is not limited to rotation, translation and zooming.
In the scheme, three-dimensional display and zooming rotation interaction is used, and the method is different from the method that only common accessory pictures are displayed in the prior art, so that the view is more visual and close to actual accessories, the display effect is more visual, and details such as texture structures of the accessories can be comprehensively viewed through rotation and zooming.
In the scheme, a display request is sent by receiving an automobile model name selected by a user, a target file address is obtained from an IOBS platform cloud by depending on a backend device to call a target file, and then a 3D tool three.js is called by a front end to package a 3D drawing protocol Web GL to realize direct display of a three-dimensional automobile model in a browser, the method is different from the mode of only displaying two-dimensional pictures in the prior art, the comprehensiveness of the automobile model viewed by the user is further improved, special 3D software is not required to be called during viewing, multiple times of calling are not required during viewing a plurality of models, the simplicity of operation is improved, and meanwhile, in the using process, the method can be used for re-rendering by using a script language based on the operation of the user on a page to realize the adjustment (including but not limited to zooming, moving, rotating and the like) of the three-dimensional automobile model by the user, the comprehensiveness of the user, the problem that details cannot be checked only through a two-dimensional picture in the prior art is solved.
The target file can also be uploaded to the blockchain so as to be subsequently applied to other platforms, namely, the blockchain is adopted to replace an IOBS platform cloud, the security and the fair transparency to a user can be guaranteed by uploading the target file to the blockchain, the target file can be downloaded from the blockchain through the background server after a display request is received each time so as to check whether the priority list is tampered, and the target file can be downloaded from the blockchain for page display subsequently.
The block chain referred by the application is a novel application mode of computer technologies such as distributed data storage, point-to-point transmission, a consensus mechanism, an encryption algorithm and the like. A block chain (Blockchain), which is essentially a decentralized database, is a series of data blocks associated by using a cryptographic method, and each data block contains information of a batch of network transactions, so as to verify the validity (anti-counterfeiting) of the information and generate a next block. The blockchain may include a blockchain underlying platform, a platform product service layer, an application service layer, and the like.
Example two:
referring to fig. 8, a page display method and apparatus 5 of the present embodiment includes: a monitoring module 51, an acquisition module 52 and a rendering module 53.
The monitoring module 51 is configured to monitor an operation of a user on a page, and obtain a display request according to the page operation;
the obtaining module 52 is used for calling the associated target file according to the display request;
specifically, the obtaining module 52 further includes an address obtaining submodule 521 and a calling submodule 522;
the address obtaining submodule 521 is configured to send the display request to a back-end server, and obtain, by the back-end server, an address of a target file stored in the IOBS platform cloud;
and the invoking submodule 522 is configured to invoke the associated target file according to the target file address.
And the rendering module 53 is configured to invoke a renderer on the browser page canvas and display the established three-dimensional automobile model according to an operation result of the renderer.
Specifically, the rendering module calls a 3D tool three.
The page display method apparatus 5 further includes an adjusting module 54, configured to adjust the three-dimensional automobile model according to a user operation, where the adjusting includes, but is not limited to, rotating, translating, and zooming.
The technical scheme is based on application program display in development, operation of a user on a page is monitored through a monitoring module (such as selecting an automobile model name or a label preset on the page), a display request is obtained according to user selection, then an obtaining module is adopted to obtain the name of the automobile model to be displayed included in the display request or unique identification information corresponding to the automobile model to be displayed to call a target file related to the automobile model to be displayed, after the target file is obtained, a rendering module is used to call a renderer, and the three-dimensional automobile model established according to the target file is displayed on a canvas of a browser page. The three-dimensional display of the automobile model on the browser canvas is realized through the mode, the display is different from the existing two-dimensional picture display, the calling is not needed for multiple times when the multiple models are checked, the operation simplicity is improved, the problems that the specific software is generally required to be installed when the existing three-dimensional file display is used, the three-dimensional software is required to be called to be opened when the automobile accessory image is checked, and the operation is very inconvenient are solved. Meanwhile, according to user operation, the three-dimensional automobile model can be adjusted by the user through re-rendering by the adjusting module based on the script language corresponding to the user operation, and the observation of the user on the model details is further realized.
In the scheme, in the process of acquiring the target file by using the acquisition module, the address acquisition submodule is used for sending the display request to the back-end server, the target file address stored on the IOBS platform cloud is acquired through the back-end server, a plurality of target Files are stored in the IOBS platform cloud in advance, each target file address is generated independently, the target file is 3D. stl Source Files (namely Files in a 3D format), and the calling submodule is used for calling the associated target file according to the target file address so as to call the three-dimensional file corresponding to the automobile model to be displayed, thereby ensuring the realization of the three-dimensional display of the automobile model.
Example three:
in order to achieve the above object, the present invention further provides a computer device 6, where the computer device may include a plurality of computer devices, components of the page displaying apparatus 5 in the second embodiment may be dispersed in different computer devices 6, and the computer device 6 may be a smartphone, a tablet computer, a notebook computer, a desktop computer, a rack-mounted server, a blade server, a tower server, or a rack-mounted server (including an independent server or a server cluster formed by a plurality of servers) that executes a program, and the like. The computer device of the embodiment at least includes but is not limited to: a memory 61, a processor 62, a network interface 63 and a page presentation method apparatus 5 which can be communicatively connected to each other through a system bus, as shown in fig. 9. It should be noted that fig. 9 only shows a computer device with components, but it should be understood that not all of the shown components are required to be implemented, and more or fewer components may be implemented instead.
In the present embodiment, the memory 61 includes at least one type of computer-readable storage medium including a flash memory, a hard disk, a multimedia card, a card-type memory (e.g., SD or DX memory, etc.), a Random Access Memory (RAM), a Static Random Access Memory (SRAM), a Read Only Memory (ROM), an Electrically Erasable Programmable Read Only Memory (EEPROM), a Programmable Read Only Memory (PROM), a magnetic memory, a magnetic disk, an optical disk, and the like. In some embodiments, the memory 61 may be an internal storage unit of the computer device, such as a hard disk or a memory of the computer device. In other embodiments, the memory 61 may also be an external storage device of the computer device, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), or the like, provided on the computer device. Of course, the memory 61 may also include both internal storage of the computer device-; . The unit also includes its external storage device. In this embodiment, the memory 51 is generally used for storing an operating system and various application software installed on the computer device, such as the program code of the page display method apparatus 4 in the first embodiment. Further, the memory 51 may also be used to temporarily store various types of data that have been output or are to be output.
Processor 52 may be a Central Processing Unit (CPU), controller, microcontroller, microprocessor, or other data Processing chip in some embodiments. The processor 52 is typically used to control the overall operation of the computer device. In this embodiment, the processor 52 is configured to run a program code stored in the memory 51 or process data, for example, run a page showing method apparatus, so as to implement the page showing method of the first embodiment.
The network interface 53 may comprise a wireless network interface or a wired network interface, and the network interface 53 is typically used to establish a communication connection between the computer device 5 and other computer devices 5. For example, the network interface 53 is used to connect the computer device 5 to an external terminal through a network, establish a data transmission channel and a communication connection between the computer device 5 and the external terminal, and the like. The network may be a wireless or wired network such as an Intranet (Intranet), the Internet (Internet), a Global System of Mobile communication (GSM), Wideband Code Division Multiple Access (WCDMA), a 4G network, a 5G network, Bluetooth (Bluetooth), Wi-Fi, and the like.
It is noted that fig. 9 only shows the computer device 5 with components 51-53, but it is to be understood that not all shown components are required to be implemented, and that more or less components may be implemented instead.
In this embodiment, the page display method apparatus 4 stored in the memory 51 may also be divided into one or more program modules, and the one or more program modules are stored in the memory 51 and executed by one or more processors (in this embodiment, the processor 52), so as to complete the present invention.
Example four:
to achieve the above objects, the present invention also provides a computer-readable storage medium including a plurality of storage media such as a flash memory, a hard disk, a multimedia card, a card type memory (e.g., SD or DX memory, etc.), a Random Access Memory (RAM), a Static Random Access Memory (SRAM), a Read Only Memory (ROM), an Electrically Erasable Programmable Read Only Memory (EEPROM), a Programmable Read Only Memory (PROM), a magnetic memory, a magnetic disk, an optical disk, a server, an App application store, etc., on which a computer program is stored, which when executed by the processor 23, implements corresponding functions. The computer-readable storage medium of this embodiment is used for storing the page display apparatus 4, and when being executed by the processor 23, the page display method of the first embodiment is implemented.
The above-mentioned serial numbers of the embodiments of the present invention are merely for description and do not represent the merits of the embodiments.
Through the above description of the embodiments, those skilled in the art will clearly understand that the method of the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but in many cases, the former is a better implementation manner.
The above description is only a preferred embodiment of the present invention, and not intended to limit the scope of the present invention, and all modifications of equivalent structures and equivalent processes, which are made by using the contents of the present specification and the accompanying drawings, or directly or indirectly applied to other related technical fields, are included in the scope of the present invention.
Claims (10)
1. A page display method is characterized by comprising the following steps:
monitoring the operation of a user on a page, and obtaining a display request according to the page operation;
calling a related target file according to the display request;
and calling a renderer on the browser page canvas, and displaying the established three-dimensional automobile model according to the operation result of the renderer.
2. The page display method according to claim 1, wherein retrieving the associated target file according to the display request comprises:
sending the display request to a back-end server, and acquiring a target file address stored on the IOBS platform cloud through the back-end server;
and calling the associated target file according to the target file address.
3. The page display method according to claim 1, wherein calling a renderer and displaying the established three-dimensional automobile model according to the operation result of the renderer comprises the following steps:
and calling a 3D tool three. js packaging 3D drawing protocol Web GL to display the established three-dimensional automobile model.
4. The page display method according to claim 3, wherein said calling 3D tool three. js encapsulation 3D drawing protocol Web GL to display the established three-dimensional automobile model comprises the following:
adopting a three.js tool to obtain a three-dimensional automobile model according to the target file;
and calling bottom-layer graphic hardware by adopting the Web GL drawing protocol to display the three-dimensional automobile model through a browser page.
5. The page display method according to claim 4, wherein a three.js tool is used to obtain a three-dimensional automobile model from the object file, comprising the following steps:
analyzing the target file to obtain the inclusion or connection relation among all parts of the automobile model;
assembling each part by adopting a model matrix and a view matrix to obtain an initial automobile model;
and processing by adopting a preset illumination matrix based on the initial automobile model to obtain a three-dimensional automobile model.
6. The page presentation method of claim 1, further comprising:
and adjusting the three-dimensional automobile model in real time according to the user operation to obtain an updated three-dimensional automobile model and displaying the updated three-dimensional automobile model on a canvas of the browser.
7. The page display method of claim 6, wherein the adjusting the three-dimensional automobile model in real time according to the user operation to obtain an updated three-dimensional automobile model and displaying the updated three-dimensional automobile model on a browser canvas comprises the following steps:
monitoring the operation of a user on a page canvas, and executing a corresponding script language according to the operation on the page canvas;
and adjusting the established three-dimensional automobile model according to the executed script language, wherein the adjustment comprises rotation, translation and zooming, and the updated three-dimensional automobile model is obtained and displayed on a browser canvas.
8. A page display method device is characterized by comprising the following steps:
the monitoring module is used for monitoring the operation of a user on a page and obtaining a display request according to the page operation;
the acquisition module is used for calling the associated target file according to the display request;
and the rendering module is used for calling the renderer on the browser page canvas and displaying the established three-dimensional automobile model according to the operation result of the renderer.
9. A computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the steps of the page presentation method according to any one of claims 1 to 7 when executing the computer program.
10. A computer-readable storage medium comprising a plurality of storage media, each storage medium having a computer program stored thereon, wherein the computer programs stored in the storage media, when executed by a processor, collectively implement the steps of the page presentation method according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011558768.2A CN112560189A (en) | 2020-12-25 | 2020-12-25 | Page display method and device, computer equipment and readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011558768.2A CN112560189A (en) | 2020-12-25 | 2020-12-25 | Page display method and device, computer equipment and readable storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112560189A true CN112560189A (en) | 2021-03-26 |
Family
ID=75032400
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011558768.2A Pending CN112560189A (en) | 2020-12-25 | 2020-12-25 | Page display method and device, computer equipment and readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112560189A (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113516747A (en) * | 2021-05-19 | 2021-10-19 | 上海爱客博信息技术有限公司 | 3D dynamic content display method and device, computer equipment and storage medium |
| CN113742507A (en) * | 2021-09-17 | 2021-12-03 | 京东方科技集团股份有限公司 | Method for three-dimensionally displaying an article and associated device |
| CN114305965A (en) * | 2021-12-29 | 2022-04-12 | 深圳市倍轻松科技股份有限公司 | Massager control method |
| CN115617337A (en) * | 2022-10-21 | 2023-01-17 | 圣名科技(广州)有限责任公司 | Target frame based display model method and device, electronic equipment and storage medium |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP2084671A1 (en) * | 2006-10-02 | 2009-08-05 | Aftercad Software Inc. | Method and system for delivering and interactively displaying three-dimensional graphics |
| CN107832054A (en) * | 2017-11-30 | 2018-03-23 | 郑州云海信息技术有限公司 | A kind of methods of exhibiting and device of house property model |
| US20180210714A1 (en) * | 2017-01-25 | 2018-07-26 | Wal-Mart Stores, Inc. | Systems, method, and non-transitory computer-readable storage media for generating code for displaying a webpage |
| US20180315238A1 (en) * | 2017-05-01 | 2018-11-01 | Microsoft Technology Licensing, Llc | Three-dimensional model look-at-point rotation and viewport modes |
| CN111428165A (en) * | 2019-12-31 | 2020-07-17 | 深圳市工之易科技有限公司 | Three-dimensional model display method and device and electronic equipment |
| CN111931111A (en) * | 2020-08-14 | 2020-11-13 | 工银科技有限公司 | Webpage development method, webpage display method, device and equipment |
-
2020
- 2020-12-25 CN CN202011558768.2A patent/CN112560189A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP2084671A1 (en) * | 2006-10-02 | 2009-08-05 | Aftercad Software Inc. | Method and system for delivering and interactively displaying three-dimensional graphics |
| US20180210714A1 (en) * | 2017-01-25 | 2018-07-26 | Wal-Mart Stores, Inc. | Systems, method, and non-transitory computer-readable storage media for generating code for displaying a webpage |
| US20180315238A1 (en) * | 2017-05-01 | 2018-11-01 | Microsoft Technology Licensing, Llc | Three-dimensional model look-at-point rotation and viewport modes |
| CN107832054A (en) * | 2017-11-30 | 2018-03-23 | 郑州云海信息技术有限公司 | A kind of methods of exhibiting and device of house property model |
| CN111428165A (en) * | 2019-12-31 | 2020-07-17 | 深圳市工之易科技有限公司 | Three-dimensional model display method and device and electronic equipment |
| CN111931111A (en) * | 2020-08-14 | 2020-11-13 | 工银科技有限公司 | Webpage development method, webpage display method, device and equipment |
Non-Patent Citations (4)
| Title |
|---|
| 姚震;仲梁维;陈彩凤;: "基于Three.js的机械产品展示研究", 软件导刊 * |
| 晁阳;牛志伟;齐慧君;: "基于WebGL的BIM模型可视化研究", 水电能源科学 * |
| 朱向雷; 唐兰文; 邵学彬: "WebGL在大数据可视化***中的方法研究", 计算机光盘软件与应用 * |
| 王磊;高珏;金野;许华虎;: "基于Web3D无插件的三维模型展示的研究", 计算机技术与发展 * |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113516747A (en) * | 2021-05-19 | 2021-10-19 | 上海爱客博信息技术有限公司 | 3D dynamic content display method and device, computer equipment and storage medium |
| CN113742507A (en) * | 2021-09-17 | 2021-12-03 | 京东方科技集团股份有限公司 | Method for three-dimensionally displaying an article and associated device |
| CN114305965A (en) * | 2021-12-29 | 2022-04-12 | 深圳市倍轻松科技股份有限公司 | Massager control method |
| CN115617337A (en) * | 2022-10-21 | 2023-01-17 | 圣名科技(广州)有限责任公司 | Target frame based display model method and device, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112560189A (en) | Page display method and device, computer equipment and readable storage medium | |
| US11810237B2 (en) | Systems and methods for transmitting and rendering 3D visualizations over a network | |
| CN108876887B (en) | Rendering method and device | |
| US8010624B2 (en) | Dynamic composition for image transmission | |
| CN108876934B (en) | Key point marking method, device and system and storage medium | |
| CN103617191B (en) | Use the hardware-accelerated method and browser for realizing that browser renders | |
| US20100045662A1 (en) | Method and system for delivering and interactively displaying three-dimensional graphics | |
| CN111414225B (en) | Three-dimensional model remote display method, first terminal, electronic device and storage medium | |
| CN111950056B (en) | BIM display method and related equipment for building informatization model | |
| US9324166B2 (en) | Systems, methods, and apparatuses for creating digital glitter | |
| CN101059760B (en) | OPENGL to OPENGLIES translator and OPENGLIES emulator | |
| CN103838842A (en) | Method and device for loading new tab page | |
| CN111031293B (en) | Panoramic monitoring display method, device and system and computer readable storage medium | |
| CN107357503B (en) | Self-adaptive display method and system for three-dimensional model of industrial equipment | |
| US20180225408A1 (en) | System and method for interactive modeling and analysis of 3-d digital assemblies | |
| US11651560B2 (en) | Method and device of displaying comment information, and mobile terminal | |
| CN108597034B (en) | Method and apparatus for generating information | |
| ES2958257T3 (en) | Product display systems and methods by using a single page application | |
| CN114268828A (en) | Method, device and equipment for processing large-screen page and storage medium | |
| CN114020187B (en) | Font icon display method and device and electronic equipment | |
| CN115641397A (en) | Method and system for synthesizing and displaying virtual image | |
| CN115830212A (en) | Three-dimensional model display method and related equipment | |
| CN114782579A (en) | Image rendering method and device and storage medium | |
| AU2006228339A1 (en) | Processing system | |
| CN114063958A (en) | Page split-screen display method and device |
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 | ||
| WD01 | Invention patent application deemed withdrawn after publication | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20210326 |