前言

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

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

系統(tǒng)中包含 4 種展示模式：實(shí)體模式 、熱力模式、線框模式和內(nèi)部模式，通過飛機(jī)下方操作按鈕即可進(jìn)行模式切換。

實(shí)現(xiàn)過程加載界面采用 2D 拓?fù)浣M件進(jìn)行繪制，全矢量化圖標(biāo)，與傳統(tǒng)的 png、jpg 等格式的圖片相比，完美適配移動端、PC 端、大屏等各種尺寸及分辨率屏幕，不會出現(xiàn)失真情況。

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

動畫過程采用產(chǎn)品提供的動畫函數(shù) ht.Default.startAnim 來驅(qū)動圖形屬性值的改變，應(yīng)用其 Time-Based 的方式，只需要指定動畫周期 duration 的毫秒數(shù)，由系統(tǒng)去計算幀數(shù)或 action 函數(shù)被調(diào)用的次數(shù)，以保證更加高效、平滑的進(jìn)行動畫過程。

界面

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

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

無人機(jī)形態(tài)切換

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

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

內(nèi)部結(jié)構(gòu)

在線框模式下，大家會發(fā)現(xiàn)按鈕的上方出現(xiàn)了一個小按鈕，點(diǎn)擊它就可以進(jìn)入到無人機(jī)的另一個狀態(tài)，在這里我們除了可以看到線框，還能夠接觸到無人機(jī)的內(nèi)部結(jié)構(gòu)，查看它的每一個部件。進(jìn)入的過程會將場景內(nèi)的其它圖形隱藏，將內(nèi)部結(jié)構(gòu)顯示出來。// 內(nèi)部模式function moveToInternal(){ ?const width = background.getWidth(); ? // 獲取背景當(dāng)前寬度 ?const beginLeft = -(width / 2 - 960); ? // 計算兩側(cè)節(jié)點(diǎn)起始位置 ?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); ? ? ? ?} ? ? ?}) ? ?} ?})}

接下來，我們探索一下進(jìn)入內(nèi)部模式時，從四周緩緩移入窗口的圖形又是怎么實(shí)現(xiàn)的

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

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

總結(jié)

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。