基於 HTML5 的 3D 飛機飛行軌道控制

圖撲軟體發表於2019-04-01

前言

從網際網路+的概念一出來,就瞬間吸引了各行各業的能人志士,想要在這個領域分上一杯羹。現在傳統工業生產行業運用網際網路+的概念偏多,但是在大眾創業萬眾創新的背景下,“網際網路+”湧出了層出不窮的“玩法”,智慧城市、隧道交通、智慧園區、工業生產,甚至是這次要說的智慧飛機!異地協同製造的範圍,目前多侷限於主機制造廠之間,發動機和機載系統介入得很少。“網際網路+飛機”可通過提高各類飛行器的有效監控能力、應急處置能力來大幅提高航行安全水平。“在提高這兩大能力後,像飛機失聯這類事件將不再發生。”當飛機飛離預定航線時,地面可以即時監控,甚至在飛機遭遇惡意操控時,地面也可以接管,而且“網際網路+飛機”將對每架飛機的各項資料瞭如指掌,有效提高航行的安全。我認為,“網際網路+飛機”將超出傳統的“網際網路+飛機制造”階段,讓網際網路在飛機全壽命使用過程中發威,這可為傳統制造業轉型升級提供重大機遇。
在這裡插入圖片描述
http://hightopo.com/guide/guide/plugin/obj/examples/example_path.html

程式碼部分

載入飛機模型

首先,最重要的是我們的飛機模型,前面有文章寫到過,HT 內部封裝了一個方法 ht.Default.loadObj (https://hightopo.com/guide/guide/plugin/obj/ht-obj-guide.html#ref_loadobj )來載入 OBJ 檔案:

ht.Default.loadObj('obj/plane.obj', 'obj/plane.mtl', {                    
    center: true,
    r3: [0, -Math.PI/2, 0], // make plane face right
    s3: [0.15, 0.15, 0.15], // make plane smaller
    finishFunc: function(modelMap, array, rawS3){
        if(modelMap){                            
            modelMap.propeller.r3 = { // propeller 螺旋槳
            func: function(data){
                return [data.a('angle'), 0, 0]; 
            }
        };                             
        // 設定模型的大小為原來的 1 1.2 1.2 倍(相當於 x 軸放大了 1 倍,y 軸放大了 1.2 倍,z 軸放大了 1.2 倍)
        modelMap.propeller.s3 = [1, 1.2, 1.2]; 
        modelMap.propeller.color = 'yellow';
    } 
});

要將 obj 解析後的模型資訊繫結到圖元,需先呼叫建模手冊中模型註冊(https://hightopo.com/guide/guide/plugin/modeling/ht-modeling-guide.html#ref_register )章節介紹的 ht.Default.setShape3dModel(name, model) 函式進行註冊,之後圖元只需將 style 的 shape3d 屬性設定為註冊的名稱。當然我們現在將這個方法封裝了一下,採用更簡便的方法來載入模型,但是還是需要載入的原理:

// models/plane.json
{
    "modelType": "obj",
    "obj": "obj/plane.obj",
    "mtl": "obj/plane.mtl" // 要是沒有 mtl 檔案,則設定為 ""
}

之後通過設定節點的 style 的 shape3d 屬性設定為這個 json:node.s('shape3d', 'models/plane.json')

注意!不管使用哪種方法來載入模型,mtl 檔案中如果有使用貼圖,貼圖的路徑需要是相對於 obj 檔案的路徑。

前面程式碼中的 modelMap.propeller 是 OBJ 檔案中定義好的 modelMap 物件中的 propeller 物件,可以試著列印 modelMap 看看輸出結果。
在這裡插入圖片描述

載入機尾指示燈

這個方法裡的 finishFunc(modelMap, array, rawS3) 用於載入後的回撥處理,具體查閱 HT for Web OBJ 手冊(http://hightopo.com/guide/guide/plugin/obj/ht-obj-guide.html#ref_loadobj ),我們還新增了一個在 OBJ 模型中沒有的飛機尾部的“紅色閃爍指示燈”,這裡用到的是組合模型 array(所有材質組成的陣列,裡面有至少一個模型),我們在 array中加入一個新的球模型:

// 新增一個指示燈的圓形模型
array.push({
    shape3d: ht.Default.createSmoothSphereModel(),
    t3: [-40, 10, 0],
    s3: [6, 6, 6],
    color: {
        func: function(data){
            return data.a('light') ? 'red': 'black';
        }
    }
});

這裡的 shape3d 是 HT 封裝的一個屬性名,通過 setShape3dModel(name, model) 函式註冊的或者是通過 getShape3dModel(name) 函式返回的註冊過的 3D 模型,如何註冊 3D 模型可查閱 HT for Web 建模手冊(http://hightopo.com/guide/guide/plugin/modeling/ht-modeling-guide.html#ref_register )。

color 屬性名對應了一個物件,這邊的定義是這樣的,color 直接通過 data.getAttr(‘a’) 獲取 data.setAttr(‘a’, value) 中的值,這樣做有兩個好處,一是可以不汙染 HT 的常用屬性操作,所以 HT 專門定義了這個 attr 屬性型別,是 HT 預留給使用者儲存業務資料的;二是這樣也很方便資料繫結,我們可以通過在需要更改屬性的地方呼叫 setAttr 方法,非常方便。

接著我們通過 ht.Default.setShape3dModel(name, model) 來將我們剛剛組合好的模型 array 註冊成我們要的“plane”模型:

ht.Default.setShape3dModel('plane', array);

建立模型節點

註冊好模型後肯定是要呼叫這個模型,我們可以通過 shape3d 屬性來呼叫這個模型,並且在這個模型中自定義上面程式碼中出現過的 light 屬性和 angle 屬性:

plane = new ht.Node();
plane.s3(200, 200, 200);
plane.s3(rawS3);
plane.s({
    'shape3d': 'plane',
    'shape3d.scaleable': false,
    'wf.visible': true, // 線框是否可見
    'wf.color': 'white',
    'wf.short': true // 是否顯示封閉的線框,true 為不封閉的短線框
});
plane.a({
    'angle': 0,
    'light': false
});

動畫

因為飛機還有螺旋槳、指示燈兩個功能,我們還得對這兩個模型做動畫效果,可查閱 HT for Web 動畫手冊(http://hightopo.com/guide/guide/plugin/animation/ht-animation-guide.html ),通過使用者在 form 表單上選擇的結果來決定飛機飛行持續時間、看飛機的視角、飛機沿著“航線”飛行所要旋轉的角度、機尾指示燈的“閃爍”功能等等,最後別忘了飛機停止飛行時,如果要讓飛機繼續飛行,就得回撥這個動畫,並且設定燈不再閃爍,別忘了要啟動動畫:

params = {
    delay: 1500,
    duration: 20000,
    easing: function(t){ 
        return (t *= 2) < 1 ? 0.5 * t * t : 0.5 * (1 - (--t) * (t - 2));
    },
    action: function(v, t){
        var length = g3d.getLineLength(polyline),
        offset = g3d.getLineOffset(polyline, length*v),
        point = offset.point,
        px = point.x,
        py = point.y,
        pz = point.z,
        tangent = offset.tangent,
        tx = tangent.x,
        ty = tangent.y,
        tz = tangent.z;
        plane.p3(px, py, pz);
        plane.lookAt([px + tx, py + ty, pz + tz], 'right');
                        
        var camera = formPane.v('Camera');
        if(camera === 'Look At'){
            g3d.setCenter(px, py, pz);
        }
        else if(camera === 'First Person'){                            
            g3d.setEye(px - tx * 400, py - ty * 400 + 30, pz - tz * 400);
            g3d.setCenter(px, py, pz);                            
        }
                        
        plane.a('angle', v*Math.PI*120);                        
        if(this.duration * t % 1000 > 500){
            plane.a('light', false);
        }else{
            plane.a('light', true);
        }                        
    },
    finishFunc: function(){
        animation = ht.Default.startAnim(params);
        plane.a('light', false);
    }                  
};                               
               
animation = ht.Default.startAnim(params);

其實最讓我們好奇的是描繪的路徑跟飛機本身的飛行並沒有關係,還有那麼多左拐右拐的,要如何做才能做到呢?

繪製飛機軌道

在這裡插入圖片描述
接下來我們來描繪路徑,首先這個路徑是由 ht.Polyline 作為基礎來描繪的:

polyline = new ht.Polyline();   
polyline.setThickness(2);
polyline.s({
    'shape.border.pattern': [16, 16],
    'shape.border.color': 'red',
    'shape.border.gradient.color': 'yellow',
    'shape3d.resolution': 300,
    '3d.selectable': false
});
dataModel.add(polyline);

上面的程式碼只是向 datamodel 資料模型中新增了一個 polyline 管線而已,不會顯示任何東西,要顯示“航道”首先就要設定航道所在的點,我們先設定航道的初始點:

points = [{ x: 0, y: 0, e: 0 }];
segments = [1];

這個 points 和 segments 是 HT for Web Shape 手冊(http://hightopo.com/guide/guide/core/shape/ht-shape-guide.html )中定義的,points 是 ht.List 型別陣列的定點資訊,頂點為 { x: 100, y: 200 } 格式的物件;segments 是 ht.List 型別的線段陣列資訊,代表 points 陣列中的頂點按陣列順序的連線方式。

圖中“航道”左側的多個圓形軌道也是通過設定 points 和 segments 來設定的:

for(var k=0; k<count+1; k++){
    var angle = k * Math.PI * 2 * round / count;
    points.push({
        x: cx + radius * Math.cos(angle),
        y: cy + radius * Math.sin(angle),
        e: k * height / count
    }); 
    segments.push(2);
}

接下來幾個拐點也是這種方法來實現的,這裡就不贅述了,如果你還沒看手冊的話,這裡標明一點,segments 只能取值 1~5,1 代表一個新路徑的起點;2 代表從上次最後點連線到該點;3 佔用兩個點資訊,第一個點作為曲線控制點,第二個點作為曲線結束點;4 佔用3個點資訊,第一和第二個點作為曲線控制點,第三個點作為曲線結束點;5 不佔用點資訊,代表本次繪製路徑結束,並閉合到路徑的起始點:

points.push({ x: cx+radius, y: 0, e: height/2 });
points.push({ x: 0, y: 0, e: height/2 });
segments.push(3);

points.push({ x: radius, y: -radius, e: height/2*0.7 });
points.push({ x: radius*2, y: radius, e: height/2*0.3 });
points.push({ x: radius*3, y: 0, e: 0 });
segments.push(4);   

points.push({ x: 0, y: 0, e: 0 });
segments.push(2);  

我們已經把路徑上的點都新增進“航道”中了,接下來要把點都設定到管道上去才會顯示在介面上:

polyline.setPoints(points);
polyline.setSegments(segments);  

飛機跑道

在這裡插入圖片描述
“跑道”就比較簡單了,只是一個 Node 節點然後設定基礎效果而已,沒什麼特別的:

runway = new ht.Node();
runway.s3(-cx+radius*3, 1, 200);
runway.p3(cx+runway.getWidth()/2, -22, 0);
runway.s({
    'all.color': '#FAFAFA',
    'all.transparent': true,
    'all.reverse.cull': true,
    'all.opacity': 0.8,
    '3d.selectable': false
});
dataModel.add(runway);

最後,在介面上新增一個 formPane 表單皮膚,定義好之後可以直接新增到 body 上,這樣就不會跟 graph3dView 有顯示的聯絡了。

表單皮膚

在這裡插入圖片描述
formPane 可以用 formPane.addRow(https://hightopo.com/guide/guide/plugin/form/ht-form-guide.html#ref_func )方法動態新增行,這個方法中可以直接對動態變化的資料進行互動,例如本例中的是否有動畫 Animation,我們利用 checkBox 來記錄選中或者非選中的狀態:

{
    checkBox: {
        label: 'Animation',
        selected: true,
        onValueChanged: function(){
            if(this.isSelected()){
                animation.resume();
            }else{
                animation.pause();
            }                               
        }
    }
}

也可以通過設定“id”來記錄動態改變的值,然後 formPane 就會通過呼叫 formPane.v(id) 來獲取當前值。

最後

工業網際網路(Industrial Internet)的概念最早由通用電氣(GE)在 2012 年提出,即讓網際網路進入產業鏈的上游,從根本上革新產業。根據飛常準的資料顯示,美國已有 78% 的航班提供機上互聯服務。在航天航空領域,工業網際網路會打破軟體、硬體和人員之間的資訊壁壘,依靠大資料的分析,讓飛機建立自己的聲音,表達給飛行員和維修人員飛行員,具體飛行狀況如何或者哪裡需要維修。工業網際網路技術的深入應用,正在改變著民航飛機的使用效率和製造成本。

在這裡插入圖片描述
https://hightopo.com/demo/large-screen/index.html
在這裡插入圖片描述
https://hightopo.com/demo/cloud-monitor/demo4.html
在這裡插入圖片描述
https://hightopo.com/demo/HTBuilding/index.html

相關文章