html結合工業互聯網實現智慧飛機控制（附代碼）

這篇文章帶給大家的內容是關於html結合工業互聯網實現智慧飛機控制（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

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

程式碼部分：

載入飛機模型

首先，最重要的是我們的飛機模型，前面有文章寫過，HT 內部封裝了一個方法ht.Default.loadObj （https://hightopo.com/guide/gu...）來載入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/gu...）中模型註冊（https://hightopo.com/guide/gu ...）章節介紹的​​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/gui...），我們還添加了一個在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/gui...）。

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/gui...），透過使用者在form 表單上選擇的結果來決定飛機飛行持續時間、看飛機的視角、飛機沿著「航線」飛行所要旋轉的角度、機尾指示燈的「閃爍」功能等等，最後別忘了飛機停止飛行時，如果要讓飛機繼續飛行，就得回調這個動畫，並且設定燈不再閃爍，別忘了要啟動動畫：

params = {
    delay: 1500,
    duration: 20000,
    easing: function(t){ 
        return (t *= 2)  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/gui...）中定义的，points 是 ht.List 类型数组的定点信息，顶点为 { x: 100, y: 200 } 格式的对象；segments 是 ht.List 类型的线段数组信息，代表 points 数组中的顶点按数组顺序的连接方式。

图中“航道”左侧的多个圆形轨道也是通过设置 points 和 segments 来设置的：

for(var k=0; k<count><p>接下来几个拐点也是这种方法来实现的，这里就不赘述了，如果你还没看手册的话，这里标明一点，segments 只能取值 1~5，1 代表一个新路径的起点；2 代表从上次最后点连接到该点；3 占用两个点信息，第一个点作为曲线控制点，第二个点作为曲线结束点；4 占用3个点信息，第一和第二个点作为曲线控制点，第三个点作为曲线结束点；5 不占用点信息，代表本次绘制路径结束，并闭合到路径的起始点：</p>
<pre class="brush:php;toolbar:false">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/gu...）方法动态添加行，这个方法中可以直接对动态变化的数据进行交互，例如本例中的是否有动画 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% 的航班提供机上互联服务。在航天航空领域，工业互联网会打破软件、硬件和人员之间的信息壁垒，依靠大数据的分析，让飞机建立自己的声音，表达给飞行员和维修人员飞行员，具体飞行状况如何或者哪里需要维修。工业互联网技术的深入应用，正在改变着民航飞机的使用效率和制造成本。

相关推荐：

HTML5 Canvas实现交互式地铁线路图

如何使用Chrome控制台进行3D模型编辑的实现（代码）

以上是html結合工業互聯網實現智慧飛機控制（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！