前言

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

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

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

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

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

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

界面

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

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

無人機形態切換

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

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

內部結構

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

接下來，我們探索一下進入內部模式時，從四周緩緩移入窗口的圖形又是怎么實現的

現如今，終端的屏幕分辨率各式各樣，很多網頁在開發前期都會選擇響應式布局或自適應式布局，而?HT for Web的 2D 拓撲組件除了提供矢量繪制，還提供了一套相契合的布局方式。從上圖中我們可以看到，紅框中的部分是最開始的加載界面，而紅框四周的部分則是內部模式中移入的部分，系統中的加載頁面與此不同，正是因為添加了布局方式。

首先我們將紅框中背景圖片選為整個頁面根節點，修改它的 fullscreen 屬性為 fill，并為其添加全屏鎖定的方式。其次將根節點設置為其余節點的吸附節點，并為其余節點修改合適的布局方式。這樣背景圖片就會填充整個界面，而四周節點的位置則始終保持在背景圖片的外側，在加載界面中就不會顯示出來了。內部模式將四周節點移動至界面內，也是通過修改位置來實現的，但是因為全屏鎖定方式設置為垂直，所以背景的寬度被改變，左右兩側節點的移動則需要在獲取到當前界面顯示寬度后去計算移動位置。

總結

現如今，信息化快速發展，智能化工具成為了新生產力出現在我們的生活中。與此同時，工業互聯網的概念也隨之誕生，將人、數據、設備聯系到了一起，而可視化界面則可以很好的將數據和設備進行展示，方便管理的同時也更加安全、高效。

HT for Web提供了 2D、3D 兩種模式的可視化方式，它功能強大的同時也易于學習使用，有興趣的同學也可以來體驗一下。

總結

以上是生活随笔為你收集整理的基于html的论坛系统,科技多元化：基于HTML5WebGL的无人机3D可视化系统-专业自动化论坛-中国工控网论坛...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。