技術文章

當前頁面: 首頁 >技術文章 >無人機3D可視化系統的實現

無人機3D可視化系統的實現

供稿:工業物聯網老虎 2020/9/3 10:09:04

5 人氣:4

  • 關鍵詞: 數據可視化 工業物聯 組態軟件
  • 摘要:本系統則是通過 圖撲軟件( Hightopo) 的 HT for Web 產品來搭建的一款 無人機 3D 可視化系統,通過對無人機及其信息的全景展示來模擬無人機狀態的監控。

前言

近年來,無人機的發展越發迅速,既可民用于航拍,又可軍用于偵察,涉及行業廣泛,也被稱為“會飛的照相機”。但作為軍事使用,無人機的各項性能要求更加嚴格、重要。

本系統則是通過 圖撲軟件( Hightopo) 的 HT for Web 產品來搭建的一款 無人機 3D 可視化系統,通過對無人機及其信息的全景展示來模擬無人機狀態的監控。

系統中包含 4 種展示模式:實體模式 、熱力模式、線框模式和內部模式,通過飛機下方操作按鈕即可進行模式切換。


實現過程

  • 加載界面采用 2D 拓撲組件進行繪制,全矢量化圖標,與傳統的 png、jpg 等格式的圖片相比,完美適配移動端、PC 端、大屏等各種尺寸及分辨率屏幕,不會出現失真情況。

  • 無人機及周邊信息面板采用 3D 引擎進行場景搭建,用戶可從場景任意位置對無人機進行查看。

  • 動畫過程采用產品提供的動畫函數 ht.Default.startAnim 來驅動圖形屬性值的改變,應用其 Time-Based 的方式,只需要指定動畫周期 duration 的毫秒數,由系統去計算幀數或 action 函數被調用的次數,以保證更加高效、平滑的進行動畫過程。

界面

科技多元化:基于 HTML5 WebGL 的無人機 3D 可視化系統


加載界面中通過動態改變圖形的屬性值來展現加載進度,加載完畢后通過動畫的 finishFunc 調用 hidden2d 方法來改變圖形的透明度,在此之后通過 moveCamera 將場景內視角拉近,從而實現淡出到淡入的效果(即離開加載界面進入到 3D 場景中)。與此同時改變圖形在 3D 場景中位置來實現各形態的無人機合為一體以及將對應按鈕分離。

科技多元化:基于 HTML5 WebGL 的無人機 3D 可視化系統


2D 界面的制作是繪制了一張圖紙,而 logo 則是制作了一個圖標,一個圖標可以在圖紙中進行多次使用,并可展示不同的樣子。下圖中右側的四個 logo 就是同一個圖標,分別展示了不同的裁切方式以及透明度,系統中 logo 的進度條效果就是動態的去改變圖標的裁切比例來實現,而界面的淡出效果則是改變透明度。整個圖標的制作是繪制不同的圖形組合而成,這些圖形我們也可以去改變顏色,形成左側的 logo 樣式。

無人機形態切換

科技多元化:基于 HTML5 WebGL 的無人機 3D 可視化系統


無人機主體形態分為三種:實體模式、線框模式和熱力模式。通過點擊下方按鈕,可切換至按鈕所對應的形態。切換的過程中,將目標形態進行顯示,并分別上下移動目標形態和原形態,使用戶可以短暫的進行同時查看,之后再回歸原位并將原形態進行隱藏。隱藏的方式則有所不用,線框模式是改變線框顏色,其余兩種模式則是調整模型的透明度。這里的線框是根據模型的輪廓生成的,通過 3D 引擎自動計算描繪,非常便捷。

通過 3D 引擎,我們可以生成立體圖形,也可以添加導入的模型,圖形的位置由 x、y、z 三個方向的坐標來確認,而坐標軸匯聚的圓點則是圖形的錨點,無人機前方旋轉的圓環則是將錨點調整到圓環中心后,操縱 rotation 屬性進行轉動 。在系統中線框狀態的無人機則是像圖中左側的球體這樣生成的,如果我們將圖形的透明度調為 0,則只顯示線框的樣式。

科技多元化:基于 HTML5 WebGL 的無人機 3D 可視化系統


內部結構

科技多元化:基于 HTML5 WebGL 的無人機 3D 可視化系統


在線框模式下,大家會發現按鈕的上方出現了一個小按鈕,點擊它就可以進入到無人機的另一個狀態,在這里我們除了可以看到線框,還能夠接觸到無人機的內部結構,查看它的每一個部件。進入的過程會將場景內的其它圖形隱藏,將內部結構顯示出來。

// 內部模式
function moveToInternal(){
  const width = background.getWidth();   // 獲取背景當前寬度
  const beginLeft = -(width / 2 - 960);   // 計算兩側節點起始位置
  const beginRight = width / 2 + 960;
  ht.Default.startAnim({
    duration: 2000,
    easing: t => {
      return t;
    },
    action: (v, t) => { 
      linePlane.s('wf.color', 'rgba(64,173,152,' + (1 - v) + ')');
      hiddenRing(v);
    },
    finishFunc: () => {
      dm3d.each(e => {
          e.s('3d.visible', false)
      })
      linePlane_internal.each(e => {
        e.s('3d.visible', true);
      })
      ht.Default.startAnim({
        duration: 1000,
        easing: t => {
          return 1 - (--t) * t * t * t;
        },
        action: (v, t) => { 
          title.setY(-50 + (70 + 50) * v);
          returnButton.setY(1095 + (1020 - 1095) * v);
          leftShape.setX(beginLeft + 130 * v);
          rightShape.setX(beginRight - 130 * v);
        }
      })
    }
  })
}

審核編輯(王靜)
更多內容請訪問 工業物聯網老虎(http://home.gongkong.com/profile/?uid=S020052013411100001)

手機掃描二維碼分享本頁

工控網APP下載安裝

 

我來評價

評價:
一般
支付宝考试后赚钱 成都股票配资 新浪博客 周口期货配资 上海今天时时乐开奖走势图 快乐扑克玩法 黑龙江p62开奖结果查询结果 快3玩法介绍 极速5分快3走势图 炒股开户最低多少钱 腾讯三分彩是正规的吗 体彩七位数随机一注