Heim > Web-Frontend > H5-Tutorial > HTML wird mit industriellem Internet kombiniert, um eine intelligente Flugzeugsteuerung (mit Code) zu realisieren.

HTML wird mit industriellem Internet kombiniert, um eine intelligente Flugzeugsteuerung (mit Code) zu realisieren.

不言
Freigeben: 2018-08-06 14:06:55
Original
2882 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Realisierung intelligenter Flugzeugsteuerung (mit Code) in Kombination mit dem industriellen Internet. Ich hoffe, dass er für Sie hilfreich ist .

Sobald das Konzept von Internet+ aufkam, zog es sofort talentierte Menschen aus allen Gesellschaftsschichten an, die in diesem Bereich einen Anteil am Kuchen haben wollten. Heutzutage verwenden traditionelle industrielle Produktionsindustrien meist das Konzept von Internet +, aber im Kontext von Massenunternehmertum und Innovation ist „Internet +“ in einem endlosen Strom von „Spielen“ entstanden, darunter intelligente Städte, Tunneltransport, intelligente Parks und Industrie Produktion und sogar Dieses Mal werde ich über intelligente Flugzeuge sprechen! Der Umfang der kollaborativen Fertigung außerhalb des Standorts ist derzeit auf die wichtigsten Triebwerksfabriken beschränkt, wobei Triebwerke und Flugsysteme kaum involviert sind. „Internet + Flugzeuge“ können die Navigationssicherheit erheblich verbessern, indem sie die effektiven Überwachungsfunktionen und Notfallreaktionsfähigkeiten verschiedener Flugzeugtypen verbessern. „Nach der Verbesserung dieser beiden Fähigkeiten kommt es nicht mehr zu Zwischenfällen wie Flugzeugverlusten.“ vorbei, und „Internet + Flugzeuge“ wird die Daten jedes Flugzeugs vollständig verstehen und so die Sicherheit der Navigation effektiv verbessern. Ich glaube, dass „Internet + Flugzeuge“ über die traditionelle Phase „Internet + Flugzeugherstellung“ hinausgehen und es dem Internet ermöglichen wird, seine Macht während der gesamten Lebensdauer des Flugzeugs auszuüben. Dies kann große Chancen für die Transformation und Modernisierung der traditionellen Fertigungsindustrien bieten.

Codeteil:

Laden des Flugzeugmodells

Zunächst das Wichtigste Was unser Flugzeugmodell ist, wie in früheren Artikeln erwähnt, kapselt HT intern eine Methode ht.Default.loadObj (https://hightopo.com/guide/gu...) zum Laden von OBJ-Dateien:

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';
    } 
});
Nach dem Login kopieren

Um die von obj analysierten Modellinformationen an Grundelemente zu binden, müssen Sie zunächst die Modellregistrierung (https://hightopo.com/guide/gu) im Modellierungshandbuch (https://hightopo.com/guide/gu) aufrufen. ..) ...) Die im Kapitel eingeführte Funktion ht.Default.setShape3dModel(name, model) muss registriert werden, und dann muss das Grundelement nur das Shape3D-Attribut von style auf den registrierten Namen setzen. Natürlich haben wir diese Methode jetzt gekapselt und eine einfachere Methode zum Laden des Modells verwendet, aber das Prinzip des Ladens ist weiterhin erforderlich:

// models/plane.json
{
    "modelType": "obj",
    "obj": "obj/plane.obj",
    "mtl": "obj/plane.mtl"// 要是没有 mtl 文件,则设置为 ""
}
Nach dem Login kopieren

Setzen Sie dann das Shape3d-Attribut des Knotenstils auf diesen JSON: Knoten. s („shape3d“, „models/plane.json“).

Achtung! Unabhängig davon, welche Methode zum Laden des Modells verwendet wird: Wenn eine Textur in der MTL-Datei verwendet wird, muss der Pfad der Textur relativ zum Pfad der Obj-Datei sein.

Der modelMap.propeller im vorherigen Code ist das Propellerobjekt im modelMap-Objekt, das in der OBJ-Datei definiert ist. Sie können versuchen, die modelMap zu drucken, um die Ausgabeergebnisse anzuzeigen.

HTML wird mit industriellem Internet kombiniert, um eine intelligente Flugzeugsteuerung (mit Code) zu realisieren.

Rücklicht wird geladen

finishFunc(modelMap, array, rawS3) in dieser Methode Für Rückrufe Weitere Informationen zur Verarbeitung nach dem Laden finden Sie im HT for Web OBJ-Handbuch (http://hightopo.com/guide/gui...). Wir haben auch eine „rote blinkende Anzeige“ am Heck des Flugzeugs hinzugefügt, die dies nicht tut Im OBJ-Modell „Light“ wird hier ein kombiniertes Modellarray verwendet (ein Array bestehend aus allen Materialien, mit mindestens einem Modell darin). Wir fügen dem Array ein neues Ballmodell hinzu:

// 添加一个指示灯的圆形模型
array.push({
    shape3d: ht.Default.createSmoothSphereModel(),
    t3: [-40, 10, 0],
    s3: [6, 6, 6],
    color: {
        func: function(data){
            return data.a('light') ? 'red': 'black';
        }
    }
});
Nach dem Login kopieren

Das Shape3D wird hier durch HT gekapselt. Ein Attributname, der über die Funktion setShape3dModel(name, model) registriert wird, oder ein registriertes 3D-Modell, das über die Funktion getShape3dModel(name) zurückgegeben wird. Informationen zum Registrieren eines 3D-Modells finden Sie im HT für Web Modeling Manual (http://hightopo.com/guide/gui...).

Der Name des Farbattributs entspricht einem Objekt. Die Definition hier lautet wie folgt: Farbe erhält den Wert direkt in data.setAttr('a'). Es gibt zwei Vorteile: Erstens werden die allgemeinen Attributoperationen von HT nicht verschmutzt, sodass HT diesen Attributtyp speziell für Benutzer zum Speichern von Geschäftsdaten definiert. Zweitens ist dies auch für die Datenbindung sehr praktisch kann verwenden Es ist sehr praktisch, die setAttr-Methode dort aufzurufen, wo die Attribute geändert werden müssen.

Dann verwenden wir ht.Default.setShape3dModel(name, model), um das gerade kombinierte Modellarray als das gewünschte „Ebenen“-Modell zu registrieren:

ht.Default.setShape3dModel('plane', array);
Nach dem Login kopieren

Modellknoten erstellen

Dieses Modell muss nach der Registrierung des Modells aufgerufen werden. Wir können dieses Modell über das Attribut „shape3d“ aufrufen und das Lichtattribut und das Winkelattribut anpassen, die im obigen Code in diesem Modell angezeigt wurden:

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
});
Nach dem Login kopieren

Animation

Da das Flugzeug auch zwei Funktionen hat: Propeller und Anzeigelampe, müssen wir diese beiden Modelle animieren. Sie können HT für Web Animation Manual (http://hightopo.com) überprüfen .com/guide/gui...), die Dauer des Flugzeugflugs, der Blickwinkel des Flugzeugs und der Drehwinkel des entlang der „Route“ fliegenden Flugzeugs werden durch die Ergebnisse der Benutzerauswahl bestimmt die Form, die „Blitz“-Funktion der Heckanzeige usw. Vergessen Sie nicht, dass Sie diese Animation erneut aufrufen und einstellen müssen, wenn das Flugzeug aufhört zu fliegen, wenn Sie möchten, dass es weiterfliegt Licht aufhören zu blinken. Vergessen Sie nicht, die Animation zu starten:

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);
Nach dem Login kopieren

其实最让我们好奇的是描绘的路径跟飞机本身的飞行并没有关系,还有那么多左拐右拐的,要如何做才能做到呢?

绘制飞机轨道

HTML wird mit industriellem Internet kombiniert, um eine intelligente Flugzeugsteuerung (mit Code) zu realisieren.
接下来我们来描绘路径,首先这个路径是由 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);
Nach dem Login kopieren

上面的代码只是向 datamodel 数据模型中添加了一个 polyline 管线而已,不会显示任何东西,要显示“航道”首先就要设置航道所在的点,我们先设置航道的初始点:

points = [{ x: 0, y: 0, e: 0 }];
segments = [1];
Nach dem Login kopieren

这个 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);
Nach dem Login kopieren

我们已经把路径上的点都添加进“航道”中了,接下来要把点都设置到管道上去才会显示在界面上:

polyline.setPoints(points);
polyline.setSegments(segments);
Nach dem Login kopieren

飞机跑道

HTML wird mit industriellem Internet kombiniert, um eine intelligente Flugzeugsteuerung (mit Code) zu realisieren.

“跑道”就比较简单了,只是一个 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);
Nach dem Login kopieren

最后,在界面上添加一个 formPane 表单面板,定义好之后可以直接添加到 body 上,这样就不会跟 graph3dView 有显示的联系了。

表单面板

HTML wird mit industriellem Internet kombiniert, um eine intelligente Flugzeugsteuerung (mit Code) zu realisieren.
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();
            }                               
        }
    }
}
Nach dem Login kopieren

也可以通过设置“id”来记录动态改变的值,然后 formPane 就会通过调用 formPane.v(id) 来获取当前值。

最后

工业互联网(Industrial Internet)的概念最早由通用电气(GE)在 2012 年提出,即让互联网进入产业链的上游,从根本上革新产业。根据飞常准的数据显示,美国已有 78% 的航班提供机上互联服务。在航天航空领域,工业互联网会打破软件、硬件和人员之间的信息壁垒,依靠大数据的分析,让飞机建立自己的声音,表达给飞行员和维修人员飞行员,具体飞行状况如何或者哪里需要维修。工业互联网技术的深入应用,正在改变着民航飞机的使用效率和制造成本。
HTML wird mit industriellem Internet kombiniert, um eine intelligente Flugzeugsteuerung (mit Code) zu realisieren.

HTML wird mit industriellem Internet kombiniert, um eine intelligente Flugzeugsteuerung (mit Code) zu realisieren.

HTML wird mit industriellem Internet kombiniert, um eine intelligente Flugzeugsteuerung (mit Code) zu realisieren.

相关推荐:

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

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

Das obige ist der detaillierte Inhalt vonHTML wird mit industriellem Internet kombiniert, um eine intelligente Flugzeugsteuerung (mit Code) zu realisieren.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage