[發(fā)明專利]一種web端實(shí)現(xiàn)三維互動(dòng)的方法

在審

• 申請(qǐng)?zhí)枺?/td>: 202011579981.1
• 申請(qǐng)日: 2020-12-28
• 公開（公告）號(hào): CN112612627A
• 公開（公告）日: 2021-04-06
• 發(fā)明（設(shè)計(jì)）人: 李立
• 申請(qǐng)（專利權(quán)）人: 江蘇梨柳科技有限公司
• 主分類號(hào): G06F9/54
• 分類號(hào): G06F9/54;G06F16/958
• 代理公司: 天津垠坤知識(shí)產(chǎn)權(quán)代理有限公司 12248
• 代理人: 王忠瑋

本發(fā)明提供一種web端實(shí)現(xiàn)三維互動(dòng)的方法，主要步驟如下：第一步：創(chuàng)建web端三維模塊。第二步：創(chuàng)建可視化模塊。第三步：對(duì)接數(shù)據(jù)API接口，完成數(shù)據(jù)的可視化展示。第四步：通過WebSocket接口完成前后端信號(hào)通信。本發(fā)明能夠?qū)崿F(xiàn)web端的三維可視化項(xiàng)目的快速互動(dòng)通信，提高了通信傳輸效率和質(zhì)量，對(duì)常見的頁面元素的抽象，提供了更豐富、靈活的配置方式，實(shí)現(xiàn)了具備較高可讀性、可編程、可批量操作、高效的可視化數(shù)據(jù)可視化模塊的配置技術(shù)方案，使得三維相關(guān)的應(yīng)用程序智能在web端流暢運(yùn)行，更好的呈現(xiàn)三維應(yīng)用，能夠突破瀏覽器的限制，適應(yīng)性更強(qiáng)，達(dá)到快速進(jìn)行三維可視化互動(dòng)的目的。

技術(shù)領(lǐng)域

本發(fā)明涉及計(jì)算機(jī)領(lǐng)域，具體為一種web端實(shí)現(xiàn)三維互動(dòng)的方法。

背景技術(shù)

伴隨著web開發(fā)技術(shù)的蓬勃發(fā)展，越來越多的應(yīng)用向著web端轉(zhuǎn)移。很早以前，三維相關(guān)的應(yīng)用程序智能在桌面端運(yùn)行，web端限制于標(biāo)準(zhǔn)、瀏覽器性能等原因，一直不能很好地呈現(xiàn)三維應(yīng)用。隨著WebGL標(biāo)準(zhǔn)的確立以及推廣，越來越多的三維應(yīng)用可以在web端呈現(xiàn)出不輸于桌面端的效果。三維可視化也隨著WebGL的發(fā)展推廣得到了快速發(fā)展，但是Web端實(shí)現(xiàn)三維可視化互動(dòng)的速度還有待提高，同時(shí)需要進(jìn)一步提高傳輸效率和質(zhì)量。

發(fā)明內(nèi)容

本發(fā)明目的在于提供一種web端實(shí)現(xiàn)三維互動(dòng)的方法，解決web端的三維可視化項(xiàng)目的快速互動(dòng)通信的問題。

為達(dá)成上述目的，本發(fā)明提出如下技術(shù)方案：一種web端實(shí)現(xiàn)三維互動(dòng)的方法，包括如下步驟：

第一步：創(chuàng)建web端三維模塊，所述web端三維模塊創(chuàng)立場景、相機(jī)、渲染方法，所述web端三維模塊展示具體物體。

第二步：創(chuàng)建可視化模塊，通過配置引擎，設(shè)置數(shù)據(jù)可視化模塊的頁面元素的內(nèi)容及布局，所述頁面元素至少包括過濾器和圖表，所述過濾器用于設(shè)置數(shù)據(jù)過濾條件，所述圖表用于呈現(xiàn)數(shù)據(jù)包含的各類指標(biāo)，通過渲染引擎按照所述頁面元素的內(nèi)容，確定各個(gè)圖表對(duì)應(yīng)的過濾器集合，并分別針對(duì)各個(gè)圖表執(zhí)行以下操作：按照?qǐng)D表對(duì)應(yīng)的過濾器集合表征數(shù)據(jù)過濾條件，從所述至少兩種數(shù)據(jù)源獲取相應(yīng)的數(shù)據(jù)，將所述數(shù)據(jù)包含的各類指標(biāo)填寫至所述圖表中，通過所述渲染引擎按照所述頁面元素的布局，對(duì)各個(gè)頁面元素進(jìn)行渲染，生成相應(yīng)的數(shù)據(jù)可視化模塊。

第三步：對(duì)接數(shù)據(jù)API接口，完成數(shù)據(jù)的可視化展示。

第四步：通過WebSocket接口完成前后端信號(hào)通信。

進(jìn)一步的，在本發(fā)明中，所述第一步中的web端三維模塊包括已封裝的API。

進(jìn)一步的，在本發(fā)明中，所述API包括Three.js，通過Three.js創(chuàng)建三維應(yīng)用程序。

進(jìn)一步的，在本發(fā)明中，所述Three.js創(chuàng)建三維應(yīng)用程序的步驟如下：

1.1：調(diào)用new Scene方法，創(chuàng)立場景；

1.2：調(diào)用PerspectiveCamera創(chuàng)立相機(jī)；

1.3：調(diào)用WebGLRenderer創(chuàng)立渲染方法；

1.4：調(diào)用Mesh方法創(chuàng)建三維展示的具體物體。

進(jìn)一步的，在本發(fā)明中，通過echarts庫創(chuàng)建第二步中的echarts庫步驟如下：

2.1：調(diào)用echarts.init方法，完成可視化庫的初始化，得到可視化實(shí)例；

2.2：設(shè)置可視化的相關(guān)配置option；

2.3：調(diào)用可視化實(shí)例的setOption方法，傳入上一步的option作為參。

進(jìn)一步的，在本發(fā)明中，通過http協(xié)議通信完成第三步，具體步驟如下：