Three-dimensional platform building method and device of browser, electronic equipment and medium

Abstract

The invention relates to a three-dimensional platform building method and device of a browser, electronic equipment and a medium, and belongs to the technical field of computer software development.The method comprises the steps that a Vite framework and a Vue framework are adopted to build a front-end application framework of a three-dimensional platform, and a three-dimensional engine library is adopted to process rendering of a three-dimensional scene at the front end; a back-end data storage and management framework of the three-dimensional platform is built by adopting a WebAPI framework; determining a target component for building the three-dimensional platform according to preset functions and requirements of the three-dimensional platform; and constructing a three-dimensional platform of the browser according to the constructed front-end application architecture, the constructed rear-end data storage and management architecture and the target component. According to the method, the web three-dimensional platform is ecologically, rapidly and customized designed by utilizing the existing web three-dimensional engine and the nodejs, so that repeated work and inconvenient work in web three-dimensional development are reduced, and iteration and updating are performed on the basis.

Description

Technical Field

[0001] The present invention relates to the technical field of computer software development, and in particular to a method, device, electronic device and medium for building a three-dimensional platform of a browser. Background Art

[0002] After nodejs used google v8 engine out of the browser as js interpreter, the efficiency of js has been doubled. At the same time, with the launch of webgl2.0, the ability of rendering 3D scenes on browsers has been greatly improved. js 3D libraries such as cesium and threejs have achieved some results in the field of web 3D rendering by encapsulating webgl. Compared with 3D engines such as unity and UE, unity and UE not only encapsulate GPU API, but also provide 3D scene editors, which can adjust the position and properties of objects by dragging and dropping and property panels, while web 3D engines do not provide similar 3D scene editors.

[0003] As the requirements for page beautification and scene 3D become higher and higher, the construction of 3D scenes is becoming more and more complicated. It is becoming more and more cumbersome to operate and modify 3D scenes in the editor and browser environment. Each update and rendering of 3D scenes is also slower than that of traditional h5 pages. At present, there are some projects that build 2D and 3D web pages by dragging and dropping, but the source code after construction is not provided. Instead, the page is embedded through special components. Some projects that need to run on the intranet require additional fees. Although Unity and UE themselves have projects for the HTML5 web platform, they are not native to the browser and cannot be directly combined with browser projects. They cannot use the ecological library of NodeJS and are not as direct and convenient as web projects. Therefore, web 3D development requires a 3D platform to solve the above problems. Summary of the invention

[0004] In view of this, it is necessary to provide a method, device, electronic device and medium for building a three-dimensional platform for a browser to solve the technical problems in the prior art that the creation and editing of three-dimensional scenes in a browser environment are relatively complicated to operate, and frequent code modifications are required to adjust the three-dimensional scenes, and there is a lack of intuitive editing tools resulting in low efficiency.

[0005] In order to solve the above problems, the present invention provides a method for building a three-dimensional platform of a browser, comprising: The front-end application architecture of the 3D platform is constructed using the Vite and Vue frameworks, and the 3D engine library is used to process the rendering of 3D scenes at the front end; Use the WebAPI framework to build the backend data storage and management architecture of the 3D platform; Determine the target components for building the 3D platform based on the preset functions and requirements of the 3D platform; A three-dimensional browser platform is constructed based on the front-end application architecture, back-end data storage and management architecture and target components.

[0006] In a possible implementation, the use of a 3D engine library to process the rendering of a 3D scene at the front end includes: The Cesium tool is used to process the rendering of three-dimensional scenes on the front end.

[0007] In a possible implementation, after determining the target component for building the three-dimensional platform, the method further includes: performing file management on the target component, and parsing and managing events and objects.

[0008] In a possible implementation, determining the target components for building the three-dimensional platform according to the preset functions and requirements of the three-dimensional platform includes: Analyze the requirements of the 3D platform and determine the basic operation objects, basic files and basic functions of the 3D platform; Determine the target components for building the three-dimensional platform based on the basic operation objects, basic files and basic functions.

[0009] In a possible implementation, the target components include a resource manager, an object manager, an event manager, a scene manager, a real-time window, and a script manager.

[0010] In a possible implementation, after determining the target component for building the three-dimensional platform, the method further includes: Implement functional interaction between the front-end and back-end of the 3D platform according to the target components, including: The resource manager uses the back-end file operation interface to interact with the front-end through the API to achieve file interaction and resource management; Use the object manager to obtain objects in the front-end real-time loading scene, and use the object manager to provide attribute editing functions; Use the event manager to obtain event information in the front-end real-time loading scene and provide user-configured event responses; Use Cesium API to create and manipulate 3D objects, and display editing windows through the front end; Provides a script editor interface through the Script Manager.

[0011] In a possible implementation, the method further includes setting a front-end routing to load and display different three-dimensional scenes and editing functions.

[0012] In a second aspect, the present invention further provides a three-dimensional platform building device for a browser, comprising: The front-end environment building module is used to build front-end applications using the Vite and Vue frameworks, and use the 3D engine library to process the rendering of 3D scenes on the front end; The backend environment building module is used to use WebAPI to handle backend data storage and management; The component building module is used to determine the target components for building the three-dimensional platform according to the preset functions and requirements of the three-dimensional platform.

[0013] In a third aspect, the present invention further provides an electronic device, comprising: a processor and a memory; The memory stores a computer-readable program executable by the processor; When the processor executes the computer-readable program, the steps in the method for building a three-dimensional platform of the browser as described above are implemented.

[0014] In a fourth aspect, the present invention further provides a computer-readable storage medium storing one or more programs, wherein the one or more programs can be executed by one or more processors to implement the steps in the method for building a three-dimensional platform of a browser as described above.

[0015] The beneficial effects of the present invention are as follows: first, the front-end application is constructed by adopting the Vite and Vue frameworks, and the 3D engine library is used to process the rendering of the 3D scene at the front end; then, WebAPI is used to process the data storage and management of the back-end and build the back-end environment, and finally, according to the preset functions and requirements of the 3D platform, the target components for building the 3D platform are determined. These modules together constitute the entire system, enabling users to complete the creation, editing and management of 3D scenes. Thus, the existing web 3D engine and nodejs ecology are used to quickly and custom design the web 3D platform, so as to reduce repetitive work and simplify inconvenient work in web 3D development, and iterate and update on this basis. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] Figure 1 A method flow chart of an embodiment of a method for building a three-dimensional platform of a browser provided by the present invention; Figure 2 It is a schematic diagram of an embodiment of a three-dimensional platform building device for a browser provided by the present invention; Figure 3 It is a schematic diagram of the operating environment of an electronic device provided by the present invention. DETAILED DESCRIPTION

[0017] The preferred embodiments of the present invention are described in detail below in conjunction with the accompanying drawings, wherein the accompanying drawings constitute a part of this application and are used together with the embodiments of the present invention to illustrate the principles of the present invention, but are not used to limit the scope of the present invention.

[0018] A specific embodiment of the present invention discloses a method for building a three-dimensional platform for a browser, please refer to Figure 1 ,include: S101. Use Vite and Vue frameworks to build the front-end application architecture of the 3D platform, and use the 3D engine library to process the rendering of the 3D scene at the front end; S102. Use the WebAPI framework to build the backend data storage and management architecture of the 3D platform; S103, determining target components for building the three-dimensional platform according to preset functions and requirements of the three-dimensional platform; S104: construct a three-dimensional browser platform according to the constructed front-end application architecture, back-end data storage and management architecture and target components.

[0019] In this embodiment, the front-end application is first built by using Vite and Vue frameworks, and the 3D engine library is used to process the rendering of the 3D scene at the front end; then WebAPI is used to process the back-end data storage and management and build the back-end environment, and finally, according to the preset functions and requirements of the 3D platform, the target components for building the 3D platform are determined. These modules together constitute the entire system, allowing users to complete the creation, editing and management of 3D scenes. Thus, it is possible to use the existing web 3D engine and nodejs ecology to quickly and custom design the web 3D platform, so as to reduce repetitive work and simplify inconvenient work in web 3D development, and iterate and update on this basis.

[0020] In some embodiments, the use of a 3D engine library to process the rendering of a 3D scene at the front end includes: The Cesium tool is used to process the rendering of three-dimensional scenes on the front end.

[0021] In this embodiment, Cesium is an open source 3D earth and map engine, which is mainly used to display and operate large-scale 3D geospatial data in Web applications. It is particularly good at processing global geographic data and provides rich functions to realize the display and interaction of 3D views. Cesium uses WebGL technology for efficient 3D graphics rendering, can process large amounts of geospatial data, and is suitable for application scenarios that require high-performance rendering.

[0022] In some embodiments, after determining the target component for building the three-dimensional platform, the method further includes: performing file management on the target component, and parsing and managing events and objects.

[0023] In this embodiment, file management in the 3D platform mainly involves the organization, storage and processing of data files such as 3D models, textures, scene configuration files, etc. Effective file management can ensure efficient access and management of resources and avoid data loss or confusion.

[0024] In some embodiments, determining the target components for building the three-dimensional platform according to the preset functions and requirements of the three-dimensional platform includes: Analyze the requirements of the 3D platform and determine the basic operation objects, basic files and basic functions of the 3D platform; Determine the target components for building the three-dimensional platform based on the basic operation objects, basic files and basic functions.

[0025] In this embodiment, the demand analysis includes the following aspects: First, we need to determine the basic operation objects of the 3D engine, which are resources, objects, scenes and events. The definition of resources is the original data such as models, pictures, materials, etc. in the 3D scene. The definition of objects is 3D space objects and web UI, including models, images, pictures, and 3D space object modeling, including 3D instances and materials. The definition of 3D instances is all 3D modeling objects, including 3D objects generated by models or vectors. The definition of materials is the lighting information of 3D instances, including diffuse maps, normal maps, and all lighting information such as the results of geometric calculations of fragment shaders. The definition of web UI is all non-3D components of HTML5 native components and their extension libraries.

[0026] Furthermore, the definition of events is operations and notifications that occur in three-dimensional space. The definition of scenes is a set of different states of a group of interrelated objects.

[0027] Then the basic files of the 3D scene project are determined as follows: scene file and resource file. The definition of scene file is the target file of the 3D platform. The definition of resource file is the resource that the scene file depends on.

[0028] Therefore, the target components of the basic functions of the 3D platform are resource management, object management, event manager, scene management, real-time window, script manager, and the 3D platform has these basic windows to realize these functions.

[0029] It should be noted that the function of the resource manager is to manage resources, and its basic functions in the system are front-end upload, back-end storage, front-end request, and back-end sending. The function of the object manager is to manage scene objects, which should include the object manager and the object property manager, where the object manager is a collection of scene objects, and the object property manager can quickly change the properties of the object. The function of the event manager is to manage the global events of the scene, such as the creation and destruction of the scene, mouse clicks, keyboard input responses, etc. The function of the scene manager is to organize and record specific information of multiple scenes. The function of the real-time window is to display the current scene and edit the current scene. The function of the script manager is to manage and store js scripts.

[0030] Furthermore, the resource manager lists and displays names. The front end provides resource previews and add, delete, modify and check buttons, and implements the add, delete, modify and check functions by requesting the back end to traverse the resource folders.

[0031] Object manager, list, objects of the current scene, load the scene through the real-time window to obtain all objects in the current scene, objects in the list are associated with objects in the scene, click the object to display the object property window, and display the properties that can be modified for the current object, such as position, etc.

[0032] Event manager, list, displays the events of the current real-time window scene.

[0033] Scene manager, list, the front end provides scene creation, opening and add, delete, modify and check buttons, traverses the scene folder through the back end, and loads the scene file. The scene file is the target file of the 3D platform. The structure of the file varies depending on the selected architecture, but it is generally divided into five sections: scene creation section, variable section, 3D object section, event section, and scene destruction section.

[0034] Real-time window, the real-time window is the core of the 3D platform. It connects multiple components in series, displays and edits the current scene, and presets some event handlers and scene editing logic.

[0035] It should be noted that the implementation steps of the target component include the following: 1. Implement the 3D core function library, that is, the code segment for editing and inserting the 3D scene in the real-time window: 1.1 Create preset objects, points, lines, surfaces, spheres, etc.

[0036] 1.2 Get the object material and set the object material.

[0037] 1.3 Get the object position and posture, set the object position and posture.

[0038] 1.4 Event mounting, mouse operation events, use callback functions to mount mouse operation events, timer events, and circulator events.

[0039] 1.5 Get the camera position and set the camera position 1.6 Load various types of model resources.

[0040] 1.7 Create materials, set material shader, set material diffuse map, bump map, normal map, highlight coefficient, etc.

[0041] 1.8 Create webUI.

[0042] 2. Implement real-time window editing function library 2.1 Drag the object, rotate the object, and insert the code segment to change the position and posture of the object.

[0043] 2.2 Set the object material. The inserted code segment is to change and set the object material.

[0044] 2.3 Create an object and insert code to create the object.

[0045] 2.4 Mount the script, mount the script in the script manager to the object, update the scene object manager and event manager windows, and reload the scene.

[0046] 2.5 Move the camera position, get the camera position, set the camera position, and insert the code segment to change the camera position.

[0047] 3. Display scene function, open the scene in the scene manager, read the file through the back end and return it to the front end. After the front end parses the file by segment, it extracts the object and puts it in the object list, extracts the event and puts it in the event list, mounts a script, writes the code segment and executes the scene creation function.

[0048] 4. A scene object is displayed in the object manager, which is used to mount events for the scene itself, rather than for objects in the scene.

[0049] 5. A camera object is displayed in the object manager, which is used to operate the camera.

[0050] 6) Script manager, which provides browsing and CRUD functions to manage js scripts, and can be dragged and mounted to buttons or objects in the scene.

[0051] Completing the above functions will reduce 80% of inefficient work in web 3D development, and focus on meaningful work such as shader rendering and CSS rendering.

[0052] In a specific embodiment, the front-end and back-end environments are built by globally introducing Cesium into the vite project, using C#.net standard library IO stream to read and write files, establishing front-end routing and back-end routing, creating a Cesium container, and initializing the viewer.

[0053] The implementation of each target component is as follows: 1. The three managers, resource manager, scene manager, and script manager, are essentially static file managers. The backend provides add, delete, modify, and query functions by reading and writing specific folders. The assets, scenes, and scripts folders represent resources, scenes, and scripts, respectively. The scene manager provides a new scene function, that is, the backend copies a preset scene file template.

[0054] The object manager and event manager are for the currently loaded scene, parsing the scene file, creating an object image for each object in the scene file, recording the object ID, creating an event image for each event in the scene file, recording the event handle, and in addition, adding a scene object pointing to viewer.scene and putting it in the array, adding a camera object pointing to viewer.camera and putting it in the array. Put objects and events into two arrays respectively, create an attribute array, and mount all these attribute arrays and object event arrays to the scene management json class. The object manager list is associated with the object array of the scene management class through vue responsiveness, and the event manager list is associated with the event array of the event management class through vue responsiveness.

[0055] 3. Object property manager, click the list to get the element ID, get the position of the object in the array, and then get the object ID. Get the object in the Cesium viewer through the object ID, determine the object type and load different object managers. For example, if it is an entity, display the position attribute, posture hpr attribute, and determine one or more attributes of the geometric instance that are not null. If it is a model, display the position attribute, posture hpr attribute, size scale attribute, scaleByDistance and other attributes, and create a temporary object to bind these attributes for change, modify the scene management class json, close the window, and destroy the temporary object.

[0056] 4. Real-time window 1) Core function library, viewer.entities api creates common 3D objects, creates buttons and other components through document, viewer.camera api provides camera operations, viewer.entities.getById gets objects, etc.

[0057] 2) Editing operation, further encapsulates the core function library, creates a scene handle, and the event callback function modifies the JSON object, marking the newly added and modified objects and events in the JSON object.

[0058] 3) When opening the scene, import the template class and execute the createScene() function.

[0059] 4) When saving the scene, rebuild the scene file through the json object, establish the inverse operation of the json object, take out the object class and, the unchanged objects and events remain unchanged, and the changed objects and events are inserted into the code through the mark.

[0060] Based on the above-mentioned browser 3D platform construction method, the embodiment of the present invention also provides a browser 3D platform construction device, please refer to Figure 2 ,include: The front-end environment building module 210 is used to build the front-end application architecture of the 3D platform using the Vite and Vue frameworks, and to process the rendering of the 3D scene at the front end using the 3D engine library; The backend environment building module 220 is used to build the backend data storage and management architecture of the three-dimensional platform using the C# language and the WebAPI framework; The component building module 230 is used to determine the target components for building the three-dimensional platform according to the preset functions and requirements of the three-dimensional platform; The three-dimensional platform construction module 240 is used to construct a three-dimensional platform of the browser according to the constructed front-end application architecture, back-end data storage and management architecture and target components.

[0061] like Figure 3 As shown, based on the above-mentioned browser 3D platform construction method, the present invention also provides an electronic device, which can be a computing electronic device such as a mobile terminal, a desktop computer, a notebook, a palm computer, and a server. The electronic device includes a processor 310, a memory 320, and a display 330. Figure 3 Only some components of the electronic device are shown, but it should be understood that it is not required to implement all of the components shown, and more or fewer components may be implemented instead.

[0062] In some embodiments, the memory 320 may be an internal storage unit of the electronic device, such as a hard disk or memory of the electronic device. In other embodiments, the memory 320 may also be an external storage electronic device of the electronic device, such as a plug-in hard disk, a smart memory card (Smart Media Card, SMC), a secure digital (SecureDigital, SD) card, a flash card (Flash Card), etc. equipped on the electronic device. Further, the memory 320 may also include both an internal storage unit of the electronic device and an external storage electronic device. The memory 320 is used to store application software and various types of data installed in the electronic device, such as program codes for installing the electronic device. The memory 320 may also be used to temporarily store data that has been output or is to be output. In one embodiment, a browser's three-dimensional platform building program 340 is stored on the memory 320, and the browser's three-dimensional platform building program 340 can be executed by the processor 310, thereby realizing the browser's three-dimensional platform building method of each embodiment of the present application.

[0063] In some embodiments, the processor 310 may be a central processing unit (CPU), a microprocessor or other data processing chip, used to run program codes or process data stored in the memory 320, such as executing a three-dimensional platform building method of a browser.

[0064] In some embodiments, the display 330 may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, an OLED (Organic Light-Emitting Diode) touch device, etc. The display 330 is used to display information of the electronic device built on the three-dimensional platform of the browser and to display a visual user interface. The components 310-330 of the electronic device communicate with each other through a system bus.

[0065] Those skilled in the art will appreciate that all or part of the processes of the above-mentioned embodiments can be implemented by instructing related hardware through a computer program, and the program can be stored in a computer-readable storage medium, wherein the computer-readable storage medium is a disk, an optical disk, a read-only storage memory, or a random access memory, etc.

[0066] The above description is only a preferred specific implementation manner of the present invention, but the protection scope of the present invention is not limited thereto. Any changes or substitutions that can be easily conceived by any technician familiar with the technical field within the technical scope disclosed by the present invention should be covered within the protection scope of the present invention.

Claims

1. A method for building a three-dimensional platform of a browser, characterized in that: include: The front-end application architecture of the 3D platform is constructed using the Vite and Vue frameworks, and the 3D engine library is used to process the rendering of 3D scenes at the front end; Use the WebAPI framework to build the backend data storage and management architecture of the 3D platform; Determine the target components for building the 3D platform based on the preset functions and requirements of the 3D platform; A three-dimensional browser platform is constructed based on the front-end application architecture, back-end data storage and management architecture and target components.

2. The method for building a three-dimensional platform of a browser according to claim 1, characterized in that: The three-dimensional engine library is used to process the rendering of the three-dimensional scene at the front end, including: The Cesium tool is used to process the rendering of three-dimensional scenes on the front end.

3. The method for building a three-dimensional platform of a browser according to claim 1, characterized in that: After determining the target components for building the three-dimensional platform, it also includes: file management of the target components, and parsing and management of events and objects.

4. The method for building a three-dimensional platform of a browser according to claim 1, characterized in that: Determining target components for building the three-dimensional platform according to the preset functions and requirements of the three-dimensional platform includes: Analyze the requirements of the 3D platform and determine the basic operation objects, basic files and basic functions of the 3D platform; Determine the target components for building the three-dimensional platform based on the basic operation objects, basic files and basic functions.

5. The method for building a three-dimensional platform of a browser according to claim 4, characterized in that: The target components include a resource manager, an object manager, an event manager, a scene manager, a real-time window and a script manager.

6. The method for building a three-dimensional platform of a browser according to claim 5, characterized in that: After determining the target components for building a 3D platform, it also includes: Implement functional interaction between the front-end and back-end of the 3D platform according to the target components, including: The resource manager uses the back-end file operation interface to interact with the front-end through the API to achieve file interaction and resource management; Use the object manager to obtain objects in the front-end real-time loading scene, and use the object manager to provide attribute editing functions; Use the event manager to obtain event information in the front-end real-time loading scene and provide user-configured event responses; Use Cesium API to create and manipulate 3D objects, and display editing windows through the front end; Provides a script editor interface through the Script Manager.

7. The method for building a three-dimensional platform of a browser according to claim 1, characterized in that: It also includes setting up front-end routing to load and display different 3D scenes and editing functions.

8. A three-dimensional platform building device for a browser, characterized in that: include: The front-end environment building module is used to build the front-end application architecture of the 3D platform using the Vite and Vue frameworks, and use the 3D engine library to process the rendering of the 3D scene at the front end; The back-end environment building module is used to build the back-end data storage and management architecture of the 3D platform using the WebAPI framework; A component building module is used to determine target components for building a three-dimensional platform according to the preset functions and requirements of the three-dimensional platform; The three-dimensional platform construction module is used to construct the three-dimensional platform of the browser according to the constructed front-end application architecture, back-end data storage and management architecture and target components.

9. An electronic device, characterized in that: include: Processor and memory; The memory stores a computer-readable program executable by the processor; When the processor executes the computer-readable program, the steps in the method for building a three-dimensional platform for a browser as described in any one of claims 1-7 are implemented.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the steps in the method for building a three-dimensional platform for a browser as described in any one of claims 1-7.

Images