本發(fā)明涉及網(wǎng)頁(yè)交互，尤其涉及一種3d發(fā)光球關(guān)系圖譜加載的方法、裝置、電子設(shè)備及介質(zhì)。

背景技術(shù)：

1、隨著信息技術(shù)的不斷發(fā)展和互聯(lián)網(wǎng)應(yīng)用的日益普及，數(shù)據(jù)可視化技術(shù)逐漸成為人們處理和分析海量數(shù)據(jù)的重要手段。其中，關(guān)系圖譜作為一種有效的數(shù)據(jù)可視化方式，能夠直觀地展示數(shù)據(jù)之間的關(guān)聯(lián)和復(fù)雜網(wǎng)絡(luò)結(jié)構(gòu)，被廣泛應(yīng)用于社交網(wǎng)絡(luò)分析、知識(shí)圖譜構(gòu)建等領(lǐng)域。

2、vis.js是一個(gè)通用的可視化庫(kù)，包含3d關(guān)系圖譜組件。vis.js提供了基本的交互操作，但在復(fù)雜的業(yè)務(wù)場(chǎng)景中可能不夠。以金融風(fēng)險(xiǎn)分析為例，分析師需要快速在3d關(guān)系圖譜中篩選出特定風(fēng)險(xiǎn)等級(jí)的關(guān)聯(lián)企業(yè)，但現(xiàn)有組件缺乏高效過(guò)濾和高亮顯示這類高級(jí)交互能力。

3、綜上，現(xiàn)有技術(shù)中缺乏一種方法使得在觸發(fā)事件時(shí)在3d關(guān)系圖譜中能高效過(guò)濾和高亮顯示。

技術(shù)實(shí)現(xiàn)思路

1、有鑒于此，有必要提供一種3d發(fā)光球關(guān)系圖譜加載的方法，用以實(shí)現(xiàn)在觸發(fā)事件時(shí)在3d關(guān)系圖譜中能高效過(guò)濾和高亮顯示的目的。

2、為了實(shí)現(xiàn)上述目的，本發(fā)明提供一種3d發(fā)光球關(guān)系圖譜加載的方法，包括：

3、在目標(biāo)網(wǎng)頁(yè)的html代碼中引入three.js并創(chuàng)建場(chǎng)景；

4、基于three.js創(chuàng)建目標(biāo)材質(zhì)類和目標(biāo)光源類；

5、基于目標(biāo)材質(zhì)類和目標(biāo)光源類創(chuàng)建3d球體，并將3d球體添加到場(chǎng)景中；

6、基于three.js得到不同類型的業(yè)務(wù)數(shù)據(jù)之間的關(guān)系圖譜，業(yè)務(wù)數(shù)據(jù)從后端獲??；

7、將關(guān)系圖譜映射到3d球體中，得到映射后的3d球體；

8、當(dāng)映射后的3d球體的目標(biāo)節(jié)點(diǎn)觸發(fā)監(jiān)聽事件時(shí)，基于raycaster射線將目標(biāo)節(jié)點(diǎn)高亮并旋轉(zhuǎn)到目標(biāo)網(wǎng)頁(yè)的中心位置，得到發(fā)光的3d球體；

9、在目標(biāo)網(wǎng)頁(yè)中加載發(fā)光的3d球體。

10、在一種可能的實(shí)現(xiàn)方式中，其特征在于，還包括：

11、引入three.js的分頁(yè)控件對(duì)所述關(guān)系圖譜進(jìn)行分頁(yè)顯示。

12、在一種可能的實(shí)現(xiàn)方式中，所述基于three.js創(chuàng)建目標(biāo)材質(zhì)類和目標(biāo)光源類，包括：

13、基于three.js的shadermaterial和glsl創(chuàng)建自定義材質(zhì)類；

14、基于three.js中的光源類創(chuàng)建目標(biāo)光源類。

15、在一種可能的實(shí)現(xiàn)方式中，所述基于目標(biāo)材質(zhì)類和目標(biāo)光源類創(chuàng)建3d球體，包括：

16、設(shè)置所述3d球體的發(fā)光材質(zhì)和發(fā)光效果創(chuàng)建3d球體。

17、在一種可能的實(shí)現(xiàn)方式中，所述基于three.js得到不同類型的業(yè)務(wù)數(shù)據(jù)之間的關(guān)系圖譜，包括：

18、將業(yè)務(wù)數(shù)據(jù)轉(zhuǎn)換為節(jié)點(diǎn)數(shù)組和邊數(shù)組；

19、根據(jù)業(yè)務(wù)數(shù)據(jù)的類型將所述節(jié)點(diǎn)數(shù)組和所述邊數(shù)組轉(zhuǎn)化為關(guān)系圖譜。

20、在一種可能的實(shí)現(xiàn)方式中，所述監(jiān)聽事件包括鼠標(biāo)事件以及鍵盤事件中的一種或多種。

21、在一種可能的實(shí)現(xiàn)方式中，還包括：

22、基于three.js的orbitcontrols類或trackballcontrols對(duì)所述第一3d球體進(jìn)行旋轉(zhuǎn)、縮放以及平移中的一種或多種。

23、另一方面，本發(fā)明還提供了一種基于three.js的3d發(fā)光球關(guān)系圖譜加載的裝置，包括：

24、場(chǎng)景創(chuàng)建模塊，用于在目標(biāo)網(wǎng)頁(yè)的html代碼中引入three.js并創(chuàng)建場(chǎng)景；

25、自定義類創(chuàng)建模塊，用于基于three.js創(chuàng)建目標(biāo)材質(zhì)類和目標(biāo)光源類；

26、3d球體創(chuàng)建模塊，用于基于目標(biāo)材質(zhì)類和目標(biāo)光源類創(chuàng)建3d球體，并將3d球體添加到場(chǎng)景中；

27、關(guān)系圖譜創(chuàng)建模塊，用于基于three.js得到不同類型的業(yè)務(wù)數(shù)據(jù)之間的關(guān)系圖譜，業(yè)務(wù)數(shù)據(jù)從后端獲??；

28、第一3d球體獲取模塊，用于將關(guān)系圖譜映射到3d球體中，得到映射后的3d球體；

29、第二3d球體獲取模塊，用于當(dāng)映射后的3d球體的目標(biāo)節(jié)點(diǎn)觸發(fā)監(jiān)聽事件時(shí)，基于raycaster射線將目標(biāo)節(jié)點(diǎn)高亮并旋轉(zhuǎn)到目標(biāo)網(wǎng)頁(yè)的中心位置，得到發(fā)光的3d球體；

30、加載模塊，用于在目標(biāo)網(wǎng)頁(yè)中加載發(fā)光的3d球體。

31、另一方面，本發(fā)明還提供了一種電子設(shè)備，包括存儲(chǔ)器和處理器，其中，

32、所述存儲(chǔ)器，用于存儲(chǔ)程序；

33、所述處理器，與所述存儲(chǔ)器耦合，用于執(zhí)行所述存儲(chǔ)器中存儲(chǔ)的所述程序，以實(shí)現(xiàn)上述任意一種實(shí)現(xiàn)方式中所述的一種3d發(fā)光球關(guān)系圖譜加載的方法中的步驟。

34、另一方面，本發(fā)明還提供了一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，用于存儲(chǔ)計(jì)算機(jī)可讀取的程序或指令，所述程序或指令被處理器執(zhí)行時(shí)能夠?qū)崿F(xiàn)上述任意一種實(shí)現(xiàn)方式中所述的一種3d發(fā)光球關(guān)系圖譜加載的方法中的步驟。

35、本發(fā)明的有益效果是：本發(fā)明提供的一種3d發(fā)光球關(guān)系圖譜加載的方法，首先在目標(biāo)網(wǎng)頁(yè)的html代碼中引入three.js并創(chuàng)建場(chǎng)景，并創(chuàng)建目標(biāo)材質(zhì)類和目標(biāo)光源類，使得在網(wǎng)頁(yè)端可根據(jù)具體的需求創(chuàng)建公共類以便其他模型可直接應(yīng)用公共類，進(jìn)一步，基于目標(biāo)材質(zhì)類和目標(biāo)光源類創(chuàng)建3d球體，并將3d球體添加到場(chǎng)景中，進(jìn)一步將從后端獲取的數(shù)據(jù)轉(zhuǎn)化為關(guān)系圖譜數(shù)據(jù)并映射到3d球體中，得到映射后的3d球體，將抽象的數(shù)據(jù)轉(zhuǎn)化為可視化的圖像，以使得數(shù)據(jù)之間的關(guān)系更加直觀和明確，當(dāng)映射后的3d球體上的目標(biāo)節(jié)點(diǎn)上觸發(fā)監(jiān)聽事件時(shí)，基于raycaster射線將目標(biāo)節(jié)點(diǎn)高亮并旋轉(zhuǎn)到中心位置，得到發(fā)光的3d球體并在目標(biāo)網(wǎng)頁(yè)中加載，從而更好的關(guān)注該節(jié)點(diǎn)對(duì)應(yīng)的數(shù)據(jù)以及與該點(diǎn)相關(guān)的數(shù)據(jù)。本發(fā)明通過(guò)將數(shù)據(jù)轉(zhuǎn)化為關(guān)系圖譜數(shù)據(jù)并映射到3d球體，通過(guò)在3d球體上觸發(fā)監(jiān)聽事件將目標(biāo)節(jié)點(diǎn)高亮并旋轉(zhuǎn)到中心位置，彌補(bǔ)了現(xiàn)有組件缺乏高效過(guò)濾和高亮顯示的功能。

技術(shù)特征：

1.一種3d發(fā)光球關(guān)系圖譜加載的方法，其特征在于，包括：

2.根據(jù)權(quán)利要求1所述的3d發(fā)光球關(guān)系圖譜渲染的方法，其特征在于，還包括：

3.根據(jù)權(quán)利要求1所述的3d發(fā)光球關(guān)系圖譜渲染的方法，其特征在于，所述基于three.js創(chuàng)建目標(biāo)材質(zhì)類和目標(biāo)光源類，包括：

4.根據(jù)權(quán)利要求1所述的3d發(fā)光球關(guān)系圖譜渲染的方法，其特征在于，所述基于目標(biāo)材質(zhì)類和目標(biāo)光源類創(chuàng)建3d球體，包括：

5.根據(jù)權(quán)利要求1所述的3d發(fā)光球關(guān)系圖譜渲染的方法，其特征在于，所述基于three.js得到不同類型的業(yè)務(wù)數(shù)據(jù)之間的關(guān)系圖譜，包括：

6.根據(jù)權(quán)利要求1所述的3d發(fā)光球關(guān)系圖譜渲染的方法，其特征在于，所述監(jiān)聽事件包括鼠標(biāo)事件以及鍵盤事件中的一種或多種。

7.根據(jù)權(quán)利要求1所述的3d發(fā)光球關(guān)系圖譜渲染的方法，其特征在于，還包括：

8.一種3d發(fā)光球關(guān)系圖譜加載的裝置，其特征在于，包括：

9.一種電子設(shè)備，其特征在于，包括存儲(chǔ)器和處理器，其中，

10.一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，其特征在于，用于存儲(chǔ)計(jì)算機(jī)可讀取的程序或指令，所述程序或指令被處理器執(zhí)行時(shí)能夠?qū)崿F(xiàn)上述權(quán)利要求1至7中任意一項(xiàng)所述的一種3d發(fā)光球關(guān)系圖譜加載的方法中的步驟。

技術(shù)總結(jié)
本發(fā)明涉及一種3D發(fā)光球關(guān)系圖譜加載的方法、裝置、電子設(shè)備及介質(zhì)，屬于網(wǎng)頁(yè)交互技術(shù)領(lǐng)域，其中，該方法包括：在目標(biāo)網(wǎng)頁(yè)的HTML代碼中引入three.js并創(chuàng)建場(chǎng)景；基于three.js創(chuàng)建目標(biāo)材質(zhì)類和目標(biāo)光源類；基于目標(biāo)材質(zhì)類和目標(biāo)光源類創(chuàng)建3D球體，并將3D球體添加到場(chǎng)景中；基于three.js得到業(yè)務(wù)數(shù)據(jù)之間的關(guān)系圖譜；將關(guān)系圖譜映射到3D球體中，得到映射后的3D球體；當(dāng)映射后的3D球體的目標(biāo)節(jié)點(diǎn)觸發(fā)監(jiān)聽事件時(shí)，基于Raycaster射線將目標(biāo)節(jié)點(diǎn)高亮并旋轉(zhuǎn)到目標(biāo)網(wǎng)頁(yè)的中心位置，得到發(fā)光的3D球體并加載發(fā)光的3D球體。本發(fā)明將數(shù)據(jù)轉(zhuǎn)化為關(guān)系圖譜數(shù)據(jù)并映射到3D球體，通過(guò)在3D球體上觸發(fā)監(jiān)聽事件將目標(biāo)節(jié)點(diǎn)高亮并旋轉(zhuǎn)到中心位置，彌補(bǔ)了現(xiàn)有組件缺乏高效過(guò)濾和高亮顯示的功能。

技術(shù)研發(fā)人員：關(guān)月華,董建軍,徐斌,何懷兵,胡亞林,王駿濤,郭莉
受保護(hù)的技術(shù)使用者：武漢大數(shù)據(jù)產(chǎn)業(yè)發(fā)展有限公司
技術(shù)研發(fā)日：
技術(shù)公布日：2025/1/2