Browser-based data visualization method, device and readable storage medium

Abstract

The present invention discloses a data visualization method, device and readable storage medium based on a browser, wherein the visualization method comprises: creating a hypertext markup language document, and introducing a js file in the hypertext markup language document; introducing a browser 3D engine based on WebGL in the js file; creating an Atom class, and instantiating the drawing scene data, font data and animation effect data of the browser 3D engine in the constructor of the Atom class; setting an initial function, and initializing the browser 3D engine in the initial function to perform visual drawing. The present invention can achieve the effect of three-dimensional display in the browser, which is more vivid and vivid than two-dimensional display, and can reflect the actual situation more realistically and clearly.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a browser-based data visualization method, device and readable storage medium. Background Art

[0002] Data display is a very important part of visualization technology. Traditional display methods are mostly two-dimensional, specifically displaying data in a simple way in the form of charts. Although it can also meet the needs of data display, it is not more vivid and cannot truly and clearly reflect the actual situation in some application scenarios.

[0003] Obviously, in the browser, the traditional two-dimensional display function can no longer meet the needs of customers. Therefore, how to vividly display complex and various data in the browser is a technical problem that those skilled in the art need to solve. Summary of the invention

[0004] To this end, an object of the present invention is to propose a browser-based data visualization method to achieve a vivid and vivid display of complex and diverse data in the browser.

[0005] The present invention provides a browser-based data visualization method, comprising:

[0006] Creating a hypertext markup language document and introducing a js file into the hypertext markup language document;

[0007] Introduce a WebGL-based browser 3D engine into the js file;

[0008] Create an Atom class, and instantiate the drawing scene data, font data, and animation effect data of the browser 3D engine in the constructor of the Atom class;

[0009] An initial function is set, in which the browser 3D engine is initialized to perform visual drawing.

[0010] According to the browser-based data visualization method provided by the present invention, by introducing a js file (javascript file) into a hypertext markup language document (i.e., an html document), and introducing a browser 3D engine based on WebGL into the js file, WebGL allows JavaScript and OpenGL ES2.0 to be combined together, and by adding a JavaScript binding to OpenGL ES2.0, WebGL can provide hardware 3D accelerated rendering for HTML5Canvas, and can realize smooth display of 3D scenes and models in the browser. By calling the API in the browser 3D engine to generate a scene, a 3D model can be drawn, and finally a three-dimensional display effect is achieved in the browser, which is more vivid and vivid than a two-dimensional display, and can reflect the actual situation more realistically and clearly.

[0011] In addition, the above-mentioned browser-based data visualization method according to the present invention may also have the following additional technical features:

[0012] Furthermore, the step of introducing the js file into the hypertext markup language document specifically includes:

[0013] The js file is introduced into the hypertext markup language document in a manner where the script tag type is module.

[0014] Furthermore, the browser 3D engine adopts three.js;

[0015] The steps of introducing the WebGL-based browser 3D engine into the js file specifically include:

[0016] Use the import statement in the js file to introduce the three.js file.

[0017] Furthermore, the step of initializing the browser 3D engine in the initial function specifically includes:

[0018] In the initialization function, the renderer, camera, light, controller and animation of the browser 3D engine are initialized. The renderer is used to render objects in the scene, the camera is used to observe the scene, the light is used to illuminate the scene, and the controller controls the movement of the camera.

[0019] Furthermore, the steps of performing visualization drawing specifically include:

[0020] Draw an outermost mask layer, and add the mask layer to the scene data;

[0021] Draw a track, wherein the track is drawn by a linear material;

[0022] Draw the electrons in said orbitals.

[0023] Furthermore, the step of drawing the outermost mask layer specifically includes:

[0024] Draw a 3D transparent sphere, and add a honeycomb texture to the 3D transparent sphere to form a mask layer;

[0025] The shader of the browser 3D engine is used to add afterglow animation to the mask layer.

[0026] Furthermore, the steps of drawing the track specifically include:

[0027] Using the circle algorithm, several points are placed on a virtual circle of a preset diameter;

[0028] The points are connected using linear geometry to form a circle with a trajectory.

[0029] Another object of the present invention is to provide a browser-based data visualization device to achieve a vivid display of complex and diverse data in the browser.

[0030] The present invention provides a data visualization device based on a browser, comprising:

[0031] A first creation module is used to create a hypertext markup language document and introduce a js file into the hypertext markup language document;

[0032] An import module is used to import a WebGL-based browser 3D engine into the js file;

[0033] A second creation module is used to create an Atom class, and instantiate drawing scene data, font data, and animation effect data of the browser 3D engine in a constructor of the Atom class;

[0034] The setting module is used to set an initial function, in which the browser 3D engine is initialized to perform visual drawing.

[0035] According to the browser-based data visualization device provided by the present invention, by introducing a js file (javascript file) into a hypertext markup language document (i.e., an html document), and introducing a browser 3D engine based on WebGL into the js file, WebGL allows JavaScript and OpenGL ES2.0 to be combined together, and by adding a JavaScript binding to OpenGL ES2.0, WebGL can provide hardware 3D accelerated rendering for HTML5Canvas, and can realize smooth display of 3D scenes and models in the browser. By calling the API in the browser 3D engine to generate a scene, a 3D model can be drawn, and finally a three-dimensional display effect is achieved in the browser, which is more vivid and vivid than a two-dimensional display, and can reflect the actual situation more realistically and clearly.

[0036] In addition, the above-mentioned browser-based data visualization device according to the present invention may also have the following additional technical features:

[0037] Furthermore, the first creation module is specifically used for:

[0038] The js file is introduced into the hypertext markup language document in a manner where the script tag type is module.

[0039] Furthermore, the browser 3D engine adopts three.js;

[0040] The introduction module is specifically used for:

[0041] Use the import statement in the js file to introduce the three.js file.

[0042] Furthermore, the setting module is specifically used for:

[0043] In the initialization function, the renderer, camera, light, controller and animation of the browser 3D engine are initialized. The renderer is used to render objects in the scene, the camera is used to observe the scene, the light is used to illuminate the scene, and the controller controls the movement of the camera.

[0044] Furthermore, the setting module is also used for:

[0045] Draw an outermost mask layer, and add the mask layer to the scene data;

[0046] Draw a track, wherein the track is drawn by a linear material;

[0047] Draw the electrons in said orbitals.

[0048] Furthermore, the setting module is also used for:

[0049] Draw a 3D transparent sphere, and add a honeycomb texture to the 3D transparent sphere to form a mask layer;

[0050] The shader of the browser 3D engine is used to add afterglow animation to the mask layer.

[0051] Furthermore, the setting module is also used for:

[0052] Using the circle algorithm, several points are placed on a virtual circle of a preset diameter;

[0053] The points are connected using linear geometry to form a circle with a trajectory.

[0054] The present invention also provides a readable storage medium on which a computer program is stored, and when the program is executed by a processor, the steps of the above-mentioned visualization method are implemented.

[0055] The present invention also proposes a computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the above-mentioned visualization method when executing the program.

[0056] Additional aspects and advantages of the present invention will be given in part in the following description and in part will be obvious from the following description or will be learned through embodiments of the present invention. BRIEF DESCRIPTION OF THE DRAWINGS

[0057] The above and / or additional aspects and advantages of the embodiments of the present invention will become apparent and easily understood from the description of the embodiments in conjunction with the following drawings, in which:

[0058] Figure 1 is a flow chart of a visualization method according to an embodiment of the present invention;

[0059] Figure 2 is a detailed flow chart of visual drawing according to an exemplary visualization method of the present invention;

[0060] Figure 3 is a flow chart of a visualization device according to an embodiment of the present invention;

[0061] Figure 4 is an internal structure diagram of a computer device according to an embodiment of the present invention. DETAILED DESCRIPTION

[0062] In order to make the purpose, technical solutions and advantages of the present application clearer, the present application is described and illustrated below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not intended to limit the present application. Based on the embodiments provided in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present application. In addition, it can also be understood that although the efforts made in this development process may be complex and lengthy, for ordinary technicians in the field related to the contents disclosed in the present application, some changes such as design, manufacturing or production based on the technical contents disclosed in the present application are only conventional technical means, and should not be understood as insufficient contents disclosed in the present application.

[0063] Reference to "embodiments" in this application means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present application. The appearance of the phrase in various locations in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those of ordinary skill in the art that the embodiments described in this application may be combined with other embodiments without conflict.

[0064] Unless otherwise defined, the technical terms or scientific terms involved in this application should be understood by people with ordinary skills in the technical field to which this application belongs. The words "one", "a", "a", "the" and the like involved in this application do not indicate a quantitative limitation, and may represent the singular or plural. The terms "include", "comprise", "have" and any of their variations involved in this application are intended to cover non-exclusive inclusions; for example, a process, method, system, product or device that includes a series of steps or modules (units) is not limited to the listed steps or units, but may also include steps or units that are not listed, or may also include other steps or units inherent to these processes, methods, products or devices. The words "connect", "connected", "coupled" and the like involved in this application are not limited to physical or mechanical connections, but may include electrical connections, whether direct or indirect. The "multiple" involved in this application refers to greater than or equal to two. "And / or" describes the association relationship of associated objects, indicating that there can be three relationships, for example, "A and / or B" can represent: A exists alone, A and B exist at the same time, and B exists alone. The terms "first", "second", "third" and the like involved in the present application are merely used to distinguish similar objects and do not represent a specific ordering of the objects.

[0065] See also Figure 1, a browser-based data visualization method proposed in an embodiment of the present invention at least includes steps S101 to S104.

[0066] In S101, a hypertext markup language document is created, and a js file is introduced into the hypertext markup language document.

[0067] Specifically, the browser-based data visualization method provided in this embodiment is applied in the Chrome browser. First, an HTML (Hypertext Markup Language) document is created, specifically, an HTML file that can be run in a browser environment. The modularization of the entire model is implemented using the ES6import / export method, and then the JS file is introduced into the Hypertext Markup Language document using the script tag type as module. Among them, the JS file refers to a text document containing JavaScript script code and with an extension of ".js", which is used to execute JavaScript instructions in a web page. All entry JS files are introduced by using a script tag with type as module. Enable the browser to read the code of the entire model.

[0068] In S102, a browser 3D engine based on WebGL is introduced into the js file. WebGL (Web Graphics Library) is a 3D drawing protocol. This drawing technology standard allows JavaScript and OpenGL ES2.0 to be combined together. By adding a JavaScript binding to OpenGL ES2.0, WebGL can provide hardware 3D accelerated rendering for HTML5 Canvas, so that Web developers can use the system graphics card to display 3D scenes and models more smoothly in the browser, and can also create complex navigation and data visualization. The WebGL technology standard eliminates the trouble of developing special rendering plug-ins for web pages, and can be used to create website pages with complex 3D structures, and can be used to design 3D web games.

[0069] Specifically, the WebGL-based browser 3D engine introduced in this embodiment uses three.js, which is a WebGL third-party library written in JavaScript. It encapsulates many WebGL methods and can create 3D scenes, cameras, lights, shadows, materials and other 3D objects according to the API it provides. Using three.js as the browser 3D engine allows users to create 3D models in the browser conveniently and quickly without using plug-ins such as Flash.

[0070] In addition, this embodiment uses a WebGL-based library, namely three.js, which encapsulates some important tool methods and rendering loops for 3D rendering requirements. Since the WebGL threshold is relatively high, three.js encapsulates the interface provided by WebGL very well and uses canvas scripts to simplify many details, which helps to reduce the learning cost.

[0071] It should be pointed out that when introducing the three.js file in the js file, you need to use the import statement to introduce the three.js file.

[0072] In S103, an Atom class is created, and the drawing scene data, font data, and animation effect data of the browser 3D engine are instantiated in the constructor of the Atom class.

[0073] The Atom class is the container of the entire model. In the constructor of the created Atom class, the new keyword is used to instantiate THREE's Scene, FontLoader, and Fog. Scene is the drawn scene data, and all page elements are placed in this scene. FontLoader is the font data, which is used to load local font files to facilitate the use of fonts. Fog is one of the animation effect data. Fog is used to add a fog effect to the scene and add a blurred effect to distant objects.

[0074] In S104, an initial function is set, in which the browser 3D engine is initialized to perform visual drawing.

[0075] Specifically, the renderer, camera, light, controller and animation of the browser 3D engine three.js are initialized in the initial function. The initial function is used to run the entire model code. The renderer is used to render objects in the scene, the camera is used to observe the scene, the light is used to illuminate the scene, the controller controls the movement of the camera to facilitate observing the scene from different angles, and the animation is used to animate the entire scene.

[0076] The following takes the drawing of a 3D atomic model as an example to explain the above-mentioned visualization drawing in detail.

[0077] See also Figure 2 The steps of visual drawing specifically include steps S201 to S203:

[0078] In S201, the outermost mask layer is drawn, and the mask layer is added to the scene data.

[0079] Specifically, a 3D transparent sphere is drawn first, and a honeycomb texture is added to the 3D transparent sphere to form a mask layer; then the shader of the browser 3D engine three.js is used to add an afterglow animation to the mask layer to make the mask layer more three-dimensional, and finally the mask layer is added to the scene (scene data).

[0080] In S202, the track is drawn, and the track is drawn with a linear material. Because the electrons need to move along the track, and at most two electrons need to be placed on the track, and the positions of the two electrons on the same track need to be relative, the track must be drawn first. The track is drawn with a linear material.

[0081] The steps to draw a track include:

[0082] Using the circle algorithm, a number of points are placed on a virtual circle of a preset diameter, for example, 1000 points are placed on a circle with a diameter of 400.

[0083] Use linear geometric bodies to connect the points to form a circle with a trajectory. Specifically, it is necessary to draw multiple circles according to the number of data, for example, draw a circle for two data as a group. Then rotate these circles at a certain angle, so that these trajectory circles are dispersed.

[0084] In S203, electrons are drawn in the orbit. The electrons are drawn using a geometric model of a ball, with a transparent image attached as a texture. Optionally, the corresponding data can be displayed in the form of text on the electron, so the text can be created using the geometric model of the text. Then use three.js to create a group, and put the electron and the ball into this group. Finally, the electron needs to move, so all the points originally used to draw the electron orbit need to be obtained, so that the electron moves along these points in sequence.

[0085] Furthermore, regarding the realization of protons in the nucleus of the 3D atomic model, in specific implementation, the realization of protons is similar to that of electrons, except that a different image is used as a texture. When drawing, it is necessary to pay attention to the movement and location of the protons (a small up and down vibration in the center of the 3D atomic model), and the protons cannot overlap. Specifically, since the protons are spherical, by setting the radius of the protons, when placing the protons according to the size of the radius, it is ensured that the distance between any two protons is not less than the sum of the radii of the two protons, so that the two protons do not overlap.

[0086] As a result, the drawing and display of 3D atomic models are realized in the browser. The 3D atomic model can add multiple moving protons and electrons, and the corresponding data information can be displayed on the protons and electrons, thereby vividly displaying complex and numerous data and being able to reflect the actual situation more realistically and clearly.

[0087] In addition, it should be noted that the above visualization method needs to be applied in Chrome 9 and above, otherwise the WebGL context cannot be obtained and thus drawing cannot be performed.

[0088] In summary, according to the browser-based data visualization method provided by this embodiment, by introducing a js file (javascript file) into a hypertext markup language document (i.e., an html document), and introducing a WebGL-based browser 3D engine into the js file, WebGL allows JavaScript and OpenGL ES2.0 to be combined together. By adding a JavaScript binding to OpenGL ES2.0, WebGL can provide hardware 3D accelerated rendering for HTML5 Canvas, and can realize smooth display of 3D scenes and models in the browser. By calling the API in the browser 3D engine to generate a scene, a 3D model can be drawn, and finally a three-dimensional display effect is achieved in the browser, which is more vivid and vivid than a two-dimensional display, and can reflect the actual situation more realistically and clearly.

[0089] See also Figure 3 , a browser-based data visualization device proposed in an embodiment of the present invention, the device comprises:

[0090] The first creation module 11 is used to create a hypertext markup language document and introduce a js file into the hypertext markup language document;

[0091] An introduction module 12 is used to introduce a browser 3D engine based on WebGL into the js file;

[0092] The second creation module 13 is used to create an Atom class, and instantiate the drawing scene data, font data and animation effect data of the browser 3D engine in the constructor of the Atom class;

[0093] The setting module 14 is used to set an initial function in which the browser 3D engine is initialized to perform visual drawing.

[0094] In this embodiment, the first creation module 11 is specifically used for:

[0095] The js file is introduced into the hypertext markup language document in a manner where the script tag type is module.

[0096] In this embodiment, the browser 3D engine uses three.js;

[0097] The introduction module 12 is specifically used for:

[0098] Use the import statement in the js file to introduce the three.js file.

[0099] In this embodiment, the setting module 14 is specifically used for:

[0100] In the initialization function, the renderer, camera, light, controller and animation of the browser 3D engine are initialized. The renderer is used to render objects in the scene, the camera is used to observe the scene, the light is used to illuminate the scene, and the controller controls the movement of the camera.

[0101] In this embodiment, the setting module 14 is also used for:

[0102] Draw an outermost mask layer, and add the mask layer to the scene data;

[0103] Draw a track, wherein the track is drawn by a linear material;

[0104] Draw the electrons in said orbitals.

[0105] In this embodiment, the setting module 14 is also used for:

[0106] Draw a 3D transparent sphere, and add a honeycomb texture to the 3D transparent sphere to form a mask layer;

[0107] The shader of the browser 3D engine is used to add afterglow animation to the mask layer.

[0108] In this embodiment, the setting module 14 is also used for:

[0109] Using the circle algorithm, several points are placed on a virtual circle of a preset diameter;

[0110] The points are connected using linear geometry to form a circle with a trajectory.

[0111] According to the browser-based data visualization device provided by this embodiment, by introducing js files (javascript files) into hypertext markup language documents (i.e., html documents), and introducing a browser 3D engine based on WebGL into the js files, WebGL allows JavaScript and OpenGL ES2.0 to be combined together. By adding a JavaScript binding to OpenGL ES2.0, WebGL can provide hardware 3D accelerated rendering for HTML5Canvas, and can realize smooth display of 3D scenes and models in the browser. By calling the API in the browser 3D engine to generate scenes, 3D models can be drawn, and finally a three-dimensional display effect is achieved in the browser, which is more vivid and vivid than a two-dimensional display, and can reflect the actual situation more realistically and clearly.

[0112] For the specific definition of the visualization device, please refer to the definition of the visualization method above, which will not be repeated here. Each module in the above-mentioned visualization device can be implemented in whole or in part by software, hardware and a combination thereof. The above-mentioned modules can be embedded in or independent of the processor in the computer device in the form of hardware, or can be stored in the memory of the computer device in the form of software, so that the processor can call and execute the operations corresponding to the above modules.

[0113] In one embodiment, a computer device is provided. The computer device may be a terminal, and its internal structure diagram may be as follows: Figure 4 As shown. The computer device includes a processor, a memory, a communication interface, a display screen and an input device connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The communication interface of the computer device is used to communicate with an external terminal in a wired or wireless manner, and the wireless manner can be achieved through WIFI, an operator network, NFC (near field communication) or other technologies. When the computer program is executed by the processor, a video frame prediction method is implemented. The display screen of the computer device can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device can be a touch layer covered on the display screen, or a button, trackball or touchpad set on the computer device housing, or an external keyboard, touchpad or mouse, etc.

[0114] Those skilled in the art will understand that Figure 4 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0115] In one embodiment, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the above-mentioned visualization method when executing the program.

[0116] The implementation principle and technical effect of the computer device provided in the above embodiment are similar to those of the above method embodiment, and will not be repeated here.

[0117] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored, and when the program is executed by a processor, the steps of the above-mentioned visualization method are implemented.

[0118] The computer-readable storage medium provided in the above embodiment has similar implementation principles and technical effects as those of the above method embodiment, and will not be described in detail here.

[0119] Those of ordinary skill in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided in this application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory or optical memory, etc. Volatile memory can include random access memory (RAM) or external cache memory. As an illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM).

[0120] The technical features of the above embodiments may be arbitrarily combined. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0121] The above-mentioned embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the invention patent. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the patent of the present application shall be subject to the attached claims.

Claims

1. A browser-based data visualization method, characterized in that: include: Creating a hypertext markup language document and introducing a js file into the hypertext markup language document; Introduce a WebGL-based browser 3D engine into the js file; Create an Atom class, and instantiate the drawing scene data, font data, and animation effect data of the browser 3D engine in the constructor of the Atom class; An initial function is set, in which a renderer, camera, light, controller and animation of the browser 3D engine are initialized to perform visual drawing and obtain a visual result; wherein the Atom class is a container of a visual model; initializing the browser 3D engine in the initial function includes: initializing a renderer, camera, light, controller and animation of the browser 3D engine in the initial function, wherein the renderer is used to render objects in a scene, the camera is used to observe a scene, the light is used to illuminate a scene, and the controller controls the movement of the camera; The visualization drawing includes: drawing the outermost mask layer and adding the mask layer to the scene data; drawing an orbit, wherein the orbit is drawn with a linear material; and drawing electrons in the orbit.

2. The visualization method according to claim 1, characterized in that: The step of introducing the js file into the hypertext markup language document specifically includes: The js file is introduced into the hypertext markup language document in a manner where the script tag type is module.

3. The visualization method according to claim 1, characterized in that: The browser 3D engine adopts three.js; The steps of introducing the WebGL-based browser 3D engine into the js file specifically include: Use the import statement in the js file to introduce the three.js file.

4. The visualization method according to claim 1, characterized in that: The steps for drawing the outermost mask layer include: Draw a 3D transparent sphere, and add a honeycomb texture to the 3D transparent sphere to form a mask layer; The shader of the browser 3D engine is used to add afterglow animation to the mask layer.

5. The visualization method according to claim 1, characterized in that: The steps to draw a track include: Using the circle algorithm, several points are placed on a virtual circle of a preset diameter; The points are connected using linear geometry to form a circle with a trajectory.

6. A browser-based data visualization device, characterized in that: include: A first creation module is used to create a hypertext markup language document and introduce a js file into the hypertext markup language document; An import module is used to import a WebGL-based browser 3D engine into the js file; A second creation module is used to create an Atom class, and instantiate drawing scene data, font data, and animation effect data of the browser 3D engine in a constructor of the Atom class; A setting module is used to set an initial function, in which a renderer, camera, light, controller and animation of the browser 3D engine are initialized to perform visual drawing and obtain a visual result; wherein the Atom class is a container of a visual model; initializing the browser 3D engine in the initial function includes: initializing the renderer, camera, light, controller and animation of the browser 3D engine in the initial function, wherein the renderer is used to render objects in the scene, the camera is used to observe the scene, the light is used to illuminate the scene, and the controller controls the movement of the camera; The visualization drawing includes: drawing the outermost mask layer and adding the mask layer to the scene data; drawing an orbit, wherein the orbit is drawn with a linear material; and drawing electrons in the orbit.

7. A readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 5 is implemented.

8. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, the method according to any one of claims 1 to 5 is implemented.

Images