Der Einsatz von Egoperspektive in 3D bezieht sich auf die Verwendung von Egoperspektive in Schießspielen. Egoshooter (FPS) sind eine Art Videospiel, das auf der Egoperspektive basiert und sich auf Waffen und andere Waffen konzentriert. Der Spieler durchläuft das Geschehen 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.
Ein Screenshot von Doom, einem der bahnbrechenden Spiele des Genres, der die typische Perspektive eines Ego-Shooters zeigt
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 die 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, um ein intuitives, lebendiges und beliebtes, hochwertiges Unternehmenswerbevideo zu schaffen, das es Menschen ermöglicht verschiedene Ebenen der Gesellschaft, um einen positiven, positiven und guten Eindruck auf das Unternehmen zu hinterlassen und so Wohlwollen und Vertrauen in das Unternehmen aufzubauen und Vertrauen in die Produkte oder Dienstleistungen des Unternehmens zu schaffen.
Die rasante Entwicklung von 3D ist heute dem Streben der Menschheit nach der Realität zu verdanken, daher ist der gute Umgang mit 3D ein unverzichtbarer Bestandteil für den zukünftigen Erfolg.
Die Idee des Beispiels in diesem Artikel besteht darin, einen Computerraum zu besuchen. Der Vorgang des Öffnens der Tür kann nicht dynamischer sein, gepaart mit entsprechenden Drehungen, im Grunde wird die Wirkung von Personen, die den Computerraum besuchen, vollständig simuliert. 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 sehr zufrieden sein!
http://www.hightopo.com/demo/room-walkthrough/index.html
Die Schaltflächen „Zurücksetzen“ und „Start“ auf der Benutzeroberfläche sind Schaltflächen, die direkt zum Körper hinzugefügt werden, und Klickereignisse werden diesen beiden Schaltflächen hinzugefügt:
<div></div><div></div>
Die gesamte Szene besteht aus HT-gekapselten 3D-Komponenten. Der Aufbau einer so großen Szene erfordert eine gewisse Menge an Code. Der Einfachheit halber habe ich die Szene separat herausgenommen und die HT-gekapselte ht.JSONSerializer-Klasse verwendet, um die Szene in JSON zu serialisieren. Im Code wird nur die generierte JSON-Datei eingeführt. Zur Verdeutlichung gebe ich hier ein Beispiel unter der Annahme, dass die 3D-Szene erstellt wurde:
dm = new ht.DataModel();g3d = new ht.graph3d.Graph3dView(dm);//....Konstruieren Sie die Szene dm.serialize();//Sie können den Zahlenparameter als Leerzeichen-Abkürzungswert eingeben hinzugefügt
Nachdem wir die Umgebung eingerichtet und in eine JSON-Datei konvertiert haben, ist es schwierig, den Code zu steuern. In diesem Fall deserialisieren wir das DataModel-Datenmodell. Die Funktion dieser Funktion besteht darin, das JSON-Format in ein Objekt zu konvertieren und deserialisieren. Das Objekt wird an das DataModel-Datenmodell übergeben. Weitere Informationen finden Sie im HT-Handbuch für die 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 in der Szene und die Route, die wir nehmen werden, bedienen, 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() === gate) {//In json gesetzt Der Name von window.door = data; } if (data.getName() === path) { path = data } if (window.door && path) {//Tür und Pfad abrufen Nach den Daten aus der Schleife ausbrechen }}Vereinfacht gesagt gibt es in diesem Beispiel nur vier Aktionen: Zurücksetzen auf den ursprünglichen Punkt, Aktion starten, Vorwärtsbewegen und Stoppen. Klicken Sie auf die Startschaltfläche. In der Startaktion haben wir nur eine Aktion ausgeführt, die Türöffnungsaktion. Nachdem die Aktion abgeschlossen ist, rufen wir die Vorwärtsfunktion auf, um fortzufahren:
function startAnimation() { if (window.isAnimationRunning) { return; } reset(); Frames, standardmäßig verwendet `ht.Default.animFrames`．interval: 20, //Das Animations-Frame-Intervall verwendet standardmäßig `ht.Default.animInterval`. function() {// Die nach dem Ende der Animation aufgerufene Funktion forward(); }, action: function(t){ // Die Aktionsfunktion muss bereitgestellt werden, um die Attributänderungen während der Animation zu implementieren * Math. PI / 180 * t);}Die Reset-Funktion ist hier die Funktion zum Zurücksetzen auf den ursprünglichen Punkt. Wir verwenden diese Funktion, um alle Änderungen an der Ausgangsposition, einschließlich der Position der Tür, wiederherzustellen:
function reset() { if (window.isAnimationRunning) { return; g3d.setCenter([523, 5600, 8165]); window.forwardIndex = 0; (0);}Um sich zu bewegen, benötigen Sie auf jeden Fall einen Pfad, den wir gerade durch window.points = path.getPoints()._as; erhalten haben, und initialisieren window.forwardIndex = 0; Setzen Sie das Auge und die Mitte in der 3D-Szene an zwei Punkten, um den Effekt zu erzielen, dass wir die erste Person sind:
var Punkt1 = Punkte[ForwardIndex], Punkt2 = Punkte[ForwardIndex + 1];Var DistanceX = (Point2.x - Point1.x), DistanceY = (Point2.y - Point1.y), Distance = Math.sqrt(DistanceX * AbstandX + AbstandY * distanceY)-200;//Der Abstand zwischen zwei Punkten wird durch den Dreieckssatz des Pythagoras berechnet. Ich habe Angst, gegen die Wand zu stoßen, also -200g3d.setEye([point1.x, 1600, point1.y]);//Eye g3d.setCenter([point2 .x, 1600, point2.y]);//I
Die 3D-Komponente in HT verfügt über eine walk(step, anim, firstPersonMode)-Methode. Diese Funktion ändert die Positionen von Auge und Mittelpunkt gleichzeitig zwei Punkte gleichzeitig. 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]);//Ändere den Endpunkt zum Startpunkt g3d.rotate(Math.PI / 2, 0, { Frames: 30, Intervall: 30, Easing: function(t) {return t;}, finishFunc : function() { forward();} }); else { var lastPoint = points[points.length - 1];//points of path in json Der letzte Punkt g3d.setCenter([lastPoint.x, 1400, lastPoint.y]); g3d.rotate(-Math.PI / 2, 0, { Frames: 30, Intervall: 30, FinishFunc: Function() { Fenster . isAnimationRunning = false; } }});Unabhängig davon, wie viele Punkte sich im Pfad befinden, kann diese Beurteilungsaussage immer noch funktionieren. Der letzte Punkt besteht darin, aus der Funktion zu springen, die nach dem Ende der FinishFunc-Animation aufgerufen wird, und den Wert von window.isAnimationRunning auf „false“ zu setzen, um die Funktion „StartAnim“ zu stoppen . Wenn es sich nicht um den letzten Punkt handelt, wird nach der Drehung durch den Benutzer die Vorwärtsfunktion zurückgerufen. An dieser Stelle wurden alle Codes erklärt. Ein so großes Projekt wurde mit einer sehr kurzen Codemenge durchgeführt!
ZusammenfassenDas Obige ist die vom Herausgeber eingeführte klassische 3D-Computerraum-Roaming-Animation. Ich hoffe, sie wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!