html結合工業互聯網實現智慧飛機控制（附代碼）
- 不言原創
- 2018-08-06 14:06:552834瀏覽
這篇文章帶給大家的內容是關於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% 的航班提供机上互联服务。在航天航空领域，工业互联网会打破软件、硬件和人员之间的信息壁垒，依靠大数据的分析，让飞机建立自己的声音，表达给飞行员和维修人员飞行员，具体飞行状况如何或者哪里需要维修。工业互联网技术的深入应用，正在改变着民航飞机的使用效率和制造成本。
相关推荐：
以上是html結合工業互聯網實現智慧飛機控制（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！