So verwenden Sie WebGL von H5, um Roaming-Animationen in einem virtuellen 3D-Computerraum zu implementieren

Dieses Mal zeige ich Ihnen, wie Sie das WebGL von H5 verwenden, um die Roaming-Animation des virtuellen 3D-Computerraums zu realisieren.Animation Welche Vorsichtsmaßnahmen gelten für die Verwendung von H5? Roaming-Animation des virtuellen 3D-Computerraums, das Folgende ist ein praktischer Fall, schauen wir uns das an.

Die Verwendung von First-Person in 3D sollte sich auf die Verwendung von First-Person in Shootern beziehen. First-Person-Shooter (FPS) sind eine Art Videospiel, das auf der First-Person-Perspektive basiert und sich um die Ego-Perspektive dreht Waffen und andere Waffen; das heißt, die Spieler erleben die Action durch die Augen des Protagonisten. Seit den Anfängen des Genres stellten fortschrittliche 3D- und Pseudo-3D-Grafiken die Hardware-Entwicklung vor Herausforderungen und Multiplayer-Spiele sind unverzichtbar geworden.

Heutzutage verwenden Museen oder Unternehmen häufig 3D-Animationen, um Werbevideos usw. zu erstellen. Der größte Vorteil der Interpretation von 3D-Animationen besteht darin, dass sie den Menschen ein echtes Gefühl in Bezug auf Inhalt und Form vermitteln. Es ist intuitiver als grafische Arbeiten und realistischer als 2D-Animationen, sodass es den Zuschauern das Gefühl vermittelt, sich in der Werbeumgebung zu befinden, was die Überzeugungskraft der Werbung erheblich steigert. Die Entwicklung der 3D-Technologie fordert sogar die Unterscheidungsfähigkeit des Publikums heraus und führt dazu, dass das Urteilsvermögen des Publikums zwischen virtueller und realer Welt schwankt.
Darüber hinaus bietet die Anwendung von 3D-Spezialeffekten einen größeren Denkraum für Kreativität, wird zu einer zuverlässigen Garantie für kreative Umsetzung und bereichert die Form und den Stil der Kreativität. Je nach Leistungsattraktivität des Werbethemas kann eine traumhafte und magische Atmosphäre geschaffen werden, die das Publikum anregt und beeindruckt und so den Zweck der Kommunikation mit dem Publikum erreicht.
Das 3D-animierte Werbevideo kombiniert 3D-Animationen, Spezialeffektaufnahmen, Unternehmensvideos, Fotos, Zukunftsaussichten und andere Inhalte durch Postproduktionssynthese, Synchronisation und Erzählung zu einer intuitiven, lebendigen und beliebten, hochwertigen Unternehmenswerbung Menschen auf dieser Ebene haben einen positiven, positiven und guten Eindruck vom Unternehmen und schaffen dadurch Wohlwollen und Vertrauen in das Unternehmen sowie Vertrauen in die Produkte oder Dienstleistungen des Unternehmens.

Die Tatsache, dass sich 3D jetzt so schnell entwickelt, ist dem Streben der Menschheit nach „Realität“ zu verdanken. Daher ist das Erlernen des guten Umgangs mit 3D ein wesentlicher Bestandteil des zukünftigen Erfolgs.

Die Idee des Beispiels in diesem Artikel besteht darin, einen Computerraum für einen Besuch zu betreten. Der Vorgang des Öffnens der Tür kann nicht dynamischer sein, gepaart mit entsprechenden Drehungen, im Grunde wird die Wirkung von Menschen vollständig simuliert Besuch eines Computerraums. Ein weiterer Vorteil: Wenn Sie es Ihrem Chef vorführen möchten, ohne es bedienen zu müssen, wird Ihr Chef mit diesem coolen Effekt auf jeden Fall sehr zufrieden sein!

Die Schaltflächen „Zurücksetzen“ und „Start“ auf der Benutzeroberfläche sind Schaltflächen, die direkt dem Körper hinzugefügt werden, und Klickereignisse werden diesen beiden Schaltflächen hinzugefügt:

<div></div><div></div>

Gesamte Szene wird erstellt Aus 3D-Komponenten, die von HT gekapselt wurden, ist eine gewisse Menge Code erforderlich. Zur Vereinfachung habe ich die von HT gekapselte Klasse ht.JSONSerializer verwendet, um die Szene nur in JSON zu serialisieren Um es klarer zu machen, möchte ich hier ein Beispiel geben, vorausgesetzt, die 3D-Szene wurde erstellt:

dm = new ht.DataModel();g3d = new ht.graph3d.Graph3dView(dm);//.......构建好场景dm.serialize();//可以填入number参数，作为空格缩进值

Nachdem wir die Umgebung eingerichtet haben, konvertieren Sie sie in JSON Die Datei ist im Code schwer zu steuern. In diesem Fall deserialisieren wir die DataModel-DatenModell. Die Funktion dieser Funktion besteht darin, das JSON-Format in ein Objekt zu konvertieren Das deserialisierte Objekt wird an das DataModel-Datenmodell übergeben. Weitere Informationen finden Sie im Handbuch „HT für Web-Serialisierung“:

var g3d = window.g3d = new ht.graph3d.Graph3dView(),   
dataModel = g3d.dm(),   
view = g3d.getView(),   
path = null;g3d.setMovableFunc(function(data) {    return false;});
g3d.setVisibleFunc(function(data) {   
if (data.getName() === "path") {      
 return false;   
}   
return true;});
g3d.setEye([523, 5600, 8165]);g3d.setFar(60000);dataModel.deserialize(json);

Wir müssen derzeit die „Tür“ im Szenario bedienen und die Route, die wir verwenden werden „Pfad“ nehmen, das DataModel-Datenmodell durchlaufen und diese beiden Daten erhalten:

for (var i = 0; i < dataModel.size(); i++) {   
var data = dataModel.getDatas().get(i);  
 if (data.getName() === "门")
{//json中设置的名称      
window.door = data;   
}   
if (data.getName() === "path")
{       
path = data;   
}   
if (window.door && path)
{//获取到door 和 path 的data之后就跳出循环       
break;  
 }}

In diesem Beispiel gibt es einfach vier Aktionen: „Zurücksetzen“, um zum Ursprung zurückzukehren, „Aktion starten“, „zu „Vorwärts bewegen“, „Stopp“. Klicken Sie auf die Schaltfläche „Start“ und führen Sie nur eine Aktion aus, die Aktion „Tür öffnen“. Rufen Sie nach Abschluss der Aktion die Funktion „Vorwärts“ auf, um fortzufahren:

function startAnim() {
    
if (window.isAnimationRunning)
{       
return;  
 }   
reset();   
window.isAnimationRunning = true;//动画是否正在进行    ht.Default.startAnim({      
 frames: 30, // 动画帧数，默认采用`ht.Default.animFrames`。       
interval: 20, // 动画帧间隔，默认采用`ht.Default.animInterval`。          
finishFunc: function() {// 动画结束后调用的函数。           
forward();       
},        
action: function(t){ // action函数必须提供，实现动画过程中的属性变化。           
door.setRotationY(-120 * Math.PI / 180 * t);       
}   
});
}

Die Funktion „Zurücksetzen“ hier ist die Funktion des „Zurücksetzens“ auf den ursprünglichen Punkt. Wir verwenden diese Funktion, um alle Änderungen an der ursprünglichen Position wiederherzustellen, einschließlich der Position der „Tür“:

function reset()
{   
if (window.isAnimationRunning)
{       
return;   
}   
g3d.setCenter([0,0,0]);   
g3d.setEye([523, 5600, 8165]);    window.forwardIndex = 0;  
 door.setRotationY(0);}

Um sich definitiv zu „bewegen“ Der „Pfad“, auf dem wir gehen müssen, also der „Pfad“, den wir gerade erhalten haben, erhält alle Elemente im „Pfad“ über window.points = path.getPoints()._as; und initialisiert window.forwardIndex = 0; durch Steuern des „Pfads“, um das Auge und die Mitte in der 3D-Szene festzulegen, um einen Effekt zu erzeugen, der besagt, dass wir die erste Person sind

var point1 = points[forwardIndex],   
 point2 = points[forwardIndex + 1];var distanceX = (point2.x - point1.x),    
distanceY = (point2.y - point1.y),    
distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY)-200;//两点之间的距离通过三角形勾股定理计算 怕碰墙所以-200g3d.setEye([point1.x, 1600, point1.y]);//眼睛g3d.setCenter([point2.x, 1600, point2.y]);//我

Die 3D-Komponente in HT verfügt über eine walk(step, anim, firstPersonMode)-Methode. Diese Funktion ändert gleichzeitig die Positionen von Auge und Mittelpunkt, d. h. Auge und Mittelpunkt bewegen sich gleichzeitig um den gleichen Versatz in der durch die beiden Punkte festgelegten Vektorrichtung. Schritt ist der Offset-Vektorlängenwert. Wenn der Parameter firstPersonMode leer ist, wird standardmäßig der aktuelle Wert von Graph3dView#isFirstPersonMode() verwendet. Wenn die Walk-Operation für den First-Person-Modus aufgerufen wird, berücksichtigt diese Funktion die Grenzbeschränkungen von Graph3dView#getBoundaries().

g3d.walk(distance, {   
frames: 50,   
interval: 30,   
easing: function(t) {return t; },   
finishFunc: function() {       
forwardIndex += 1;       
if (points.length - 2 > forwardIndex) {//points.length = 5            g3d.setCenter([point2.x, 1600, point2.y]);//把结束点变成起始点           
g3d.rotate(Math.PI / 2, 0, {              
 frames: 30,             
  interval: 30,              
 easing: function(t) {return t;},                finishFunc:function() { forward();}          
 });     
  }
else
{           
var lastPoint = points[points.length  - 1];//json 中path的points 的最后一个点          
 g3d.setCenter([lastPoint.x, 1400, lastPoint.y]);           
g3d.rotate(-Math.PI / 2, 0,
{              
 frames: 30,              
 interval: 30,              
 finishFunc: function()
{                   
window.isAnimationRunning = false;              
 }          
 });      
 }   
}});

不管“path”的点有多少个，这个判断语句还是能运作，只在最后一个点是跳出 finishFunc 动画结束后调用的函数，并将 window.isAnimationRunning 值设为 false 停止 startAnim 函数。如果不是最后一个点，用户“旋转”之后，回调 forward 函数。至此，全部代码解释完毕，很短的代码量，却做出了这么大的工程！

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

手机端怎样用rem+scss做适配

canvas如何实现github404动态

Das obige ist der detaillierte Inhalt vonSo verwenden Sie WebGL von H5, um Roaming-Animationen in einem virtuellen 3D-Computerraum zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!