CN116627580B - Multi-level cache three-dimensional model loading method for webpage end - Google Patents
Multi-level cache three-dimensional model loading method for webpage end Download PDFInfo
- Publication number
- CN116627580B CN116627580B CN202310911854.4A CN202310911854A CN116627580B CN 116627580 B CN116627580 B CN 116627580B CN 202310911854 A CN202310911854 A CN 202310911854A CN 116627580 B CN116627580 B CN 116627580B
- Authority
- CN
- China
- Prior art keywords
- model
- glb
- scene
- data
- loading
- 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.)
- Active
Links
- 238000011068 loading method Methods 0.000 title claims abstract description 45
- 238000000034 method Methods 0.000 claims abstract description 24
- 230000004044 response Effects 0.000 claims description 11
- 230000000977 initiatory effect Effects 0.000 claims description 6
- 238000009877 rendering Methods 0.000 claims description 5
- 238000004140 cleaning Methods 0.000 claims description 3
- 238000005286 illumination Methods 0.000 claims description 3
- 230000004048 modification Effects 0.000 claims description 3
- 238000012986 modification Methods 0.000 claims description 3
- 238000003825 pressing Methods 0.000 claims description 3
- 230000000007 visual effect Effects 0.000 claims description 3
- 230000006870 function Effects 0.000 description 4
- 230000008569 process Effects 0.000 description 3
- 238000010586 diagram Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000006835 compression Effects 0.000 description 1
- 238000007906 compression Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- 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
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/04815—Interaction with a metaphor-based environment or interaction object displayed as three-dimensional, e.g. changing the user viewpoint with respect to the environment or object
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0482—Interaction with lists of selectable items, e.g. menus
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Processing Or Creating Images (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The application relates to the technical field of three-dimensional model loading, in particular to a multi-level cache three-dimensional model loading method of a webpage end, which comprises the following steps: uploading a glb model file for constructing a scene to a model library, selecting a model from the model library, constructing the scene in a dragging mode, extracting scene data for storage, and uploading the stored scene data to a server; the browser loads the scene through the multi-level cache. The set glb model is stored in a menu bar in a picture form, so that the loading time can be saved; the method comprises the steps of classifying the models, storing a part of the models into a browser memory, storing a part of the models into a local cache database, and effectively improving the loading speed of the three-dimensional models at the webpage end, wherein the loading time is controlled to be less than 6 seconds during initial loading, and the time is optimized to be less than 3 seconds by using a multi-stage loading mode of the local cache and the browser memory.
Description
Technical Field
The application relates to the technical field of three-dimensional model loading, in particular to a multi-level cache three-dimensional model loading method of a webpage end.
Background
Building self-control refers to unified integration of a building equipment management system, a fire-fighting automatic alarm system, a public safety system, a smart card application system, an information guiding and issuing system, equipment, an engineering archive management system and the like, so that high sharing of building information is realized. The building control industry often needs a three-dimensional model to show conditions of buildings and equipment, and based on the limitations of a browser, how to smoothly show and operate a large three-dimensional model in a webpage becomes a core problem focused by a person skilled in the art.
The existing three-dimensional model loading technology has a plurality of problems in actual operation, and is limited by the capabilities of a browser and a display card, so that only small three-dimensional models and scenes can be normally loaded and rendered at the webpage end at present; if the prior art is used for loading a larger model, the bearing capacity of the display card is exceeded, so that the model is slowly loaded, and even the browser crashes. The building control industry often needs to load a very large scene or a relatively fine model, and only loading failure can be caused by the existing loading technology.
Even if the three-dimensional model is uploaded to a server in a dragging mode and then is loaded, rendering and displaying are carried out, the large three-dimensional model can be successfully loaded in a webpage, because some scenes are complex, the number of the models is numerous, and some model files are large, the situation of too slow loading is easy to cause, the three-dimensional model can be blocked, and the basic scaling, moving and rotating operations cannot be smoothly completed. For example, building and lighting scenes of a building, the storage amount reaches G, the uploading server still has hundreds of M after compression, and the downloading and rendering from the server normally take tens of seconds or even longer, so that the user experience is very bad.
The existing solution is to load the model into the local cache, however, the method does not process the details of the model, and the loading speed has room for improvement, so how to improve the loading speed of the three-dimensional model at the webpage end is a problem to be solved in the field.
Disclosure of Invention
Aiming at the problems that the browser is crashed, smooth operation cannot be realized or the loading speed is too slow caused by loading of the three-dimensional model in the building control industry, the three-dimensional model loading method of the multi-level cache of the webpage end is provided, the model is classified, one part of the model is stored in the memory of the browser, and the other part of the model is stored in the local cache database, so that the loading speed of the three-dimensional model of the webpage end is effectively shortened.
In order to achieve the above object, the present application is realized by the following technical scheme:
a three-dimensional model loading method of multi-level cache of a webpage end comprises the following steps:
s1: uploading a glb model file for constructing a scene to a model library, selecting a model from the model library, constructing the scene in a dragging mode, extracting scene data for storage, and uploading the stored scene data to a server;
s2: the browser loads a scene through multi-level cache, and specifically comprises the following steps:
s21: the method comprises the steps that a webpage end enters a scene page, scene data are acquired through network requests when a scene is loaded, the scene data are divided into json format and glb format, and files in the json format and the glb format are requested separately through 2 interfaces;
s22: judging whether the same glb model files exist in the browser memory, if so, acquiring the glb model files from the browser memory, directly entering step S26, and if not, entering step S23;
s23: judging whether the same glb model files exist in the local cache, if so, acquiring the glb model files from the local cache, and entering step S24, and if not, entering step S25;
s24: judging whether the obtained glb model file needs to be stored in a browser memory or not, if the obtained glb model file meets the conditions, storing the glb model file into the browser memory, and if the glb model file does not meet the conditions, not performing any processing, and entering step S26;
s25: initiating a network request, acquiring a glb model file, caching the glb model file to the local, and entering step S24;
s26: rendering a glb model file in the scene;
s27: and the glb model file is combined with the scene data to complete scene loading.
As a preferred embodiment of the present application, the step S1 is specifically divided into the following steps:
s11: built-in glb model files into a model library, and setting model basic data of the glb model;
s12: downloading the set glb model to the local, and storing the glb model in a menu bar in a picture form for selection;
s13: selecting a glb model, creating a scene in a dragging mode, and setting model parameters and scene parameters;
s14: extracting scene data of the created scene, and clicking a save button to save;
s15: and uploading the stored scene data to a server.
As a preferred embodiment of the present application, the step S13 includes the steps of:
s131: clicking a picture of the glb model in the menu bar, dragging into a browser scene drawing area, and initiating a local request;
s132: the glb model file is obtained locally and analyzed, and a three-dimensional model is rendered in a browser;
s133: clicking the rendered three-dimensional model, and dragging the three-dimensional model to carry out position modification by pressing a left button of a mouse through a space rectangular coordinate system and the coordinate position of a center point;
s134: setting the size of the model, the position and the rotation angle in a space rectangular coordinate system and the proportion parameters in the space rectangular coordinate system through a toolbar of the browser;
s135: judging whether the three-dimensional model has advanced attributes, if so, entering a step S136, and if not, directly entering a step S137;
s136: double-clicking the three-dimensional model, setting high-level attributes of the three-dimensional model, judging an animation event according to the interface point position state to set a switch lamp, and entering step S137 after finishing;
s137: the illumination brightness and the angle of the scene are set through the light and the visual angle tool of the browser.
As a preferred aspect of the present application, the scene data includes model base data, model parameters, and scene parameters; the model basic data comprise the number of model surfaces, the number of vertexes and material parameters, and are stored in a glb format; the model parameters comprise the size of the model, the position in a space rectangular coordinate system, the rotation angle and the proportion parameters in the space rectangular coordinate system, and are stored in json format; the scene parameters comprise light setting and direction locking setting, and are stored in json format.
As a preferred embodiment of the present application, the scene data further includes animation event data, where the animation event data includes associated points, point data types, total frame numbers, frame numbers and frame bits of true values, frame numbers and frame bits of false values, and is stored in json format.
As a preferred scheme of the application, the scene data further comprises response event data, wherein the response event data comprises associated points, event types and event actions, and the response event data is stored in json format.
As a preferable scheme of the application, after the model basic data is stored in the glb format, the model basic data is compressed and packed into the zip format and then uploaded to a server.
As a preferred embodiment of the present application, the step S15 specifically includes:
for a fixed three-dimensional model of electromechanical, electrical, office and building, the uploaded scene data are model base data and model parameters;
for the three-dimensional model which is electromechanical, electrical and rotates according to the point position data, the uploaded scene data are model base data, model parameters and animation event data;
for the electrical appliance, the three-dimensional model of the model state is switched according to the point position data, and the uploaded scene data are model base data, model parameters and response event data.
As a preferred embodiment of the present application, the step S24 specifically includes:
s241: judging whether the glb model file size is smaller than 50000 bytes, if so, entering step S242, and if not, not performing any processing;
s242: checking the occupation condition of the browser memory, judging whether the stored model files in the browser memory are less than 150, if so, storing the glb model files into the browser memory, and if not, entering step S243;
s243: cleaning a model file with earliest storage time in a browser memory, and then storing the glb model file into the memory
Compared with the prior art, the application has the beneficial effects that: the set glb model is stored in a menu bar in a picture form, so that the loading time can be saved; the method comprises the steps of classifying the models, storing a part of the models into a browser memory, storing a part of the models into a local cache database, and effectively improving the loading speed of the three-dimensional models at the webpage end, wherein the loading time is controlled to be less than 6 seconds during initial loading, and the time is optimized to be less than 3 seconds by using a multi-stage loading mode of the local cache and the browser memory.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are needed in the description of the embodiments will be briefly described below, it being obvious that the drawings in the following description are only some embodiments of the present application, and that other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art. Wherein:
FIG. 1 is a flow chart of the method of the present application;
FIG. 2 is a flowchart of a method of step S13 in an embodiment of the present application;
FIG. 3 is a flowchart of a method of step S24 in an embodiment of the present application;
FIG. 4 is a schematic view of a scenario for loading a three-dimensional model of a smart building in an embodiment of the present application;
FIG. 5 is a schematic diagram of a primary loading effect according to an embodiment of the present application;
FIG. 6 is a schematic diagram of a multi-stage loading effect according to an embodiment of the present application.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present application more clear, the technical solutions of the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings of the embodiments of the present application. It will be apparent that the described embodiments are some, but not all, embodiments of the application. All other embodiments, which are obtained by a person skilled in the art based on the described embodiments of the application, fall within the scope of protection of the application.
As shown in fig. 1 and fig. 4, in an embodiment of the present application, the embodiment provides a method for loading a three-dimensional model of a multi-level cache at a web page end, which includes the following steps:
s1: uploading a glb model file for constructing a scene to a model library, selecting a model from the model library, constructing the scene in a dragging mode, extracting scene data for storage, and uploading the stored scene data to a server;
the method comprises the following steps:
s11: built-in glb model files into a model library, and setting model basic data of the glb model;
s12: downloading the set glb model to the local, and storing the glb model in a menu bar in a picture form for selection;
s13: selecting a glb model, creating a scene in a dragging mode, and setting model parameters and scene parameters;
s14: extracting scene data of the created scene, and clicking a save button to save;
in one embodiment, the scene data includes model base data, model parameters, and scene parameters; the model basic data comprises the number of model surfaces, the number of vertexes and material parameters, and is stored in a glb format; the model parameters comprise the size of the model, the position in a space rectangular coordinate system, the rotation angle and the proportion parameters in the space rectangular coordinate system, and are stored in json format; the scene parameters comprise light setting and direction locking setting, and are stored in json format;
the scene data also comprises animation event data, wherein the animation event data comprises associated point positions, point position data types, total frame numbers, true value frame numbers and frame bits, false value frame numbers and frame bits, and the animation event data is stored in json format;
the scene data also comprises response event data, wherein the response event data comprises associated point positions, event types and event actions, and the response event data is stored in json format.
S15: uploading the stored scene data to a server;
the model basic data is stored in a glb format, compressed and packaged into a zip format and then uploaded to the server.
For a fixed three-dimensional model of electromechanical, electrical, office and building, the uploaded scene data are model base data and model parameters;
for the three-dimensional model which is electromechanical, electrical and needs to rotate according to point position data, the uploaded scene data are model base data, model parameters and animation event data;
for the electrical appliance, the three-dimensional model of the model state needs to be switched according to the point position data, and the uploaded scene data are model base data, model parameters and response event data.
The glb model files are all stored in the form of characters in the system, and then rendered through threjs; after the glb model file is uploaded to the server in the step S1, the step S2 is downloaded from the server again, and if the glb model file is downloaded before, the glb model file can be directly obtained if the glb model file exists in the memory of the browser; if no download has been previously made, a network request re-acquisition needs to be acquired or initiated from the local cache.
S2: the browser loads a scene through multi-level cache, and specifically comprises the following steps:
s21: the method comprises the steps that a webpage end enters a scene page, scene data are acquired through network requests when scenes are loaded, the scene data are divided into json format and glb format, and files in the json format and the glb format are requested separately through 2 interfaces;
s22: judging whether the same glb model files exist in the browser memory, if so, acquiring the glb model files from the browser memory, directly entering step S26, and if not, entering step S23;
s23: judging whether the same glb model files exist in the local cache, if so, acquiring the glb model files from the local cache, entering a step S24, and if not, entering a step S25;
s24: judging whether the obtained glb model file needs to be stored in a browser memory or not, if the obtained glb model file meets the conditions, storing the glb model file into the browser memory, and if the glb model file does not meet the conditions, not performing any processing, and entering step S26;
s25: initiating a network request, acquiring a glb model file, caching the glb model file to the local, and entering step S24;
s26: rendering a glb model file in the scene;
s27: the glb model file completes scene loading in combination with scene data.
As shown in fig. 2, in an embodiment of the present application, the step S13 may be specifically divided into the following steps:
s131: clicking a picture of the glb model in the menu bar, dragging into a browser scene drawing area, and initiating a local request;
s132: the glb model file is obtained locally and analyzed, and a three-dimensional model is rendered in a browser;
s133: clicking the rendered three-dimensional model, and dragging the three-dimensional model to carry out position modification by pressing a left button of a mouse through a space rectangular coordinate system and the coordinate position of a center point;
s134: setting the size of the model, the position and the rotation angle in a space rectangular coordinate system and the proportion parameters in the space rectangular coordinate system through a toolbar of the browser;
s135: judging whether the three-dimensional model has advanced attributes, if so, entering a step S136, and if not, directly entering a step S137;
s136: double-clicking the three-dimensional model, setting high-level attributes of the three-dimensional model, judging an animation event to set a switch lamp according to the interface point position state, and entering step S137 after finishing;
s137: the illumination brightness and the angle of the scene are set through the light and the visual angle tool of the browser.
As shown in fig. 3, in another embodiment of the present application, the step S24 may be further divided into the following steps:
s241: judging whether the size of the glb model file is less than 50000 bytes, if so, entering step S242, and if not, not performing any processing;
s242: checking the occupation condition of the browser memory, judging whether the stored model files in the browser memory are less than 150, if so, storing the glb model files into the browser memory, and if not, entering step S243;
s243: and cleaning the model file with the earliest storage time in the browser memory, and then storing the glb model file into the browser memory.
In summary, the application saves the set glb model in the menu bar in the form of pictures, so that the loading time can be saved; the models are classified, a part of the models are stored in the memory of the browser, and a part of the models are stored in the local cache database, so that the loading speed of the three-dimensional model at the webpage end can be effectively improved, and the loading time is controlled within 6 seconds when the models are loaded for the first time, as shown in fig. 5; the time is optimized to be less than 3 seconds in a subsequent multi-level loading mode, such as local cache and browser memory, as shown in fig. 6.
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 application. Furthermore, the particular features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples. Furthermore, the different embodiments or examples described in this specification and the features of the different embodiments or examples may be combined and combined by those skilled in the art without contradiction.
Any process or method description in a flowchart or otherwise described herein may be understood as representing modules, segments, or portions of code which include one or more executable instructions for implementing specific logical functions or steps of the process. And the scope of the preferred embodiments of the present application includes additional implementations in which functions may be performed in a substantially simultaneous manner or in an opposite order from that shown or discussed, including in accordance with the functions that are involved.
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.
It is to be understood that portions of the present application 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. All or part of the steps of the methods of the embodiments described above may be performed by a program that, when executed, comprises one or a combination of the steps of the method embodiments, instructs the associated hardware to perform the method.
In addition, each functional unit in the embodiments of the present application may be integrated in one processing module, or each unit may exist alone physically, or two or more units may be integrated in one module. The integrated modules may be implemented in hardware or in software functional modules. The integrated modules described above, if implemented in the form of software functional modules and sold or used as a stand-alone product, may also be stored in a computer-readable storage medium. The storage medium may be a read-only memory, a magnetic or optical disk, or the like.
The foregoing is merely illustrative of the present application, and the present application is not limited thereto, and any person skilled in the art will readily recognize that various changes and substitutions are possible within the scope of the present application. Therefore, the protection scope of the application is subject to the protection scope of the claims.
Claims (6)
1. A three-dimensional model loading method of multi-level cache of a webpage end is characterized by comprising the following steps:
s1: uploading a glb model file for constructing a scene to a model library, selecting a model from the model library, constructing the scene in a dragging mode, extracting scene data for storage, and uploading the stored scene data to a server;
s2: the browser loads a scene through multi-level cache, and specifically comprises the following steps:
s21: the method comprises the steps that a webpage end enters a scene page, scene data are acquired through network requests when a scene is loaded, the scene data are divided into json format and glb format, and files in the json format and the glb format are requested separately through 2 interfaces;
s22: judging whether the same glb model files exist in the browser memory, if so, acquiring the glb model files from the browser memory, directly entering step S26, and if not, entering step S23;
s23: judging whether the same glb model files exist in the local cache, if so, acquiring the glb model files from the local cache, and entering step S24, and if not, entering step S25;
s24: judging whether the obtained glb model file needs to be stored in a browser memory or not, if the obtained glb model file meets the conditions, storing the glb model file into the browser memory, and if the glb model file does not meet the conditions, not performing any processing, and entering step S26;
s25: initiating a network request, acquiring the glb model file, caching the glb model file to the local, and entering step S24;
s26: rendering a glb model file in the scene;
s27: the glb model file is combined with the scene data to finish scene loading;
the step S1 comprises the following steps:
s11: built-in glb model files into a model library, and setting model basic data of the glb model;
s12: downloading the set glb model to the local, and storing the glb model in a menu bar in a picture form for selection;
s13: selecting a glb model, creating a scene in a dragging mode, and setting model parameters and scene parameters;
s14: extracting scene data of the created scene, and clicking a save button to save;
s15: uploading the stored scene data to a server;
the step S13 includes the steps of:
s131: clicking a picture of the glb model in the menu bar, dragging into a browser scene drawing area, and initiating a local request;
s132: the glb model file is obtained locally and analyzed, and a three-dimensional model is rendered in a browser;
s133: clicking the rendered three-dimensional model, and dragging the three-dimensional model to carry out position modification by pressing a left button of a mouse through a space rectangular coordinate system and the coordinate position of a center point;
s134: setting the size of the model, the position and the rotation angle in a space rectangular coordinate system and the proportion parameters in the space rectangular coordinate system through a toolbar of the browser;
s135: judging whether the three-dimensional model has advanced attributes, if so, entering a step S136, and if not, directly entering a step S137;
s136: double-clicking the three-dimensional model, setting high-level attributes of the three-dimensional model, judging an animation event according to the interface point position state to set a switch lamp, and entering step S137 after finishing;
s137: setting illumination brightness and angle of a scene through light and a visual angle tool of a browser;
the step S24 specifically includes:
s241: judging whether the glb model file size is smaller than 50000 bytes, if so, entering step S242, and if not, not performing any processing;
s242: checking the occupation condition of the browser memory, judging whether the stored model files in the browser memory are less than 150, if so, storing the glb model files into the browser memory, and if not, entering step S243;
s243: and cleaning the model file with the earliest storage time in the browser memory, and then storing the glb model file into the browser memory.
2. The method for loading the three-dimensional model of the multi-level cache at the web page end according to claim 1, wherein the scene data comprises model basic data, model parameters and scene parameters; the model basic data comprise the number of model surfaces, the number of vertexes and material parameters, and are stored in a glb format; the model parameters comprise the size of the model, the position in a space rectangular coordinate system, the rotation angle and the proportion parameters in the space rectangular coordinate system, and are stored in json format; the scene parameters comprise light setting and direction locking setting, and are stored in json format.
3. The method for loading a three-dimensional model of a multi-level cache at a web page according to claim 2, wherein the scene data further comprises animation event data, and the animation event data comprises associated points, point data types, total frame numbers, frame numbers and frame bits of true values, frame numbers and frame bits of false values, and is stored in json format.
4. The method for loading a three-dimensional model of a multi-level cache at a web page according to claim 3, wherein the scene data further comprises response event data, and the response event data comprises associated points, event types and event actions, and is stored in json format.
5. The method for loading the three-dimensional model of the multi-level cache of the web page end according to claim 2, wherein the model basic data is stored in a glb format, compressed and packed into a zip format and then uploaded to the server.
6. The method for loading the three-dimensional model of the multi-level cache at the web page end according to claim 4, wherein the step S15 specifically comprises:
for a fixed three-dimensional model of electromechanical, electrical, office and building, the uploaded scene data are model base data and model parameters;
for the three-dimensional model which is electromechanical, electrical and rotates according to the point position data, the uploaded scene data are model base data, model parameters and animation event data;
for the electrical appliance, the three-dimensional model of the model state is switched according to the point position data, and the uploaded scene data are model base data, model parameters and response event data.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310911854.4A CN116627580B (en) | 2023-07-25 | 2023-07-25 | Multi-level cache three-dimensional model loading method for webpage end |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310911854.4A CN116627580B (en) | 2023-07-25 | 2023-07-25 | Multi-level cache three-dimensional model loading method for webpage end |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN116627580A CN116627580A (en) | 2023-08-22 |
| CN116627580B true CN116627580B (en) | 2023-09-22 |
Family
ID=87597632
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310911854.4A Active CN116627580B (en) | 2023-07-25 | 2023-07-25 | Multi-level cache three-dimensional model loading method for webpage end |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116627580B (en) |
Citations (23)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101692229A (en) * | 2009-07-28 | 2010-04-07 | 武汉大学 | Self-adaptive multilevel cache system for three-dimensional spatial data based on data content |
| US8314790B1 (en) * | 2011-03-29 | 2012-11-20 | Google Inc. | Layer opacity adjustment for a three-dimensional object |
| CN102982159A (en) * | 2012-12-05 | 2013-03-20 | 上海创图网络科技发展有限公司 | Three-dimensional webpage multi-scenario fast switching method |
| CN104102545A (en) * | 2014-07-04 | 2014-10-15 | 北京理工大学 | Three-dimensional resource allocation and loading optimization method for mobile augmented reality browser |
| CN104298790A (en) * | 2014-11-11 | 2015-01-21 | 北京奇虎科技有限公司 | Browser accelerating method and browser device with accelerator |
| CN105808672A (en) * | 2016-03-01 | 2016-07-27 | 重庆市勘测院 | Browser based mass three-dimensional point cloud data release method |
| CN107392561A (en) * | 2017-06-06 | 2017-11-24 | 青岛中德信息服务有限公司 | Architectural environment panorama based on BIM and internet shows method |
| CN108804768A (en) * | 2018-05-08 | 2018-11-13 | 中建隧道建设有限公司 | One kind making the light-weighted method of BIM models |
| CN109377554A (en) * | 2018-10-31 | 2019-02-22 | 武汉新迪数字工程***有限公司 | Large-scale three dimensional modeling rendering method, equipment, system and storage medium |
| CN110472170A (en) * | 2019-07-19 | 2019-11-19 | 恒锋信息科技股份有限公司 | A kind of method and system accessing three-dimensional security platform based on browser plug-in |
| CN110507992A (en) * | 2019-08-28 | 2019-11-29 | 腾讯科技（深圳）有限公司 | Technical support approach, device, equipment and storage medium in a kind of virtual scene |
| CN111105491A (en) * | 2019-11-25 | 2020-05-05 | 腾讯科技（深圳）有限公司 | Scene rendering method and device, computer readable storage medium and computer equipment |
| CN112270768A (en) * | 2020-11-09 | 2021-01-26 | 中山大学 | Ancient book reading method and system based on virtual reality technology and construction method thereof |
| CN112330496A (en) * | 2020-11-30 | 2021-02-05 | 久瓴(江苏)数字智能科技有限公司 | Model loading method and device, modeling method, storage medium and computer equipment |
| CN113052957A (en) * | 2021-03-19 | 2021-06-29 | 北京润尼尔网络科技有限公司 | Three-dimensional virtual simulation experiment method and device and electronic equipment |
| CN113656528A (en) * | 2021-08-31 | 2021-11-16 | 平安医疗健康管理股份有限公司 | Map layer loading method, device, equipment and storage medium |
| CN113934958A (en) * | 2021-12-17 | 2022-01-14 | 北京德风新征程科技有限公司 | Page loading method and device, electronic equipment and computer readable medium |
| CN114511686A (en) * | 2022-01-20 | 2022-05-17 | 深圳市聚点数码科技有限公司 | Memory processing method for visual scene |
| CN114518912A (en) * | 2022-02-21 | 2022-05-20 | 度小满科技(北京)有限公司 | Page loading method, device and equipment and readable storage medium |
| CN114980208A (en) * | 2022-05-18 | 2022-08-30 | 浙江传媒学院 | End-to-end mobile Web 3D rendering calculation unloading method |
| CN115408631A (en) * | 2022-08-29 | 2022-11-29 | 重庆市地理信息和遥感应用中心 | Massive inclined data loading method based on multi-parameter rendering |
| CN115758007A (en) * | 2022-11-24 | 2023-03-07 | 昆船智能技术股份有限公司 | Webpage three-dimensional scene data lightweight processing method and system |
| CN115964026A (en) * | 2023-01-10 | 2023-04-14 | 北京鑫锐诚毅数字科技有限公司 | VR virtual simulation low-code development system based on domain model |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8091030B1 (en) * | 2006-12-14 | 2012-01-03 | Disney Enterprises, Inc. | Method and apparatus of graphical object selection in a web browser |
| US9311622B2 (en) * | 2013-01-15 | 2016-04-12 | Google Inc. | Resolving mutations in a partially-loaded spreadsheet model |
-
2023
- 2023-07-25 CN CN202310911854.4A patent/CN116627580B/en active Active
Patent Citations (24)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101692229A (en) * | 2009-07-28 | 2010-04-07 | 武汉大学 | Self-adaptive multilevel cache system for three-dimensional spatial data based on data content |
| US8314790B1 (en) * | 2011-03-29 | 2012-11-20 | Google Inc. | Layer opacity adjustment for a three-dimensional object |
| US8860717B1 (en) * | 2011-03-29 | 2014-10-14 | Google Inc. | Web browser for viewing a three-dimensional object responsive to a search query |
| CN102982159A (en) * | 2012-12-05 | 2013-03-20 | 上海创图网络科技发展有限公司 | Three-dimensional webpage multi-scenario fast switching method |
| CN104102545A (en) * | 2014-07-04 | 2014-10-15 | 北京理工大学 | Three-dimensional resource allocation and loading optimization method for mobile augmented reality browser |
| CN104298790A (en) * | 2014-11-11 | 2015-01-21 | 北京奇虎科技有限公司 | Browser accelerating method and browser device with accelerator |
| CN105808672A (en) * | 2016-03-01 | 2016-07-27 | 重庆市勘测院 | Browser based mass three-dimensional point cloud data release method |
| CN107392561A (en) * | 2017-06-06 | 2017-11-24 | 青岛中德信息服务有限公司 | Architectural environment panorama based on BIM and internet shows method |
| CN108804768A (en) * | 2018-05-08 | 2018-11-13 | 中建隧道建设有限公司 | One kind making the light-weighted method of BIM models |
| CN109377554A (en) * | 2018-10-31 | 2019-02-22 | 武汉新迪数字工程***有限公司 | Large-scale three dimensional modeling rendering method, equipment, system and storage medium |
| CN110472170A (en) * | 2019-07-19 | 2019-11-19 | 恒锋信息科技股份有限公司 | A kind of method and system accessing three-dimensional security platform based on browser plug-in |
| CN110507992A (en) * | 2019-08-28 | 2019-11-29 | 腾讯科技（深圳）有限公司 | Technical support approach, device, equipment and storage medium in a kind of virtual scene |
| CN111105491A (en) * | 2019-11-25 | 2020-05-05 | 腾讯科技（深圳）有限公司 | Scene rendering method and device, computer readable storage medium and computer equipment |
| CN112270768A (en) * | 2020-11-09 | 2021-01-26 | 中山大学 | Ancient book reading method and system based on virtual reality technology and construction method thereof |
| CN112330496A (en) * | 2020-11-30 | 2021-02-05 | 久瓴(江苏)数字智能科技有限公司 | Model loading method and device, modeling method, storage medium and computer equipment |
| CN113052957A (en) * | 2021-03-19 | 2021-06-29 | 北京润尼尔网络科技有限公司 | Three-dimensional virtual simulation experiment method and device and electronic equipment |
| CN113656528A (en) * | 2021-08-31 | 2021-11-16 | 平安医疗健康管理股份有限公司 | Map layer loading method, device, equipment and storage medium |
| CN113934958A (en) * | 2021-12-17 | 2022-01-14 | 北京德风新征程科技有限公司 | Page loading method and device, electronic equipment and computer readable medium |
| CN114511686A (en) * | 2022-01-20 | 2022-05-17 | 深圳市聚点数码科技有限公司 | Memory processing method for visual scene |
| CN114518912A (en) * | 2022-02-21 | 2022-05-20 | 度小满科技(北京)有限公司 | Page loading method, device and equipment and readable storage medium |
| CN114980208A (en) * | 2022-05-18 | 2022-08-30 | 浙江传媒学院 | End-to-end mobile Web 3D rendering calculation unloading method |
| CN115408631A (en) * | 2022-08-29 | 2022-11-29 | 重庆市地理信息和遥感应用中心 | Massive inclined data loading method based on multi-parameter rendering |
| CN115758007A (en) * | 2022-11-24 | 2023-03-07 | 昆船智能技术股份有限公司 | Webpage three-dimensional scene data lightweight processing method and system |
| CN115964026A (en) * | 2023-01-10 | 2023-04-14 | 北京鑫锐诚毅数字科技有限公司 | VR virtual simulation low-code development system based on domain model |
Non-Patent Citations (4)
| Title |
|---|
| Flash3D场景模型预下载策略;崔健;;计算机光盘软件与应用(第09期);第156-157页 * |
| HTML5离线缓存技术在BIM项目群管理中的应用;张家季;周剑;李泳畅;;人民长江(第S2期);第290-293页 * |
| 基于海量数据的三维场景调度与展现;李涛;崔燕;;信息化研究(第01期);第5-10页 * |
| 面向移动Web应用的浏览器缓存性能度量与优化;马郓;刘譞哲;梅宏;;软件学报(第07期);第54-70页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN116627580A (en) | 2023-08-22 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8456467B1 (en) | Embeddable three-dimensional (3D) image viewer | |
| US9183672B1 (en) | Embeddable three-dimensional (3D) image viewer | |
| US9240070B2 (en) | Methods and systems for viewing dynamic high-resolution 3D imagery over a network | |
| US10423527B2 (en) | Memory management and image display for mobile devices | |
| WO2020046453A1 (en) | Playback for embedded and preset 3d animations | |
| CN107656759B (en) | Rendering method and device for user interface | |
| JP2012521041A (en) | Smooth layout animation for continuous and discontinuous properties | |
| US20170221242A1 (en) | Automatic overdraw reduction before rendering | |
| WO2011066056A2 (en) | Responsive user interface with background application logic | |
| CN111476910B (en) | 3D model display method, system, medium and display terminal of intelligent building BIM | |
| CN112148164B (en) | Arranging method and device of multi-cluster system, computer equipment and storage medium | |
| CN111159606B (en) | Three-dimensional model loading method, device and storage medium applied to building system | |
| CN112691381A (en) | Rendering method, device and equipment of virtual scene and computer readable storage medium | |
| CN104699468A (en) | Client side and interface generation method thereof | |
| CN116627580B (en) | Multi-level cache three-dimensional model loading method for webpage end | |
| US20210286661A1 (en) | Extensible command pattern | |
| CN111766989B (en) | Interface switching method and device | |
| US11232237B2 (en) | System and method for perception-based selection of features in a geometric model of a part | |
| WO2022047436A1 (en) | 3d launcher with 3d app icons | |
| JP2012003618A (en) | Information processing system, information processing method and information processor | |
| CN112579144A (en) | Data processing method and device | |
| CN114968419B (en) | Business process simulation implementation method and system with action records | |
| CN117290047B (en) | GUI display acceleration control method, system and storage medium on wearable product | |
| WO2024114153A1 (en) | Resource configuration method and apparatus based on parasitic program, device, medium, and product | |
| CN117331470B (en) | Online virtual reality image display method and system, electronic equipment and 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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |