這篇文章給大家分享的是有關(guān)html結(jié)合工業(yè)互聯(lián)網(wǎng)實(shí)現(xiàn)智能飛機(jī)控制的方法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。
從互聯(lián)網(wǎng)+的概念一出來，就瞬間吸引了各行各業(yè)的能人志士，想要在這個(gè)領(lǐng)域分上一杯羹?，F(xiàn)在傳統(tǒng)工業(yè)生產(chǎn)行業(yè)運(yùn)用互聯(lián)網(wǎng)+的概念偏多，但是在大眾創(chuàng)業(yè)萬眾創(chuàng)新的背景下，“互聯(lián)網(wǎng)＋”涌出了層出不窮的“玩法”，智慧城市、隧道交通、智慧園區(qū)、工業(yè)生產(chǎn)，甚至是這次要說的智能飛機(jī)！異地協(xié)同制造的范圍，目前多局限于主機(jī)制造廠之間，發(fā)動(dòng)機(jī)和機(jī)載系統(tǒng)介入得很少?！盎ヂ?lián)網(wǎng)+飛機(jī)”可通過提高各類飛行器的有效監(jiān)控能力、應(yīng)急處置能力來大幅提高航行安全水平?！霸谔岣哌@兩大能力后，像飛機(jī)失聯(lián)這類事件將不再發(fā)生?！碑?dāng)飛機(jī)飛離預(yù)定航線時(shí)，地面可以即時(shí)監(jiān)控，甚至在飛機(jī)遭遇惡意操控時(shí)，地面也可以接管，而且“互聯(lián)網(wǎng)+飛機(jī)”將對(duì)每架飛機(jī)的各項(xiàng)數(shù)據(jù)了如指掌，有效提高航行的安全。我認(rèn)為，“互聯(lián)網(wǎng)+飛機(jī)”將超出傳統(tǒng)的“互聯(lián)網(wǎng)+飛機(jī)制造”階段，讓互聯(lián)網(wǎng)在飛機(jī)全壽命使用過程中發(fā)威，這可為傳統(tǒng)制造業(yè)轉(zhuǎn)型升級(jí)提供重大機(jī)遇。
代碼部分：
加載飛機(jī)模型
首先，最重要的是我們的飛機(jī)模型，前面有文章寫到過，HT 內(nèi)部封裝了一個(gè)方法 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];
}
};
// 設(shè)置模型的大小為原來的 1 1.2 1.2 倍（相當(dāng)于 x 軸放大了 1 倍，y 軸放大了 1.2 倍，z 軸放大了 1.2 倍）
modelMap.propeller.s3 = [1, 1.2, 1.2];
modelMap.propeller.color = 'yellow';
}
});要將 obj 解析后的模型信息綁定到圖元，需先調(diào)用建模手冊(cè)（https://hightopo.com/guide/gu...）中模型注冊(cè)（https://hightopo.com/guide/gu...）章節(jié)介紹的 ht.Default.setShape3dModel(name, model) 函數(shù)進(jìn)行注冊(cè)，之后圖元只需將 style 的 shape3d 屬性設(shè)置為注冊(cè)的名稱。當(dāng)然我們現(xiàn)在將這個(gè)方法封裝了一下，采用更簡(jiǎn)便的方法來加載模型，但是還是需要加載的原理：
// models/plane.json
{
"modelType": "obj",
"obj": "obj/plane.obj",
"mtl": "obj/plane.mtl"http:// 要是沒有 mtl 文件，則設(shè)置為 ""
}之后通過設(shè)置節(jié)點(diǎn)的 style 的 shape3d 屬性設(shè)置為這個(gè) json：node.s('shape3d', 'models/plane.json')。
注意！不管使用哪種方法來加載模型，mtl 文件中如果有使用貼圖，貼圖的路徑需要是相對(duì)于 obj 文件的路徑。
前面代碼中的 modelMap.propeller 是 OBJ 文件中定義好的 modelMap 對(duì)象中的 propeller 對(duì)象，可以試著打印 modelMap 看看輸出結(jié)果。
加載機(jī)尾指示燈
這個(gè)方法里的 finishFunc(modelMap, array, rawS3) 用于加載后的回調(diào)處理，具體查閱 HT for Web OBJ 手冊(cè)（http://hightopo.com/guide/gui...），我們還添加了一個(gè)在 OBJ 模型中沒有的飛機(jī)尾部的“紅色閃爍指示燈”，這里用到的是組合模型 array（所有材質(zhì)組成的數(shù)組，里面有至少一個(gè)模型），我們?cè)?array中加入一個(gè)新的球模型：
// 添加一個(gè)指示燈的圓形模型
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 封裝的一個(gè)屬性名，通過 setShape3dModel(name, model) 函數(shù)注冊(cè)的或者是通過 getShape3dModel(name) 函數(shù)返回的注冊(cè)過的 3D 模型，如何注冊(cè) 3D 模型可查閱 HT for Web 建模手冊(cè)（http://hightopo.com/guide/gui...）。
color 屬性名對(duì)應(yīng)了一個(gè)對(duì)象，這邊的定義是這樣的，color 直接通過 data.getAttr('a') 獲取 data.setAttr(‘a(chǎn)’, value) 中的值，這樣做有兩個(gè)好處，一是可以不污染 HT 的常用屬性操作，所以 HT 專門定義了這個(gè) attr 屬性類型，是 HT 預(yù)留給用戶存儲(chǔ)業(yè)務(wù)數(shù)據(jù)的；二是這樣也很方便數(shù)據(jù)綁定，我們可以通過在需要更改屬性的地方調(diào)用 setAttr 方法，非常方便。
接著我們通過 ht.Default.setShape3dModel(name, model) 來將我們剛剛組合好的模型 array 注冊(cè)成我們要的“plane”模型：
ht.Default.setShape3dModel('plane', array);創(chuàng)建模型節(jié)點(diǎn)
注冊(cè)好模型后肯定是要調(diào)用這個(gè)模型，我們可以通過 shape3d 屬性來調(diào)用這個(gè)模型，并且在這個(gè)模型中自定義上面代碼中出現(xiàn)過的 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
});動(dòng)畫
因?yàn)轱w機(jī)還有螺旋槳、指示燈兩個(gè)功能，我們還得對(duì)這兩個(gè)模型做動(dòng)畫效果，可查閱 HT for Web 動(dòng)畫手冊(cè)（http://hightopo.com/guide/gui...），通過用戶在 form 表單上選擇的結(jié)果來決定飛機(jī)飛行持續(xù)時(shí)間、看飛機(jī)的視角、飛機(jī)沿著“航線”飛行所要旋轉(zhuǎn)的角度、機(jī)尾指示燈的“閃爍”功能等等，最后別忘了飛機(jī)停止飛行時(shí)，如果要讓飛機(jī)繼續(xù)飛行，就得回調(diào)這個(gè)動(dòng)畫，并且設(shè)置燈不再閃爍，別忘了要啟動(dòng)動(dòng)畫：
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);其實(shí)最讓我們好奇的是描繪的路徑跟飛機(jī)本身的飛行并沒有關(guān)系，還有那么多左拐右拐的，要如何做才能做到呢？
繪制飛機(jī)軌道
接下來我們來描繪路徑，首先這個(gè)路徑是由 ht.Polyline 作為基礎(chǔ)來描繪的：
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 數(shù)據(jù)模型中添加了一個(gè) polyline 管線而已，不會(huì)顯示任何東西，要顯示“航道”首先就要設(shè)置航道所在的點(diǎn)，我們先設(shè)置航道的初始點(diǎn)：
points = [{ x: 0, y: 0, e: 0 }];
segments = [1];這個(gè) points 和 segments 是 HT for Web Shape 手冊(cè)（http://hightopo.com/guide/gui...）中定義的，points 是 ht.List 類型數(shù)組的定點(diǎn)信息，頂點(diǎn)為 { x: 100, y: 200 } 格式的對(duì)象；segments 是 ht.List 類型的線段數(shù)組信息，代表 points 數(shù)組中的頂點(diǎn)按數(shù)組順序的連接方式。
圖中“航道”左側(cè)的多個(gè)圓形軌道也是通過設(shè)置 points 和 segments 來設(shè)置的：
