13518219792
这篇文章给大家分享的是有关html结合工业互联网实现智能飞机控制的方法的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。
创新互联是专业的白塔网站建设公司，白塔接单;提供做网站、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行白塔网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
从互联网+的概念一出来，就瞬间吸引了各行各业的能人志士，想要在这个领域分上一杯羹。现在传统工业生产行业运用互联网+的概念偏多，但是在大众创业万众创新的背景下，“互联网＋”涌出了层出不穷的“玩法”，智慧城市、隧道交通、智慧园区、工业生产，甚至是这次要说的智能飞机！异地协同制造的范围，目前多局限于主机制造厂之间，发动机和机载系统介入得很少。“互联网+飞机”可通过提高各类飞行器的有效监控能力、应急处置能力来大幅提高航行安全水平。“在提高这两大能力后，像飞机失联这类事件将不再发生。”当飞机飞离预定航线时，地面可以即时监控，甚至在飞机遭遇恶意操控时，地面也可以接管，而且“互联网+飞机”将对每架飞机的各项数据了如指掌，有效提高航行的安全。我认为，“互联网+飞机”将超出传统的“互联网+飞机制造”阶段，让互联网在飞机全寿命使用过程中发威，这可为传统制造业转型升级提供重大机遇。
代码部分：
加载飞机模型
首先，最重要的是我们的飞机模型，前面有文章写到过，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) < 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/gui...）中定义的，points 是 ht.List 类型数组的定点信息，顶点为 { x: 100, y: 200 } 格式的对象；segments 是 ht.List 类型的线段数组信息，代表 points 数组中的顶点按数组顺序的连接方式。
图中“航道”左侧的多个圆形轨道也是通过设置 points 和 segments 来设置的：
