A method for building a web three-dimensional large scene based on a Three.js engine and performance optimization

Abstract

The application discloses a kind of based on Three.js engine webpage three-dimensional large scene building system and performance optimization method, it is related to three-dimensional modeling field, including model scene, rendering scene, double scene scene dispatching center;The model scene is used for the storage of model, model pickup;The rendering scene is used for the rendering processing of combined model;The double scene scene dispatching center is used to load model into model scene storage, when model scene changes, the model of same attribute is combined;Same type model in rendering scene is deleted simultaneously;Combined model is added or replaced into rendering scene again and triggers scene rendering refresh simultaneously.The application is combined by double scene dispatching, first the model of same attribute in model scene is combined, then combined model is rendered, reduce the Draw Call number when rendering, improve scene rendering speed.

Description

TECHNICAL FIELD

[0001] The present application relates to the field of three-dimensional modeling, in particular to a Three.js engine-based webpage three-dimensional large scene building system and performance optimization method. BACKGROUND

[0002] When building a three-dimensional scene in a webpage, multiple three-dimensional models of different types are usually loaded, and the same type of three-dimensional model is used multiple times. In the webpage, the three-dimensional models are dragged and combined, and the system calls the Three.js engine to refresh the scene every time the model is loaded or the model coordinates are modified. Each model in the scene needs to undergo a Draw Call every time the scene is refreshed. When the number of models used in the scene is in the thousands, the Three.js engine will undergo thousands of Draw Calls. If each Draw Call takes 2 ms, it will take 2 s to render a scene of 1,000 models, and it will take 20 s to render a scene of 10,000 models. This rendering method will cause the entire scene to be very laggy, and users will not be able to normally use the system in a complex scene. SUMMARY

[0003] The present application aims to provide a Three.js engine-based webpage three-dimensional large scene building system and performance optimization method to solve the above problems. A webpage three-dimensional large scene building system based on the Three.js engine is developed, and a double-scene rendering is established. The double scene includes a model scene and a rendering scene. The model scene stores and picks up models. The rendering scene renders merged models. A double-scene scene scheduling center creates or updates merged models of the same type as the changed models when the model scene changes, and adds or replaces the merged models to the rendering scene to trigger scene rendering and refresh, thereby reducing the number of Draw Calls during rendering, improving the speed of scene rendering, and achieving smooth building of large scenes.

[0004] The technical solution of the present application is as follows:

[0005] The present application discloses a Three.js engine-based webpage three-dimensional large scene building system, which includes a model scene, a rendering scene, and a double-scene scene scheduling center. The model scene stores and picks up models. The rendering scene renders merged models. The double-scene scene scheduling center includes a model loading module, a new model judgment and identification module, a merging module, a deletion module, and a refresh module.

[0006] The model loading module loads models into the model scene for storage. If the model is new, it is loaded into the rendering scene.

[0007] The new model judgment identification module is used for picking up the module and judging whether a new model is selected when the model scene changes, and identifying whether the selected new model is a self-built model or an imported model;

[0008] The model merging module selects different merging modes for the self-built model or the imported model, and merges the models with the same attribute;

[0009] The model deletion module is used for deleting the models of the same type in the rendering scene;

[0010] The scene rendering refresh module is used for adding or replacing the merged model into the rendering scene and triggering the scene rendering refresh.

[0011] As a preferred, when the double-scene scene scheduling center identifies whether the model is a self-built model or an imported model, if the model is a self-built model and is a shelf type and a text type in the self-built model, secondary classification is performed, and for the models with the same attribute, model common model triangular face information and world coordinate information of each model are extracted to generate a new merged model; if the model is an imported model, model common model triangular face information and world coordinate information of each model are extracted to generate a new merged model.

[0012] As a preferred, when the model is loaded, if the model exists in the local storage model scene, cloning is performed, and the local loading is performed.

[0013] The application is a method for optimizing the performance of a webpage three-dimensional large scene based on a Three.js engine, which comprises a webpage three-dimensional large scene based on a Three.js engine system, and the method comprises the following steps:

[0014] The model is loaded into the model scene for storage, and the module is picked up and it is judged whether a new model is selected when the model scene changes;

[0015] The new model is loaded into the rendering scene;

[0016] The selected new model is identified as a self-built model or an imported model;

[0017] Different merging modes are selected for the self-built model or the imported model, and the models with the same attribute are merged;

[0018] The models of the same type in the rendering scene are deleted;

[0019] The merged model is added or replaced into the rendering scene to trigger the scene rendering refresh.

[0020] As a preferred, the following specific steps are included:

[0021] S1: the user opens the system on the webpage, selects a FBX format three-dimensional model file for uploading, and binds the three-dimensional model file and the system hardware product price library data when uploading the three-dimensional model file;

[0022] S2: the basic information of the three-dimensional model is entered in the system, and the three-dimensional model picture is uploaded;

[0023] S3: after the basic information is entered, the picture bound to the three-dimensional model is tiled in the sidebar of the webpage; after the user clicks the three-dimensional model picture, the system initiates a network request, downloads the FBX format three-dimensional model file from the server, analyzes the three-dimensional model file, renders the model in the browser, and stores the model locally after successful loading; when the model is loaded again, the system performs local loading and does not initiate a network request;

[0024] S4: when the system loads the model, a unique ID of the model is generated, the product ID, model number, and model name in the price library are bound, and the device type, conveying speed, lifting speed, picking and placing speed, piece / hour, picking and placing device name, and loading device name are set; S5: when the system loads the self-built model, a unique ID of the model is generated, and a unique self-built model number is generated;

[0025] S6: after the model is loaded, the model is directly added to the rendering scene, the current model is selected, and the model properties are modified; after the modification is completed, the updated model is loaded into the model scene by the dual-scene scene scheduling center for storage, and all device sets of the current device model in the model scene are extracted, the model of all device sets is merged, the model of the current device model in the rendering scene is deleted, the new merged model is loaded into the rendering scene, and the rendering scene is triggered to refresh.

[0026] As a preferred, in S2, the basic information includes conveying speed, lifting speed, picking and placing speed, piece / hour, device function type, defined picking and placing device name, and loading device name; the device function type includes conveying device, single machine device, storage device, track device, code division machine device, robot device, and AGV device; the defined picking and placing device name and loading device name correspond to the sub-model in the three-dimensional model.

[0027] As a preferred, in S5, the self-built model includes shelves, text, floors, walls, and track lines.

[0028] As a preferred, during the building process, the user continuously modifies the position and properties of the model, and the dual-scene scene scheduling center listens to the mouse events for synchronization, and the specific steps are as follows:

[0029] S60: a mouse click event is listened to; when the mouse is clicked, a picking module selects a model from the model scene; the dual-scene scene scheduling center judges whether a new model is selected;

[0030] S61: If a new model is selected, the dual-scene scene scheduling center loads the model into the rendering scene separately, and adds the selected model to the set of models to be updated Wait_Update [];

[0031] S62: The dual-scene scene scheduling center extracts the model type from Wait_Update [], and adds the corresponding type set in the model scene, excluding the currently selected model, to the set of models to be merged Wait_Merge <type, MergeList>;

[0032] S63: The dual-scene scene scheduling center analyzes the Wait_Merge <> set, identifies whether the model is a self-built model or an FBX imported model according to the model type, and generates a corresponding merged model.

[0033] S64: The dual-scene scene scheduling center iterates through the rendering scene to determine whether there is a merged model of the same type, deletes the merged model of the same type in the rendering scene, adds the newly constructed merged model, and triggers a refresh of the rendering scene.

[0034] As a preferred embodiment, it further comprises:

[0035] S65: If the new model is not selected in S60, iterate through the rendering scene to determine whether there is an unmerged model, and add the unmerged model to the set of models to be loaded WaitLoad [];

[0036] S66: The dual-scene scene scheduling center loads the models in WaitLoad [] into the model scene one by one, and after the model is loaded, the scene scheduling center extracts the model type from WaitLoad [], updates the current model in the model scene corresponding to the type set, and adds it to the set of models to be merged Wait_Merge <type, MergeList>;

[0037] S67: The dual-scene scene scheduling center analyzes the Wait_Merge <> set, identifies whether the model is a self-built model or an FBX imported model according to the model type, and generates a corresponding merged model.

[0038] S68: The dual-scene scene scheduling center iterates through the rendering scene to determine whether there is a merged model of the same type, deletes the merged model of the same type in the rendering scene, adds the newly constructed merged model, and triggers a refresh of the rendering scene.

[0039] As a preferred embodiment, S63 and S67 specifically comprise:

[0040] S11: If the model is a shelf type, the shelf type model in Wait_Merge< > is classified again, the model attributes are judged: the shelf depth, the shelf length, the shelf height, the shelf column number, the shelf layer number, the column thickness, the beam height, the picking height, and the color consistency, the model triangular face information commonly used by the model and the world coordinate information of each model are extracted, and a new merged model is generated;

[0041] S12: If the model is a text type, the text type model in Wait_Merge< > is classified again, the model attributes are judged: the text name, the text size consistency, the model triangular face information commonly used by the model and the world coordinate information of each model are extracted, and a new merged model is generated;

[0042] S13: If the model is a trajectory line type, no secondary classification grouping is performed, the trajectory type model three-dimensional geometry in Wait_Merge< > is directly merged to generate a new merged model;

[0043] S14: If the model is a floor type, no secondary grouping classification is performed, the floor type model three-dimensional geometry in Wait_Merge< > is directly merged to generate a new merged model;

[0044] S15: If the model is not within the range of the self-built model, it is determined as an FBX imported model, the model triangular face information commonly used by the model and the world coordinate information of each model are extracted, and a new merged model is generated;

[0045] S16: If the selected model is a module, the models in the module are traversed, and the processing of S11-S15 is performed.

[0046] In summary, due to the adoption of the above technical scheme, the beneficial effects of the present application are:

[0047] 1. The present application improves the scene rendering speed by setting and scheduling two scenes, and realizes the performance optimization of the Three.js engine web three-dimensional large scene construction.

[0048] 2. The present application guarantees the editability of the scene and the rendering speed is not slowed down when the number of models is large, and improves the smoothness of system use.

[0049] 3. The present application performs local loading when loading the model again, without initiating a network request, reduces network overhead, and speeds up the model loading speed.

[0050] 4. The present application classifies the model in advance, improves the efficiency of the two scene synchronization during double scene scheduling.

[0051] 5、The application realizes double-scene model synchronous processing, secondary classification of a large number of models stored in the model scene, merging of models with the same attributes, and merging of ten thousand models into a few hundred merged models after model merging, thereby greatly reducing the rendering time.

[0052] 6、The application uses a single model stored in a model scene, independently loads the model that needs to be modified in position, rotation angle, size and model attribute into a rendering scene by a scene scheduling center, ensures that the scene can support modification of a certain model or module after merging, triggers rendering scene synchronization again after modification, and guarantees the fluency of model modification and the accuracy of scene rendering. BRIEF DESCRIPTION OF DRAWINGS

[0053] The application will be described by way of example and with reference to the accompanying drawings, in which:

[0054] Figure 1 is a method flow chart of a Three.js engine webpage three-dimensional large scene building performance optimization method based on the application.

[0055] Figure 2 is a flow chart of detailed steps of the method of the Three.js engine webpage three-dimensional large scene building performance optimization in embodiment four.

[0056] Figure 3 is a flow chart of detailed steps of the double-scene scene scheduling center listening to a mouse event to complete synchronization in embodiment five. DETAILED DESCRIPTION

[0057] All features disclosed in this specification, and / or the steps of any method or process specified in this specification, can be combined in any combination, except combinations where at least some of the features and / or steps are mutually exclusive.

[0058] Any feature disclosed in this specification, unless stated otherwise, can be replaced by alternative features or equivalents having the same or a similar effect. That is, unless stated otherwise, each feature disclosed is one example only of a number of equivalent or similar features.

[0059] The features and performance of the application will be described in further detail below in conjunction with embodiments.

[0060] Embodiment one:

[0061] As shown in Figure 1 , the application discloses a Three.js engine webpage three-dimensional large scene building system, including a model scene, a rendering scene and a double-scene scene scheduling center.

[0062] The model scene is used for model storage and model pickup.

[0063] The rendering scene is used for rendering the merged model;

[0064] The dual-scene scene scheduling center is used to load the model into the model scene for storage. When the model scene changes, it picks up the module and determines whether a new model is selected. It identifies whether the selected new model is a self-built model or an imported model, selects different merging modes for the self-built model or the imported model, and merges models with the same attributes; at the same time, it deletes models of the same type in the rendering scene; and at the same time, it adds or replaces the merged model to the rendering scene and then triggers the scene rendering refresh.

[0065] The present invention is based on the Three.js engine for system development, establishes dual scenes for rendering, and uses a dual-scene scene scheduling center to implement model scene changes. When the model scene changes, a model of the same type as the changed model is created or updated and merged. The merged model is added or replaced to the rendering scene and then the scene rendering refresh is triggered, thereby reducing the number of Draw Calls during rendering, improving the scene rendering speed, and realizing the smooth construction of large scenes.

[0066] Example 2:

[0067] Compared with Example 1, in this embodiment, when the dual-scene scene scheduling center identifies whether it is a self-built model or an imported model, if it is identified as a self-built model, and it is the shelf type and text type in the self-built model, secondary classification is performed first, and then for models with the same attributes, the common model triangle surface information of the model and the world coordinate information of each model are extracted to generate a new merged model; if it is identified as an imported model, the common model triangle surface information of the model and the world coordinate information of each model are extracted to generate a new merged model.

[0068] Example 3:

[0069] In this embodiment, when loading a model, if a model already exists in the locally stored model scene, it is cloned and loaded locally; the newly loaded model and the existing model share the same geometric surface data and material data.

[0070] Example 4:

[0071] like Figure 2 As shown, the present invention discloses a method for optimizing the performance of building a large three-dimensional scene on a web page based on the Three.js engine. The detailed steps are as follows:

[0072] Step 1: The user opens the system on the web page and selects the FBX format 3D model file to upload. When uploading the 3D model file, the 3D model file is bound to the system hardware product price library data;

[0073] Step 2: Enter the basic information of the 3D model into the system and upload the 3D model image;

[0074] In step two, the basic information includes conveying speed, lifting speed, picking and placing speed, piece / hour, device function type, defined picking and placing device name and carrying device name; the device function type includes conveying device, single machine device, storage device, track device, code division device, robot device and AGV device; the defined picking and placing device name and carrying device name correspond to the sub-model in the three-dimensional model.

[0075] Step three: after the basic information is entered, the pictures bound with the three-dimensional model are tiled in the sidebar of the webpage; after the user clicks the three-dimensional model picture, the system initiates a network request to download the FBX format three-dimensional model file from the server, analyzes the three-dimensional model file, renders the model in the browser, and stores the model locally after successful loading; when the model is loaded again, the system performs local loading and does not initiate a network request;

[0076] Step four: when the system loads the model, a unique ID of the model is generated, the product ID, model number, model name in the price library are bound, the device type, conveying speed, lifting speed, picking and placing speed, piece / hour, picking and placing device and carrying device name are set;

[0077] Step five: when the system loads the self-built model, a unique ID of the model is generated, and a unique self-programmed model number is generated.

[0078] In step five, the self-built model includes shelves, text, floors, walls and track lines.

[0079] Step six: after the model is loaded, the model is directly added to the rendering scene, the current model is selected, and the model properties are modified; after the modification is completed, the updated model is loaded into the model scene by the dual-scene scene dispatching center for storage, and all device sets of the current device model in the model scene are taken out, the merged model of all device sets is processed, and the model of the current device model in the rendering scene is deleted at the same time; the rendering scene loads the new merged model, and triggers the rendering scene to refresh.

[0080] Embodiment five:

[0081] As shown in Figure 3 , the dual-scene scene dispatching center listens to the mouse click event, picks up the model from the model scene when the mouse is clicked, judges whether a new model is selected, loads the model into the rendering scene if the new model is selected, traverses the rendering scene to determine whether there is a merged model of the same model number, deletes the merged model in the rendering scene, filters the remaining model set in the model scene, and loads the merged model in the rendering scene to trigger the rendering scene to refresh.

[0082] The double-scene scene scheduling center judges whether the model is selected currently; if the model is selected, the model is loaded into the model scene and the rendering scene in turn; the double-scene scene scheduling center traverses the rendering scene to check whether there is a same type of model to be merged, deletes the model to be merged in the rendering scene, and finds the model set in the model scene; if there is such a model to be merged in the rendering model, the model set in the model scene is found directly; the rendering scene loads the model to be merged, and triggers the rendering scene to refresh.

[0083] Embodiment six:

[0084] The embodiment discloses a detailed scheme of embodiment five, and the steps are as follows:

[0085] S60: A mouse click event is listened to; when the mouse is clicked, the picking module selects a model from the model scene; the double-scene scene scheduling center judges whether a new model is selected;

[0086] S61: If the new model is selected, the double-scene scene scheduling center loads the model into the rendering scene alone, and adds the selected model to the to-be-updated set Wait_Update [];

[0087] S62: The double-scene scene scheduling center extracts the model type in Wait_Update [], and adds the type set in the model scene to the to-be-merged set Wait_Merge <type, MergeList> after excluding the currently selected model;

[0088] S63: The double-scene scene scheduling center analyzes the Wait_Merge <> set, identifies whether the model is a self-built model or an FBX imported model according to the model type, and generates a corresponding model to be merged;

[0089] S64: The double-scene scene scheduling center traverses the rendering scene to check whether there is a same type of model to be merged, deletes the same type of model to be merged in the rendering scene, adds the newly constructed model to be merged, and triggers the rendering scene to refresh at the same time.

[0090] Embodiment seven:

[0091] Compared with embodiment six, the embodiment further comprises:

[0092] S65: If the new model is not selected in S60, it is traversed whether there is an unmerged model in the rendering scene, and the unmerged model is added to the to-be-loaded model set WaitLoad [];

[0093] S66: The dual-scene scene scheduling center loads the models in WaitLoad[] into the model scene in sequence. After the model loading is completed, the scene scheduling center extracts the model model in WaitLoad[], updates the current model with the corresponding model set in the model scene, and adds it to the to-be-merged set Wait_Merge<model, MergeList>;

[0094] S67: The dual-scene scene scheduling center parses the Wait_Merge<> collection, identifies whether it is a self-built model or an FBX imported model based on the model type, and generates the corresponding merged model;

[0095] S68: The dual-scene scene scheduling center traverses the rendering scene to see if there is a merged model of the same model, deletes the merged model of the same model in the rendering scene, adds the newly constructed merged model, and triggers the rendering scene refresh at the same time.

[0096] Embodiment 8:

[0097] In the embodiment, the specific steps of S63 and S67 are disclosed:

[0098] S11: If the model is a shelf type, perform secondary classification on the shelf type model in Wait_Merge<>, determine the model attributes: shelf depth, shelf length, shelf height, number of shelf rows, number of shelf layers, column thickness, beam height, pickup height, and color consistency, extract the common model triangle information and the world coordinate information of each model, and generate a new merged model;

[0099] S12: If the model is of text type, the text type models in Wait_Merge<> are secondary classified to determine the model attributes: if the text name and text size are consistent, the common model triangle information and the world coordinate information of each model are extracted to generate a new merged model;

[0100] S13: If the model is of the trajectory line type, no secondary classification and grouping is performed, and the trajectory type model 3D geometry in Wait_Merge<> is directly merged to generate a new merged model;

[0101] S14: If the model is a floor type, no secondary grouping and classification is performed, and the three-dimensional geometry of the floor type model in Wait_Merge<> is directly merged to generate a new merged model;

[0102] S15: If the model is not within the range of the self-built model, it is identified as an FBX imported model, and the common model triangle information and the world coordinate information of each model are extracted to generate a new merged model.

[0103] The system selects a merging mode according to the creation type of the model. If the model is self-built, the model Geometry data is added to the merging set, and the BufferGeometryUtils.mergeBufferGeometries method is called for merging. If the model is imported from outside, the model Mesh data and the world matrix MatrixWorld are added to the merging set, and the InstancedMesh method is called for merging.

[0104] Embodiment Nine:

[0105] Compared with Embodiment Eight, in the present embodiment, the following is further included: S16: if the selected model is a module, the models in the module are traversed, and the processing of S11-S15 is performed.

[0106] Embodiment Ten:

[0107] In the present embodiment, a scheme for optimizing the performance of webpage three-dimensional large scene building based on the Three.js engine is disclosed as follows:

[0108] S1, the user opens the system on the webpage, selects a 3DMAX exported FBX format model for uploading, and when the model is uploaded, the system binds information of the three-dimensional model file and the system hardware product price database data;

[0109] S2, the system enters the basic information of the model, including the conveying speed, the lifting speed, the picking and placing speed, the piece / hour, the device function type (conveying device, single machine device, storage device, track device, code division machine device, robot device, AGV device), the definition of the picking and placing device name and the cargo carrying device name, which correspond to the sub-model in the three-dimensional model, and uploads the model screenshot;

[0110] S3, after the basic information is entered, the system tiles the picture bound by the three-dimensional model in the sidebar of the webpage, the user clicks the model picture, the system initiates a network request, downloads the FBX model file from the server, analyzes the three-dimensional model file, renders the model in the browser, and stores the model in the local after successful loading, so that the system performs local loading when the model is loaded again, and does not initiate a network request, thereby reducing network overhead;

[0111] S4, when the system loads the model, a unique ID of the model is generated, the product ID, the model name, and the model name in the price database are bound, the device type (conveying device, single machine device, storage device, track device, code division machine device, robot device) is set, and the conveying speed, the lifting speed, the picking and placing speed, the piece / hour, the picking and placing device name, and the cargo carrying device name are set;

[0112] S5, when the system loads the self-built model, a unique model ID is generated, and a unique self-built model is generated, including shelves, text, floors, walls, and track lines;

[0113] S6, after the model is loaded, the model is directly added to the rendering scene, the system selects the current model, and the user can modify the model attributes, including position coordinates, length, width, height, rotation angle, color, animation attributes, etc. After modification, the updated model is loaded into the model scene for storage by the dual-scene scene scheduling center, and all device sets of the current device model in the model scene are extracted, all device set models are merged, and the current model of the rendering scene is deleted. At the same time, the rendering scene loads the new merged model, triggering the rendering scene to refresh.

[0114] During the construction process, the user will continuously modify the position and attributes of the model, and the dual-scene scene scheduling center listens to the mouse event to complete synchronization, and the detailed steps are as follows:

[0115] S7, the system listens to the mouse click event, and when the mouse is clicked, the system model pickup module is called to select the model from the model scene, and the scene scheduling center judges whether a new model is selected;

[0116] S8, if a new model is selected, the scene scheduling center loads the model into the rendering scene, and the system adds the selected model to the Wait_Update set;

[0117] S9, the scene scheduling center extracts the model type from Wait_Update, and adds the corresponding type set in the model scene to Wait_Merge<type, MergeList> after excluding the currently selected model;

[0118] S10, the scene scheduling center analyzes the Wait_Merge set, and identifies whether the model is a self-built model or an FBX imported model according to the model type;

[0119] S11, if the type is a shelf type, the shelf type model in Wait_Merge is classified again, and the model attributes such as shelf depth, shelf length, shelf height, shelf column number, shelf layer number, column thickness, beam height, picking height, and color are consistent. The system extracts the common model triangle face information and the world coordinate information of each model to generate a new merged model;

[0120] S12, if the type is a text type, the text type model in Wait_Merge is classified again, and the model attributes such as text name and text size are consistent. The system extracts the common model triangle face information and the world coordinate information of each model to generate a new merged model;

[0121] S13, if the model is a trajectory type, the system does not perform secondary grouping due to low line repetition, and directly merges the three-dimensional geometry of the trajectory type model in Wait_Merge< > to generate a new merged model;

[0122] S14, if the model is a floor type, the system does not perform secondary grouping due to low floor repetition, and directly merges the three-dimensional geometry of the floor type model in Wait_Merge< > to generate a new merged model;

[0123] S15, if the model is not within the range of self-built models, the system identifies it as an FBX imported model, extracts the model's common model triangle information and world coordinate information of each model, and generates a new merged model;

[0124] S16, if the selected model is a module, the system traverses the models in the module and executes S11-S15;

[0125] S17, the scene scheduling center traverses the rendering scene to determine whether there is a merged model of the same type, deletes the merged model in the rendering scene, adds the newly constructed merged model, and triggers the rendering scene refresh;

[0126] S18, if step S7, no new model is selected, and whether there is an unmerged model in the rendering scene is traversed, the unmerged model is added to the WaitLoad[] set of models to be loaded;

[0127] S19, the scene scheduling center loads the models in WaitLoad[] into the model scene one by one, and after the model loading is completed, the scene scheduling center extracts the model type of the model in WaitLoad[], updates the corresponding model type set in the model scene, adds the unmerged set Wait_Merge< type, MergeList> to the current model;

[0128] S20, repeat steps S10-S17 to complete the update of the rendering scene merged model and trigger rendering.

[0129] Through the above steps, the double-scene model synchronization processing is realized, a large number of models stored in the model scene are classified again, models with the same attributes are merged, and after the model merging, even ten thousand models built into a three-dimensional scene can be merged into a hundred merged models, greatly reducing the rendering time. At the same time, the model scene stores single models, which are independently loaded into the rendering scene by the scene scheduling center, and the models that need to be modified in position, rotation angle, size and model attribute. It also ensures that the scene can support modifying a certain model or module after merging, and triggering the rendering scene synchronization again after modification, ensuring the smoothness of building and modifying models and the accuracy of scene rendering.

[0130] The "system" provided by the embodiment has the following features and functions:

[0131] Based on the Three.js three-dimensional engine development software, an external FBX model is loaded or a three-dimensional basic model is created by calling the Three.js engine to assemble a model with specific meaning, such as a shelf, a track line, text, etc. A user uploads a model in FBX format on a webpage and enters model parameters to load, create, and drag the model to form a complete three-dimensional scene.

[0132] It should be noted that the above describes the "system". However, such a "system" is not an essential technical feature, and should not be considered as a limitation on the protection scope of the present application. The embodiment only uses the "system" to facilitate the description of the present application.

[0133] The above embodiments only express the specific implementation of the present application, and the description is more specific and detailed. However, it should not be considered as a limitation on the protection scope of the present application. It should be noted that for ordinary skilled persons in the art, without departing from the technical concept of the present application, some modifications and improvements can be made, which are within the protection scope of the present application.

Claims

1. A Three.js engine-based web page three-dimensional large scene building system, characterized in that, The system comprises a model scene, a rendering scene, and a double-scene scene scheduling center; the model scene is used for storage of models and picking up of models; the rendering scene is used for rendering processing of merged models; the double-scene scene scheduling center comprises a model loading module, a new model judgment and identification module, a merging module, a deleting module, and a refreshing module; The model loading module is used for loading models into the model scene for storage; if the models are new models, the models are loaded into the rendering scene; The new model judgment and identification module is used for picking up models and judging whether new models are selected when the model scene changes, identifying whether the selected new models are self-built models or imported models; The merging module selects different merging modes for the self-built models or the imported models, and merges models with the same attributes; The deleting module is used for deleting models with the same type in the rendering scene; The refreshing module is used for adding or replacing merged models into the rendering scene to trigger scene rendering and refreshing again; When it is identified in the double-scene scene scheduling center that the models are self-built models or imported models, if it is identified that the models are self-built models and the self-built models are of shelf type and text type, the self-built models are classified again, the model triangular face information commonly used by the models and the world coordinate information of each model are extracted, and new merged models are generated; if it is identified that the models are imported models, the model triangular face information commonly used by the models and the world coordinate information of each model are extracted, and new merged models are generated.

2. The Three.js engine web page three-dimensional large scene building system according to claim 1, characterized in that, When the models are loaded, if the models already exist in the model scene stored locally, the models are cloned and copied, and the models are loaded locally.

3. The method for performance optimization of a large Three.js engine web page three-dimensional scene building system according to any one of claims 1-2, wherein, The system comprises the following steps: models are loaded into the model scene for storage, and models are picked up when the model scene changes; new models are loaded into the rendering scene; selected new models are identified as self-built models or imported models; different merging modes are selected for the self-built models or the imported models, and models with the same attributes are merged; models with the same type in the rendering scene are deleted; merged models are added or replaced into the rendering scene to trigger scene rendering and refreshing again.

4. The method for performance optimization of a Three.js engine web page three-dimensional large scene based on the method of claim 3, characterized in that, The system comprises the following specific steps: S1: a user opens the system on a webpage, selects an FBX format three-dimensional model file for uploading, and binds three-dimensional model file and system hardware product price database data when the three-dimensional model file is uploaded; S2: basic information of the three-dimensional model is inputted in the system, and a three-dimensional model picture is uploaded; S3: after the basic information is inputted, the picture bound by the three-dimensional model is tiled in a sidebar of the webpage; after a user clicks the three-dimensional model picture, the system initiates a network request, downloads an FBX format three-dimensional model file from a server, analyzes the three-dimensional model file, renders the model in a browser, and stores the model locally after successful loading; when the model is loaded again, the system performs local loading and does not initiate a network request; S4: when the system loads the model, a model unique ID is generated, product ID, model, and model name in the price database are bound, and device type, conveying speed, lifting speed, taking and placing goods speed, piece / hour, taking and placing goods device, and loading device name are set; S5: when the system loads a self-built model, a model unique ID and a unique self-built model number are generated. S6: After the model is loaded, the model is directly added to the rendering scene, the current model is selected, and the model attributes are modified; after the modification is completed, the updated model is loaded into the model scene for storage by the dual-scene scene scheduling center, all device sets of the current device model in the model scene are extracted, all device set models are merged, the model of the current device model in the rendering scene is deleted at the same time, the new merged model is loaded into the rendering scene, and the rendering scene is triggered to refresh.

5. The method for performance optimization of Three.js engine web page three-dimensional large scene building according to claim 4, characterized in that, In S2, the basic information includes conveying speed, lifting speed, picking and placing speed, piece / hour, device function type, defined picking and placing device name, and load device name; the device function type includes conveying device, single machine device, storage device, track device, code division machine device, robot device, and AGV device; the defined picking and placing device name and load device name correspond to the sub-model in the three-dimensional model.

6. The method for performance optimization of a Three.js engine web page three-dimensional large scene based on the method of claim 4, characterized in that, In S5, the self-built model includes a shelf, text, floor, wall, and track line.

7. The method for performance optimization of Three.js engine web page three-dimensional large scene building according to claim 4, characterized in that, During the building process, the user always modifies the position and attributes of the model, and the dual-scene scene scheduling center listens to the mouse event to complete synchronization, and the specific steps are as follows: S60: A mouse click event is listened to; when the mouse is clicked, the picking module selects a model from the model scene; the dual-scene scene scheduling center determines whether a new model is selected; S61: If a new model is selected, the dual-scene scene scheduling center loads the model into the rendering scene alone, and adds the selected model to the update set Wait_Update []; S62: The dual-scene scene scheduling center extracts the model type in Wait_Update [], and adds the type set in the model scene to the merge set Wait_Merge<type, MergeList> after excluding the currently selected model; S63: The dual-scene scene scheduling center analyzes the Wait_Merge<> set, identifies whether the model is a self-built model or an FBX imported model according to the model type, and generates a corresponding merged model; S64: The dual-scene scene scheduling center iterates through the rendering scene to determine whether there is a merged model of the same type, deletes the merged model of the same type in the rendering scene, adds the newly constructed merged model, and triggers the rendering scene to refresh.

8. The method for performance optimization of a Three.js engine web page three-dimensional large scene based on the method of claim 7, wherein, Further comprising: S65: If no new model is selected in S60, iterate through the rendering scene to determine whether there is an unmerged model, and add the unmerged model to the model set WaitLoad []; S66: The dual-scene scene scheduling center loads the models in WaitLoad [] into the model scene one by one, the model is loaded into the model scene, the model type in WaitLoad [] is extracted by the scene scheduling center, the current model in the model scene is updated, and the model is added to the merge set Wait_Merge<type, MergeList>; S67: The dual-scene scene scheduling center analyzes the Wait_Merge<> set, identifies whether the model is a self-built model or an FBX imported model according to the model type, and generates a corresponding merged model; S68: The double-scene scene scheduling center traverses whether there is a same model in the rendering scene, deletes the same model in the rendering scene, adds the newly constructed merged model, and triggers the rendering scene refresh.

9. The method for performance optimization of a Three.js engine web page three-dimensional large scene based on the method of claim 8, wherein, S63 and S67 specifically include: S11: If the model is a shelf type, the shelf type model in Wait_Merge< > is classified twice, the model attributes are judged: the same shelf depth, shelf length, shelf height, shelf column number, shelf layer number, column thickness, beam height, picking height, and color, the model triangle information commonly used by the model and the world coordinate information of each model are extracted, and a new merged model is generated; S12: If the model is a text type, the text type model in Wait_Merge< > is classified twice, the model attributes are judged: the same text name and text size, the model triangle information commonly used by the model and the world coordinate information of each model are extracted, and a new merged model is generated; S13: If the model is a track line type, do not perform secondary classification grouping, directly merge the three-dimensional geometry of the track type model in Wait_Merge< >, and generate a new merged model; S14: If the model is a floor type, do not perform secondary classification grouping, directly merge the three-dimensional geometry of the floor type model in Wait_Merge< >, and generate a new merged model; S15: If the model is not within the range of self-built models, it is identified as an FBX imported model, the model triangle information commonly used by the model and the world coordinate information of each model are extracted, and a new merged model is generated; S16: If the selected model is a module, traverse the model in the module, and execute S11-S15.

Images