Method and device for loading relation atlas of 3D luminous ball, electronic equipment and medium
By using three.js to generate luminescent spheres in a 3D relationship map, combined with Raycaster rays and paging controls, the problem of lack of efficient filtering and highlighting in the existing technology is solved, and more intuitive and efficient data analysis is achieved.
Patent Information
- Application Number
- CN202411300096.3
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-09-18
- Publication Date
- 2024-12-31
AI Technical Summary
Existing 3D relationship map components lack the interactive ability of efficient filtering and highlighting in complex business scenarios, especially in financial risk analysis, it is difficult to quickly screen out related companies with specific risk levels.
By introducing three.js, create target material classes and target light source classes, generate 3D spheres, and convert business data into relationship maps, use Raycaster rays to highlight and rotate to the center position when the target node triggers an event, to achieve a luminous effect, combined with The pagination control displays data pagination.
It realizes efficient filtering and highlighting functions in 3D relationship maps, enhances the intuitiveness and clarity of data visualization, makes up for the shortcomings of existing components, and improves the operational efficiency of analysts.
Smart Images
Figure CN119229010A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of web page interaction, and in particular to a method, device, electronic device and medium for loading a 3D luminous ball relationship map. Background Art
[0002] With the continuous development of information technology and the increasing popularity of Internet applications, data visualization technology has gradually become an important means for people to process and analyze massive data. Among them, relationship graphs, as an effective way of data visualization, can intuitively display the relationship between data and complex network structures, and are widely used in social network analysis, knowledge graph construction and other fields.
[0003] Vis.js is a general visualization library that includes a 3D relationship graph component. Vis.js provides basic interactive operations, but may not be enough in complex business scenarios. Taking financial risk analysis as an example, analysts need to quickly filter out related companies with specific risk levels in a 3D relationship graph, but existing components lack advanced interactive capabilities such as efficient filtering and highlighting.
[0004] In summary, the prior art lacks a method that enables efficient filtering and highlighting in a 3D relationship graph when an event is triggered. Summary of the invention
[0005] In view of this, it is necessary to provide a method for loading a 3D luminous ball relationship map to achieve the purpose of efficient filtering and highlighting in the 3D relationship map when an event is triggered.
[0006] In order to achieve the above object, the present invention provides a method for loading a 3D luminous ball relationship map, comprising: Import three.js into the HTML code of the target web page and create a scene; Create target material class and target light source class based on three.js; Create a 3D sphere based on the target material class and the target light source class, and add the 3D sphere to the scene; Based on three.js, we get the relationship graph between different types of business data, which are obtained from the backend. Map the relationship graph into a 3D sphere to obtain a mapped 3D sphere; When the target node of the mapped 3D sphere triggers a listening event, the target node is highlighted and rotated to the center of the target web page based on the Raycaster ray to obtain a glowing 3D sphere; Load a glowing 3D sphere in the target web page.
[0007] In a possible implementation, it is characterized by further comprising: The paging control of three.js is introduced to display the relationship graph in pages.
[0008] In a possible implementation, the step of creating a target material class and a target light source class based on three.js includes: Create custom material classes based on three.js's ShaderMaterial and GLSL; Create a target light source class based on the light source class in three.js.
[0009] In a possible implementation, creating a 3D sphere based on a target material class and a target light source class includes: Set the 3D sphere's luminous material and luminous effect to create a 3D sphere.
[0010] In a possible implementation, the relationship graph between different types of business data obtained based on three.js includes: Convert business data into node array and edge array; The node array and the edge array are converted into a relationship graph according to the type of business data.
[0011] In a possible implementation, the monitoring event includes one or more of a mouse event and a keyboard event.
[0012] In a possible implementation, the method further includes: Based on the OrbitControls class or TrackballControls of Three.js, one or more of rotation, scaling and translation are performed on the first 3D sphere.
[0013] On the other hand, the present invention also provides a device for loading a 3D luminous ball relationship graph based on three.js, comprising: The scene creation module is used to introduce three.js into the HTML code of the target web page and create a scene; Custom class creation module, used to create target material class and target light source class based on three.js; A 3D sphere creation module is used to create a 3D sphere based on a target material class and a target light source class, and add the 3D sphere to the scene; Relationship graph creation module, used to obtain relationship graphs between different types of business data based on three.js. Business data is obtained from the backend; A first 3D sphere acquisition module is used to map the relationship map into the 3D sphere to obtain the mapped 3D sphere; The second 3D sphere acquisition module is used to highlight the target node and rotate it to the center of the target webpage based on the Raycaster ray when the target node of the mapped 3D sphere triggers a monitoring event, so as to obtain a luminous 3D sphere; Loading module, used to load a glowing 3D sphere in the target web page.
[0014] On the other hand, the present invention also provides an electronic device, including a memory and a processor, wherein: The memory is used to store programs; The processor is coupled to the memory and is used to execute the program stored in the memory to implement the steps in the method for loading a 3D luminous ball relationship map described in any one of the above implementations.
[0015] On the other hand, the present invention also provides a computer-readable storage medium for storing computer-readable programs or instructions, which, when executed by a processor, can implement the steps in a method for loading a 3D luminous ball relationship map described in any of the above-mentioned implementation methods.
[0016] The beneficial effects of the present invention are as follows: a method for loading a 3D luminous ball relationship map provided by the present invention, firstly, three.js is introduced into the HTML code of the target webpage and a scene is created, and a target material class and a target light source class are created, so that a public class can be created on the webpage according to specific needs so that other models can directly apply the public class, further, a 3D sphere is created based on the target material class and the target light source class, and the 3D sphere is added to the scene, and the data obtained from the back end is further converted into relationship map data and mapped into the 3D sphere to obtain the mapped 3D sphere, and the abstract data is converted into a visual image to make the relationship between the data more intuitive and clear, and when a listening event is triggered on the target node on the mapped 3D sphere, the target node is highlighted and rotated to the center position based on the Raycaster ray, and a luminous 3D sphere is obtained and loaded in the target webpage, so as to better pay attention to the data corresponding to the node and the data related to the point. The present invention converts the data into relationship map data and maps it to the 3D sphere, and highlights and rotates the target node to the center position by triggering a listening event on the 3D sphere, which makes up for the lack of efficient filtering and highlighting functions of the existing components. BRIEF DESCRIPTION OF THE DRAWINGS
[0017] Figure 1 A flowchart of an embodiment of a method for loading a 3D luminous ball relationship map provided by the present invention; Figure 2 For the present invention Figure 1 A schematic flow chart of an embodiment of S102; Figure 3 A schematic flow chart of an embodiment of a device for loading a 3D luminous ball relationship map provided by the present invention; Figure 4 A schematic structural diagram of an embodiment of an electronic device provided by the present invention. DETAILED DESCRIPTION
[0018] 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.
[0019] Before presenting the embodiments, the following terms are explained.
[0020] The Web Graphics Library (WebGL) is a JavaScript application programming interface (API) for implementing interactive web graphics.
[0021] three.js is a third-party WebGL library written in JavaScript. three.js is a 3D engine that runs in the browser. You can use three.js to create various three-dimensional scenes on the web page, including cameras, lights, shadows, materials and other objects.
[0022] The present invention provides a method, device, electronic device and medium for loading a 3D luminous ball relationship map, which are described below respectively.
[0023] Figure 1 A schematic flow chart of an embodiment of a method for loading a 3D luminous ball relationship map provided by the present invention is shown as follows: Figure 1 As shown, the method for loading the 3D luminous ball relationship map includes: S101. Introduce three.js into the HTML code of the target web page and create a scene; S102. Create target material class and target light source class based on three.js; S103, creating a 3D sphere based on the target material class and the target light source class, and adding the 3D sphere to the scene; S104, based on three.js, a relationship graph of different types of business data is obtained, and the business data is obtained from the backend; S105, the relationship graph is mapped into a 3D sphere to obtain a mapped 3D sphere; S106, when the target node of the mapped 3D sphere triggers a monitoring event, the target node is highlighted based on the Raycaster ray and rotated to the center of the target webpage to obtain a luminous 3D sphere; S107: Loading the luminous 3D sphere into the target web page.
[0024] Compared with the prior art, the present embodiment provides a method for loading a 3D luminous ball relationship map. First, three.js is introduced into the HTML code of the target webpage and a scene is created. A target material class and a target light source class are created so that a public class can be created on the webpage according to specific needs so that other models can directly apply the public class. Further, a 3D sphere is created based on the target material class and the target light source class, and the 3D sphere is added to the scene. The data obtained from the backend is further converted into relationship map data and mapped to the 3D sphere to obtain the mapped 3D sphere. The abstract data is converted into a visual image to make the relationship between the data more intuitive and clear. When a listening event is triggered on the target node on the mapped 3D sphere, the target node is highlighted and rotated to the center position based on the Raycaster ray, and a luminous 3D sphere is obtained and loaded in the target webpage, so as to better pay attention to the data corresponding to the node and the data related to the point. The present invention converts the data into relationship map data and maps it to the 3D sphere, and highlights and rotates the target node to the center position by triggering a listening event on the 3D sphere, which makes up for the lack of efficient filtering and highlighting functions of the existing components.
[0025] It should be noted that the present invention is applicable to scenarios where a model in WebGL is operated using three.js and displayed on a web page.
[0026] In some embodiments of the present invention, it is characterized in that it also includes: The paging control of three.js is introduced to display the relationship graph data in pages.
[0027] In a specific embodiment of the present invention, when the amount of relationship graph data is too large, the paging technology of three.js is introduced to divide the data into multiple pages for display. Design paging logic, such as paging according to the number of nodes or levels. Provide paging controls such as page number buttons and previous / next page buttons to facilitate users to switch between different pages. The paging controls are created using a separate group, and the specific code is as follows: const drawPage = (node: any) =>{ const group = new THREE.Group(); const { totalPage, page, x, y, z} = node; let text = makeTextSprite(`${page} / ${totalPage}`, "#00B998"); text.name = "pagetext"; group.add(text); if (totalPage&&totalPage>1) { group.add(drawAngle(node.id, "right")); } group.position.set(x, y + 45, z); group.name = "page"; return group; }; In some embodiments of the present invention, in step S102, creating a target material class and a target light source class based on three.js includes: S201. Create target material class based on ShaderMaterial and GLSL of three.js; S202. Create a target light source class based on the light source class in three.js.
[0028] In some embodiments of the present invention, the step of creating a 3D sphere based on a target material class and a target light source class includes: Set the 3D sphere's luminous material and luminous effect to create a 3D sphere.
[0029] In a specific embodiment of the present invention, the functions of Three.js are extended to customize materials, lighting, animation, etc., and written into configurable public classes. For example, a class named THREEx is created, options passes various configuration parameters, and the method GeometricGlowMesh is called to create a scene, camera, and renderer. The following is the specific process of customizing the material class and the custom light source class.
[0030] The custom material class, i.e. the target material class, uses GLSL (OpenGL Shading Language) to write vertex shaders and fragment shaders, encapsulates the shader code into the Three.js material class, and uses the emissive property in the fragment shader to achieve the luminous effect. The specific code is as follows: class GlowMaterial extends THREE.ShaderMaterial { constructor(glowColor) { super({ uniforms: glowColor: { value: new THREE.Color(glowColor)} }, vertexShader: vertexShader, fragmentShader: fragmentShader, / / Other material properties... }); } } Custom light source class, i.e. target light source class, adds ambient light and point light source: Use the light source class provided by Three.js, such as THREE.PointLight, THREE.AmbientLight, etc. Set the color, intensity, attenuation and other properties of the light source. And encapsulate it into a class for easy reuse. The specific code is as follows: class CustomLight { constructor(lightType, position, color, intensity) { let light; if (lightType === 'point') { light = new THREE.PointLight(color, intensity, 100); } else if (lightType === 'ambient') { light = new THREE.AmbientLight(color); } light.position.set(...position); return light; } } In a specific embodiment of the present invention, the process of creating and rendering a 3D luminous ball includes the following: creating a 3D sphere by referencing a custom material class and a custom light source class, and setting the luminous material so that the sphere has a luminous effect. The luminous effect is enhanced by configuring a lighting environment such as AmbientLight, PointLight, etc.
[0031] In some embodiments of the present invention, the relationship graph between different types of business data obtained based on three.js includes: Convert business data into node array and edge array; The node array and the edge array are converted into a relationship graph according to the type of business data.
[0032] In a specific embodiment of the present invention, the generation and display of the relationship map includes the following steps: Design the data structure of the relationship graph, including nodes and edges. Map the relationship graph data into 3D space to generate corresponding sphere nodes and connecting lines. Use the hierarchy (Group) of Three.js to organize and manage complex graph data, that is, convert the data into node arrays and edge arrays, and then traverse to draw spheres and edges. The specific code is as follows: nodelist.map((item: any, index: number) =>{ let { type} = item; if (type === "main") { group.add(mainBall(item)); } if (type === "Human" || type === "Company") { let ball = hollowBall(item, index, unit); / / console.log("ball:", ball); group.add(ball); / / The position of point light source 2 is symmetrical with point about the origin, making the back side brighter / / let point = new THREE.PointLight(0xffffff); / / point.position.set(item.x, item.y, item.z); / / scene.add(point); } }); links.map((item: any) => { group.add(addLine(item)); }); In some embodiments of the present invention, the monitoring event includes one or more of a mouse event and a keyboard event. Specifically, a mouse event is to operate an edge or a node on a 3D sphere by a mouse. A keyboard event is to operate an edge or a node on a 3D sphere by a keyboard.
[0033] In some embodiments of the present invention, it further includes: Based on the OrbitControls class or TrackballControls of Three.js, one or more of rotation, scaling and translation are performed on the first 3D sphere.
[0034] In order to better implement a method for loading a 3D luminous ball relationship map in an embodiment of the present invention, based on a method for loading a 3D luminous ball relationship map, correspondingly, Figure 3 As shown, an embodiment of the present invention further provides a device for loading a 3D luminous ball relationship map. A device 300 for loading a 3D luminous ball relationship map includes: A scene creation module 301 is used to introduce three.js into the HTML code of the target webpage and create a scene; A custom class creation module 302 is used to create a target material class and a target light source class based on three.js; A 3D sphere creation module 303 is used to create a 3D sphere based on a target material class and a target light source class, and add the 3D sphere to the scene; A relationship graph creation module 304 is used to obtain a relationship graph between different types of business data based on three.js, and the business data is obtained from the backend; A first 3D sphere acquisition module 305 is used to map the relationship map into the 3D sphere to obtain the mapped 3D sphere; The second 3D sphere acquisition module 306 is used to highlight the target node and rotate it to the center of the target webpage based on the Raycaster ray when the target node of the mapped 3D sphere triggers a monitoring event, so as to obtain a luminous 3D sphere; The loading module 307 is used to load the luminous 3D sphere into the target web page.
[0035] The device 400 for loading a 3D luminous ball relationship map provided in the above embodiment can implement the technical solution described in the above embodiment of the method for loading a 3D luminous ball relationship map. The specific implementation principles of the above modules or units can refer to the corresponding contents in the above embodiment of the method for loading a 3D luminous ball relationship map, which will not be repeated here.
[0036] like Figure 4As shown, the present invention also provides an electronic device 400. The electronic device 400 includes a processor 401, a memory 402 and a display 403. Figure 4 Only some components of the electronic device 400 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.
[0037] In some embodiments, the processor 401 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 402, such as a method for loading a 3D luminous ball relationship map in the present invention.
[0038] In some embodiments, processor 401 may be a single server or a server group. The server group may be centralized or distributed. In some embodiments, processor 401 may be local or remote. In some embodiments, processor 401 may be implemented in a cloud platform. In some embodiments, the cloud platform may include a private cloud, a public cloud, a hybrid cloud, a community cloud, a distributed cloud, an internal cloud, a multi-cloud, etc., or any combination thereof.
[0039] In some embodiments, the memory 402 may be an internal storage unit of the electronic device 400, such as a hard disk or memory of the electronic device 400. In other embodiments, the memory 402 may also be an external storage device of the electronic device 400, such as a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc., equipped on the electronic device 400.
[0040] Furthermore, the memory 402 may include both an internal storage unit of the electronic device 400 and an external storage device. The memory 402 is used to store application software installed in the electronic device 400 and various data.
[0041] In some embodiments, the display 403 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 403 is used to display information on the electronic device 400 and to display a visual user interface. The components 401-403 of the electronic device 400 communicate with each other via a system bus.
[0042] In one embodiment, when the processor 401 executes a program loaded with a 3D luminous ball relationship map in the memory 402, the following steps may be implemented: Import three.js into the HTML code of the target web page and create a scene; Create target material class and target light source class based on three.js; Create a 3D sphere based on the target material class and the target light source class, and add the 3D sphere to the scene; Based on three.js, we get the relationship graph between different types of business data, which are obtained from the backend. Map the relationship graph into a 3D sphere to obtain a mapped 3D sphere; When the target node of the mapped 3D sphere triggers a listening event, the target node is highlighted and rotated to the center of the target web page based on the Raycaster ray to obtain a glowing 3D sphere; Load a glowing 3D sphere in the target web page.
[0043] It should be understood that: when the processor 401 executes a program loaded by a 3D luminous ball relationship map in the memory 402, in addition to the above functions, other functions can also be realized. For details, please refer to the description of the corresponding method embodiment above.
[0044] Furthermore, the embodiment of the present invention does not specifically limit the type of the electronic device 400 mentioned, and the electronic device 400 may be a portable electronic device such as a mobile phone, a tablet computer, a personal digital assistant (PDA), a wearable device, a laptop computer, etc. Exemplary embodiments of portable electronic devices include but are not limited to portable electronic devices equipped with IOS, Android, Microsoft or other operating systems. The above-mentioned portable electronic devices may also be other portable electronic devices, such as a laptop computer with a touch-sensitive surface (e.g., a touch panel). It should also be understood that in some other embodiments of the present invention, the electronic device 400 may not be a portable electronic device, but a desktop computer with a touch-sensitive surface (e.g., a touch panel).
[0045] 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.
[0046] 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 loading a 3D luminous ball relationship map, characterized in that: include: Import three.js into the HTML code of the target web page and create a scene; Create target material class and target light source class based on three.js; Create a 3D sphere based on the target material class and the target light source class, and add the 3D sphere to the scene; Based on three.js, we get the relationship graph between different types of business data, which are obtained from the backend. Map the relationship graph into a 3D sphere to obtain a mapped 3D sphere; When the target node of the mapped 3D sphere triggers a listening event, the target node is highlighted and rotated to the center of the target web page based on the Raycaster ray to obtain a glowing 3D sphere; Load a glowing 3D sphere in the target web page.
2. The method for rendering a 3D luminous ball relationship graph according to claim 1, characterized in that: Also includes: The paging control of three.js is introduced to display the relationship graph in pages.
3. The method for rendering a 3D luminous ball relationship graph according to claim 1, characterized in that: The target material class and target light source class are created based on three.js, including: Create target material class based on three.js's ShaderMaterial and GLSL; Create a target light source class based on the light source class in three.js.
4. The method for rendering a 3D luminous ball relationship graph according to claim 1, characterized in that: The step of creating a 3D sphere based on a target material class and a target light source class includes: Set the 3D sphere's luminous material and luminous effect to create a 3D sphere.
5. The method for rendering a 3D luminous ball relationship graph according to claim 1, characterized in that: The relationship graph between different types of business data obtained based on three.js includes: Convert business data into node array and edge array; The node array and the edge array are converted into a relationship graph according to the type of business data.
6. The method for rendering a 3D luminous ball relationship graph according to claim 1, characterized in that: The monitoring event includes one or more of a mouse event and a keyboard event.
7. The method for rendering a 3D luminous ball relationship graph according to claim 1, characterized in that: Also includes: Based on the OrbitControls class or TrackballControls of Three.js, one or more of rotation, scaling and translation are performed on the first 3D sphere.
8. A device for loading a 3D luminous ball relationship map, characterized in that: include: The scene creation module is used to introduce three.js into the HTML code of the target web page and create a scene; Custom class creation module, used to create target material class and target light source class based on three.js; A 3D sphere creation module is used to create a 3D sphere based on a target material class and a target light source class, and add the 3D sphere to the scene; Relationship graph creation module, used to obtain relationship graphs between different types of business data based on three.js. Business data is obtained from the backend; A first 3D sphere acquisition module is used to map the relationship map into the 3D sphere to obtain the mapped 3D sphere; The second 3D sphere acquisition module is used to highlight the target node and rotate it to the center of the target webpage based on the Raycaster ray when the target node of the mapped 3D sphere triggers a monitoring event, so as to obtain a luminous 3D sphere; Loading module, used to load a glowing 3D sphere in the target web page.
9. An electronic device, characterized in that: comprising a memory and a processor, wherein: The memory is used to store programs; The processor is coupled to the memory and is used to execute the program stored in the memory to implement the steps in the method for loading a 3D luminous ball relationship map as described in any one of claims 1 to 7.
10. A computer-readable storage medium, characterized in that: Used to store computer-readable programs or instructions, which, when executed by a processor, can implement the steps in the method for loading a 3D luminous ball relationship map as described in any one of claims 1 to 7 above.