Method and system for automatic splitting and displaying of 3D models in a webvr application

Abstract

The application discloses a kind of automatic splitting display method and system of 3D model in WebVR application, and the application includes creating three-dimensional scene, loading 3D model, calculating the size and boundary range of submodel three-dimensional space, setting submodel offset, setting camera, rendering list view and setting 360° all-around display, wherein rendering list view includes binding the camera of submodel with canvas, binding the enable / disable of camera with the scroll of list view, so that when list view is scrolled, only the corresponding camera in the visible range of list view is enabled, and the corresponding camera in the remaining range is disabled.The application aims to automatically split all submodels without affecting the display and operation of the main model in the scene, and to realize real-time 360° display in the list, and to realize smooth operation in Web regardless of the number of submodels, to meet the demand of quickly finding the submodel to be understood in the list through appearance.

Description

Technical Field

[0001] This invention relates to the field of Web3D rendering technology in a Web environment, specifically to a method and system for automatically splitting and displaying 3D models in a WebVR application. Background Technology

[0002] Traditional multimedia teaching methods, such as images and 2D videos, lack realistic scenarios. Students' attention easily wanders when they lose interest. VR teaching, however, creates an immersive learning environment. The three-dimensional presentation draws students' attention entirely to the content, eliminating distractions. VR teaching utilizes various 3D models to explain their structure and function, making the presentation of these models crucial. A 3D model is composed of multiple sub-models. In VR teaching, besides displaying the main model, it's often necessary to show students the names, descriptions, and appearances of each sub-model, providing a clear understanding of the overall 3D model's structure. Traditionally, sub-model presentation involves reading the model data and then displaying the sub-model names in a list. Students must select a sub-model name to see it highlighted on the main model. This approach fails to automatically separate sub-models and display them in real-time 360° in a list. This hinders students from quickly finding the sub-models they want to learn about through visual appeal and also fails to stimulate their interest and thirst for knowledge. In a web browser environment, WebVR (Web-based Virtual Reality) requires significant computing resources to render 3D models, and the more complex the model, the more resources are needed. If each sub-model is rendered in a separate scene within the list view and displayed in real-time 360°, the browser will crash when the number of sub-models reaches a certain point. Summary of the Invention

[0003] The technical problem to be solved by the present invention is to provide a method and system for automatically splitting and displaying 3D models in WebVR applications, which addresses the above-mentioned problems in the prior art. The present invention aims to automatically split all sub-models and display them in a list in real time with 360° without affecting the display and operation of the main model in the scene, and to ensure smooth operation in the Web regardless of the number of sub-models, thereby meeting the need to quickly find the sub-models you want to know about by their appearance in the list.

[0004] To solve the above-mentioned technical problems, the technical solution adopted by the present invention is as follows:

[0005] A method for automatically splitting and displaying 3D models in a WebVR application, comprising:

[0006] 1) Create a 3D scene, including: using the Web3D rendering engine to create two 3D scenes, Scene 1 and Scene 2. Scene 1 serves as the normal display and operation area of ​​the main model, while Scene 2 serves as the carrier area for subsequent sub-model splitting. Set the lights, camera and environment map to be the same for both 3D scenes, and set Scene 2 to not be displayed.

[0007] 2) Loading 3D models, including: using the Web3D rendering engine's model loader to load the same 3D model for Scene 1 and Scene 2, using the 3D model as the main model, reading the main model and recording the sub-model list information under the main model, and rendering and displaying the main model normally in Scene 1 and Scene 2.

[0008] 3) Calculate the 3D spatial size and boundary range of the sub-model, including: traversing the sub-model list in Scene 2, measuring the 3D spatial size of each sub-model, and determining the bounding box size of the sub-model.

[0009] 4) Set sub-model offset, including: offsetting the spatial position of each sub-model so that the display of sub-models in 3D space does not interfere with each other, and obtaining the center point position of the offset sub-model;

[0010] 5) Set up the camera, including: create a corresponding camera for each sub-model, calculate the position and viewing distance of each camera based on the center point position of the sub-model and the size of the bounding box of the model boundary, so that other sub-models are not displayed within the camera's field of view of each sub-model;

[0011] 6) Rendering the list view, including: creating a list view based on the sub-model list information, creating a canvas for each view, binding the camera of the sub-model to the canvas through the rendering engine, rendering the image in the camera onto the canvas, and binding the camera's enable / disable to the scrolling of the list view, so that when the list view is scrolled, only the camera corresponding to the visible range of the list view is enabled, and the cameras corresponding to the other ranges are disabled.

[0012] 7) Set up a 360° all-around display, including: for the corresponding sub-models within the visible range of the list view, dynamically change the spatial position of the camera corresponding to the sub-model to achieve a 360° rotation of the camera, and update the image in the canvas in real time through the rendering engine.

[0013] Optionally, when creating two 3D scenes, Scene 1 and Scene 2, using the Web3D rendering engine in step 1), the process includes: first, creating two engines using the Web3D rendering engine, one engine using a canvas inserted into the page, and the other engine using a canvas not inserted into the page; then, using the two engines to create two identical 3D scenes, Scene 1 and Scene 2, respectively.

[0014] Optionally, step 2) includes:

[0015] 2.1) Use the Web3D rendering engine's model loader to load a 3D model for Scene 1 and add the 3D model to Scene 1 to use the 3D model as the main model;

[0016] 2.2) Use the Web3D rendering engine's model loader again to load the 3D model for Scene 2, add the 3D model to Scene 2, and at the same time read and record the sub-model list information of the main model;

[0017] 2.3) Based on the obtained sub-model list information, create a list on the page to display the names of the sub-models, and create a canvas above each sub-model name.

[0018] Optionally, step 3) includes:

[0019] 3.1) Traverse the list of sub-models and use the sub-model's own method to obtain the bounding box information of the sub-model. The bounding box of the sub-model is a cuboid in three-dimensional space. Record the minimum value mininum and the maximum value maximum of the bounding box. Both the minimum value mininum and the maximum value maximum are three-dimensional vectors.

[0020] 3.2) Based on the bounding box information of the sub-model, subtract the x, y, and z coordinates of the minimum value mininum from the x, y, and z coordinates of the maximum value maxRadius to obtain the length a, width b, and height c of the bounding box, and determine the size of the sub-model's bounding box. Calculate the spatial radius radius of the sub-model using the formula for the radius of the circumscribed sphere of a cuboid, and record the maximum radius maxRadius of the sub-model. Finally, add the minimum value mininum and the maximum value maximum of the bounding box and divide by 2 to calculate the meshCenter position of the sub-model's center point in three-dimensional space.

[0021] Optionally, step 4) includes:

[0022] 4.1) Enlarge the maximum radius by a specified factor to determine the radius r of the spherical structure in three-dimensional space;

[0023] 4.2) Traverse the sub-model list, using i as the current index and n as the list length. Assuming n points are uniformly distributed on the sphere, first, obtain the angle alpha between each point and the polar axis by taking the inverse cosine of (2*in) / n. Then, take the square root of n*π and multiply it by alpha to obtain the longitude beta of each point on the sphere. Next, calculate the rectangular coordinates of the points on the sphere using the angle alpha with the polar axis, the longitude beta, and the radius r of the sphere to obtain the offset position of each sub-model in three-dimensional space (sin(alpha)*sin(beta)*r, cos(alpha)*r, sin(alpha)*cos(beta)*r). Finally, by setting the spatial position of the sub-models, the sub-models are uniformly distributed on the spherical structure surface in three-dimensional space to ensure that the display of each sub-model in Scene 2 does not interfere with each other.

[0024] Optionally, step 5) includes:

[0025] 5.1) Create a camera by using the center point (meshCenter) of the sub-model in 3D space and the spatial radius (radius) of the sub-model as the position and movement radius of the camera;

[0026] 5.2) Set the maximum visible range (maxZ) of the camera based on the camera's movement radius, so that the camera only captures the sub-models it is bound to and does not capture content outside the visible range, so that other sub-models are not displayed within the camera's field of view of each sub-model.

[0027] Optionally, step 6) includes:

[0028] 6.1) Create a list view based on the sub-model list information, and create a canvas for each view; for the canvas and camera that correspond one-to-one with the sub-model, use the view registration method of the engine in Scene 2 to bind the camera of the sub-model to the canvas through the rendering engine, and render the sub-model image captured by each camera to the corresponding canvas.

[0029] 6.2) By listening to the scrolling event of the list view, dynamically calculate the currently displayed canvas based on the visible range of the list, enable the corresponding camera to start shooting, and stop shooting for cameras outside the visible range. Bind the enabling / disabling of the camera to the scrolling of the list view, so that when the list view scrolls, only the corresponding camera within the visible range of the list view is enabled, and the corresponding cameras in other ranges are disabled.

[0030] Optionally, step 7) includes: for the sub-models corresponding to the visible range of the list view, during the rendering process of the engine in Scene 2, changing the viewpoint and position of the camera corresponding to the sub-models, thereby achieving a 360° rotation of the camera, and updating the image in the canvas in real time through the engine, so as to display the list of sub-models in the list view in a 360° all-round way.

[0031] Furthermore, the present invention also provides an automatic splitting and display system for 3D models in a WebVR application, comprising a microprocessor and a memory interconnected thereto, wherein the microprocessor is programmed or configured to execute the automatic splitting and display method for 3D models in the WebVR application.

[0032] Furthermore, the present invention also provides a computer-readable storage medium storing a computer program for being programmed or configured by a microprocessor to execute the automatic splitting and display method of 3D models in the WebVR application.

[0033] Compared with the prior art, the present invention has the following advantages: The present invention can automatically split all sub-models and display them in a list in real time with 360° without affecting the display and operation of the main model in the scene. It can also ensure the smooth display effect while the main model and sub-models can be rendered and displayed separately. Furthermore, it can run smoothly in the Web regardless of the number of sub-models, thereby meeting the need to quickly find the sub-model you want to know about in the list by its appearance. Attached Figure Description

[0034] Figure 1 This is a schematic diagram of the basic process of the method in an embodiment of the present invention. Detailed Implementation

[0035] The following section will use the example of automatically splitting and displaying a 3D model using the BabylonJS rendering engine to further illustrate this invention. It should be noted that BabylonJS is a free and open-source Web3D rendering engine. Using it as an example, this invention will demonstrate how to automatically split all sub-models and display them in a list in real-time at 360° without affecting the display and operation of the main model in the scene. However, this invention does not depend on a specific rendering engine.

[0036] like Figure 1 As shown in the figure, this embodiment provides a method for automatically splitting and displaying 3D models in a WebVR application, including:

[0037] 1) Create a 3D scene, including: using the Web3D rendering engine to create two 3D scenes, Scene 1 and Scene 2. Scene 1 serves as the normal display and operation area of ​​the main model, while Scene 2 serves as the carrier area for subsequent sub-model splitting. Set the lights, camera and environment map to be the same for both 3D scenes, and set Scene 2 to not be displayed.

[0038] 2) Loading 3D models, including: using the Web3D rendering engine's model loader to load the same 3D model for Scene 1 and Scene 2, using the 3D model as the main model, reading the main model and recording the sub-model list information under the main model, and rendering and displaying the main model normally in Scene 1 and Scene 2.

[0039] 3) Calculate the 3D spatial size and boundary range of the sub-model, including: traversing the sub-model list in Scene 2, measuring the 3D spatial size of each sub-model, and determining the bounding box size of the sub-model.

[0040] 4) Set sub-model offset, including: offsetting the spatial position of each sub-model so that the display of sub-models in 3D space does not interfere with each other, and obtaining the center point position of the offset sub-model;

[0041] 5) Set up the camera, including: create a corresponding camera for each sub-model, calculate the position and viewing distance of each camera based on the center point position of the sub-model and the size of the bounding box of the model boundary, so that other sub-models are not displayed within the camera's field of view of each sub-model;

[0042] 6) Rendering the list view, including: creating a list view based on the sub-model list information, creating a canvas for each view, binding the camera of the sub-model to the canvas through the rendering engine, rendering the image in the camera onto the canvas, and binding the camera's enable / disable to the scrolling of the list view, so that when the list view is scrolled, only the camera corresponding to the visible range of the list view is enabled, and the cameras corresponding to the other ranges are disabled.

[0043] 7) Set up a 360° all-around display, including: for the corresponding sub-models within the visible range of the list view, dynamically change the spatial position of the camera corresponding to the sub-model to achieve a 360° rotation of the camera, and update the image in the canvas in real time through the rendering engine.

[0044] In step 1) of this embodiment, when creating two 3D scenes (Scene 1 and Scene 2) using the Web3D rendering engine, the process includes: First, creating two engines using the Web3D rendering engine. One engine uses a canvas inserted into the page, while the other engine uses a canvas not inserted into the page. Then, using the two engines, two identical 3D scenes (Scene 1 and Scene 2) are created. Uniform lighting, cameras, and environment maps are set for both Scene 1 and Scene 2. Scene 1 will be used to display the main model, and Scene 2 will be used to hold the sub-models.

[0045] In this embodiment, step 2) includes:

[0046] 2.1) Use the Web3D rendering engine's model loader to load the 3D model for Scene 1 (in this embodiment, the LoadAssetContainer method in SceneLoader is used in 2.1) and add the 3D model to Scene 1 to use the 3D model as the main model;

[0047] 2.2) Use the Web3D rendering engine's model loader again to load the 3D model for Scene 2 (in this embodiment, the LoadAssetContainer method in SceneLoader is used in 2.1), add the 3D model to Scene 2, and read and record the sub-model list information of the main model.

[0048] 2.3) Based on the obtained sub-model list information, create a list on the page to display the names of the sub-models, and create a canvas above each sub-model name.

[0049] In this embodiment, step 3) includes:

[0050] 3.1) Traverse the list of sub-models and use the sub-model's own method for obtaining boundary information (e.g., the getBoundingInfo method in this embodiment) to obtain the information of the bounding box of the sub-model. The bounding box of the sub-model is a cuboid in three-dimensional space. Record the minimum value mininum and the maximum value maximum of the bounding box, and both the minimum value mininum and the maximum value maximum are three-dimensional vectors.

[0051] 3.2) Based on the bounding box information of the sub-model, subtract the x, y, and z coordinates of the minimum value mininum from the x, y, and z coordinates of its maximum value maxRadius to obtain the length a, width b, and height c of the bounding box, thus determining the size of the sub-model's bounding box; use the formula for the radius of the circumscribed sphere of the cuboid (√(a... 2 +b 2 +c 2 ) / 2) Calculate the spatial radius radius of the sub-model, and record the maximum radius maxRadius of the sub-model. Finally, add the minimum value mininum and the maximum value maximum of the bounding box and divide by 2 to calculate the center point position meshCenter of the sub-model in three-dimensional space.

[0052] In this embodiment, step 4) includes:

[0053] 4.1) Enlarge the maximum radius by a specified factor (the value can be chosen according to actual needs, for example, in this embodiment, the value is 50 times) to determine the radius r of the spherical structure in three-dimensional space;

[0054] 4.2) Traverse the sub-model list, using i as the current index and n as the list length. Assuming n points are uniformly distributed on the sphere, first, obtain the angle alpha between each point and the polar axis by taking the inverse cosine of (2*in) / n. Then, take the square root of n*π and multiply it by alpha to obtain the longitude beta of each point on the sphere. After that, calculate the rectangular coordinates of the points on the sphere using the angle alpha with the polar axis, the longitude beta, and the radius r of the sphere to obtain the offset position of each sub-model in three-dimensional space (sin(alpha)*sin(beta)*r, cos(alpha)*r, sin(alpha)*cos(beta)*r). Finally, by setting the spatial position of the sub-models, the sub-models are uniformly distributed on the spherical structure surface in three-dimensional space to ensure that the display of each sub-model in Scene2 does not interfere with each other.

[0055] In this embodiment, step 5) includes:

[0056] 5.1) Create a camera by using the center point (meshCenter) of the sub-model in 3D space and the spatial radius (radius) of the sub-model as the position and movement radius of the camera;

[0057] 5.2) Set the maximum visible range (maxZ) of the camera based on the camera's movement radius, so that the camera only captures the sub-models it is bound to and does not capture content outside the visible range, so that other sub-models are not displayed within the camera's field of view of each sub-model.

[0058] In this embodiment, step 6) includes:

[0059] 6.1) Create a list view based on the sub-model list information, and create a canvas for each view; for the canvas and camera that correspond one-to-one with the sub-model, use the engine's registerView method in Scene 2 (Engine2's registerView method) to bind the sub-model's camera to the canvas through the rendering engine, and render the sub-model image captured by each camera to the corresponding canvas.

[0060] 6.2) By listening to the scrolling event of the list view, dynamically calculate the currently displayed canvas based on the visible range of the list, enable the corresponding camera to start shooting, and stop shooting for cameras outside the visible range. Bind the enabling / disabling of the camera to the scrolling of the list view, so that when the list view scrolls, only the corresponding camera within the visible range of the list view is enabled, and the corresponding cameras in other ranges are disabled.

[0061] In this embodiment, step 7) includes: for the sub-models corresponding to the visible range of the list view, during the rendering process of Engine2 in Scene 2, changing the viewpoint and position of the camera corresponding to the sub-model, thereby achieving a 360° rotation (slow rotation) of the camera, and updating the image in the canvas in real time through the engine, so that a list of sub-models can be displayed in the list view in a 360° all-round way.

[0062] In summary, the automatic splitting and display method for 3D models in WebVR applications presented in this embodiment implements a dual-engine, dual-scene, multi-camera rendering method with uniform spherical offset in three-dimensional space. This method automatically splits all sub-models into a list and displays them in real-time at 360° without affecting the display and operation of the main model in the scene. Furthermore, it ensures smooth display while allowing both the main and sub-models to be rendered and displayed independently. It also enables smooth operation on the Web regardless of the number of sub-models, significantly reducing the rendering cost of the Web browser. This provides a solid foundation for the diversity and fun of WebVR educational applications, thereby meeting the need to quickly find desired sub-models by their appearance in the list.

[0063] In addition, this embodiment also provides an automatic splitting and display system for 3D models in a WebVR application, including a microprocessor and a memory connected to each other, wherein the microprocessor is programmed or configured to execute the automatic splitting and display method for 3D models in the WebVR application.

[0064] In addition, this embodiment also provides a computer-readable storage medium storing a computer program that is programmed or configured by a microprocessor to execute the automatic splitting and display method of 3D models in the WebVR application.

[0065] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-readable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code. This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create a machine for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The functions specified in one or more boxes. These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable apparatus for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0066] The above description is merely a preferred embodiment of the present invention. The scope of protection of the present invention is not limited to the above embodiments. All technical solutions falling within the scope of the present invention's concept are within the scope of protection of the present invention. It should be noted that for those skilled in the art, any improvements and modifications made without departing from the principle of the present invention should also be considered within the scope of protection of the present invention.

Claims

1. A method for automatic split presentation of 3D models in WebVR applications, characterized in that, include: 1) Create a 3D scene, including: using the Web3D rendering engine to create two 3D scenes, Scene 1 and Scene 2. Scene 1 serves as the normal display and operation area of ​​the main model, while Scene 2 serves as the carrier area for subsequent sub-model splitting. Set the lights, camera and environment map to be the same for both 3D scenes, and set Scene 2 to not be displayed. 2) Loading 3D models, including: using the Web3D rendering engine's model loader to load the same 3D model for Scene 1 and Scene 2, using the 3D model as the main model, reading the main model and recording the sub-model list information under the main model, and rendering and displaying the main model normally in Scene 1 and Scene 2. 3) Calculate the 3D spatial size and boundary range of the sub-model, including: traversing the sub-model list in Scene 2, measuring the 3D spatial size of each sub-model, and determining the bounding box size of the sub-model; 4) Set sub-model offset, including: offsetting the spatial position of each sub-model so that the display of sub-models in 3D space does not interfere with each other, and obtaining the center point position of the offset sub-model; 5) Set up the camera, including: create a corresponding camera for each sub-model, calculate the position and viewing distance of each camera based on the center point position of the sub-model and the size of the bounding box of the model boundary, so that other sub-models are not displayed within the camera's field of view of each sub-model; 6) Rendering the list view, including: creating a list view based on the sub-model list information, creating a canvas for each view, binding the sub-model's camera to the canvas through the rendering engine, rendering the image in the camera onto the canvas, and binding the camera's enable / disable to the list view's scrolling, so that when the list view scrolls, only the camera corresponding to the visible range of the list view is enabled, and the cameras corresponding to the cameras in other ranges are disabled. 7) Set up a 360° all-around display, including: for the corresponding sub-models within the visible range of the list view, dynamically change the spatial position of the camera corresponding to the sub-model to achieve a 360° rotation of the camera, and update the image in the canvas in real time through the rendering engine. 2.The method of claim 1, wherein, When creating two 3D scenes, Scene 1 and Scene 2, using the Web3D rendering engine in step 1), the process includes: first, creating two engines using the Web3D rendering engine, one engine using a canvas inserted into the page, and the other engine using a canvas not inserted into the page, and then using the two engines to create two identical 3D scenes, Scene 1 and Scene 2. 3.The method of claim 1, wherein, Step 2) includes: 2.1) Use the Web3D rendering engine's model loader to load a 3D model for Scene 1 and add the 3D model to Scene 1 to use the 3D model as the main model; 2.2) Use the Web3D rendering engine's model loader again to load the 3D model for Scene 2, add the 3D model to Scene 2, and at the same time read and record the sub-model list information of the main model; 2.3) Based on the obtained sub-model list information, create a list on the page to display the names of the sub-models, and create a canvas above each sub-model name. 4.The method of claim 1, wherein, Step 3) includes: 3.1) Traverse the list of sub-models and use the sub-model's own method to obtain the bounding box information of the sub-model. The bounding box of the sub-model is a cuboid in three-dimensional space. Record the minimum value mininum and the maximum value maximum of the bounding box. Both the minimum value mininum and the maximum value maximum are three-dimensional vectors. 3.2) Based on the bounding box information of the sub-model, subtract the x, y, and z coordinates of the minimum value (mininum) from the x, y, and z coordinates of the maximum value (maximum) to obtain the length (a), width (b), and height (c) of the bounding box, and determine the size of the sub-model's bounding box. Calculate the spatial radius (radius) of the sub-model using the formula for the radius of the circumscribed sphere of a cuboid, and record the maximum radius (maxRadius) of the sub-model. Finally, add the minimum value (mininum) and the maximum value (maximum) of the bounding box and divide by 2 to calculate the meshCenter, the center point of the sub-model in three-dimensional space. 5.The method of claim 4, wherein, Step 4) includes: 4.1) Enlarge the maximum radius by a specified factor to determine the radius r of the spherical structure in three-dimensional space; 4.2) Traverse the sub-model list, using i as the current index and n as the list length. Assuming n points are uniformly distributed on the sphere, first, obtain the angle alpha between each point and the polar axis by taking the inverse cosine of (2*in) / n. Then, take the square root of n*π and multiply it by alpha to obtain the longitude beta of each point on the sphere. Next, calculate the rectangular coordinates of the points on the sphere using the angle alpha with the polar axis, the longitude beta, and the radius r of the sphere to obtain the offset position of each sub-model in three-dimensional space (sin(alpha) *sin(beta)* r, cos(alpha) * r, sin(alpha) * cos(beta)* r). Finally, by setting the spatial position of the sub-models, the sub-models are uniformly distributed on the spherical structure surface in three-dimensional space to ensure that the display of each sub-model in Scene 2 does not interfere with each other. 6.The method of claim 4, wherein, Step 5) includes: 5.1) Create a camera by using the center point (meshCenter) of the sub-model in 3D space and the spatial radius (radius) of the sub-model as the camera's position and movement radius; 5.2) Set the maximum visible range (maxZ) of the camera based on the camera's movement radius, so that the camera only captures the sub-models it is bound to and does not capture content outside the visible range, so that other sub-models are not displayed within the camera's field of view of each sub-model. 7.The method of claim 1, wherein, Step 6) includes: 6.1) Create a list view based on the sub-model list information, and create a canvas for each view; for the canvas and camera that correspond one-to-one with the sub-model, use the view registration method of the engine in Scene 2 to bind the camera of the sub-model to the canvas through the rendering engine, and render the sub-model image captured by each camera to the corresponding canvas. 6.2) By listening to the scrolling event of the list view, dynamically calculate the currently displayed canvas based on the visible range of the list, enable the corresponding camera to start shooting, and stop shooting for cameras outside the visible range. Bind the enabling / disabling of the camera to the scrolling of the list view, so that when the list view scrolls, only the corresponding camera within the visible range of the list view is enabled, and the corresponding cameras in other ranges are disabled. 8.The method of claim 1, wherein, Step 7) includes: For the corresponding sub-models within the visible range of the list view, during the rendering process of the engine in Scene 2, change the viewpoint and position of the camera corresponding to the sub-models to achieve 360° rotation of the camera. The engine updates the image in the canvas in real time, thereby displaying the list of sub-models in the list view from all angles.

9. An automatic split presentation system of a 3D model in a WebVR application, comprising a microprocessor and a memory connected to each other, characterized in that, The microprocessor is programmed or configured to execute the automatic splitting and display method of 3D models in the WebVR application according to any one of claims 1 to 8.

10. A computer-readable storage medium having stored therein a computer program, characterized in that, The computer program is used to be programmed or configured by a microprocessor to execute the automatic splitting and display method of 3D models in the WebVR application according to any one of claims 1 to 8.

Images