Erstellen von WebVR-Erlebnissen mit A-Frame

WebVR ist eine erstaunliche Möglichkeit, immersive 3D-Virtual-Reality-Erlebnisse im Browser zu erstellen. Es handelt sich um eine experimentelle Spezifikation von Javascript-APIs, die von vielen Unterstützern und Leuten vorangetrieben wird, wobei Mozilla einen großen Anteil daran hat. Da immer mehr VR-Headsets auf den Markt kommen und weitere in Sicht sind, ist jetzt ein guter Zeitpunkt, um zu experimentieren und zu sehen, welche großartigen Dinge Sie mit WebVR erstellen können. Das offene Web entwickelt sich zu einer spannenden Brutstätte VR-Erlebnisseeinschließlich jenseitige Spiele, Lackieranwendungen Und immersive Erlebnisse. Wer weiß, welche anderen Erlebnisse Menschen schaffen können, wenn die WebVR-Technologie ausgereifter wird und VR-Geräte immer zugänglicher werden?

Was ist A-Frame?

Nun, wie ich bereits erwähnt habe, ist Mozilla derzeit eine große treibende Kraft bei WebVR und sie haben bei der Entwicklung mitgeholfen Ein Rahmen, ein Web-Framework zum Erstellen von Virtual-Reality-Erlebnissen. Seitdem hat es sich zu einem der größten und aufregendsten Open-Source-Projekte entwickelt und wächst und entwickelt sich schnell weiter. A-Frame ist eines der einfachsten Frameworks, mit denen ich je arbeiten durfte, und dennoch sind die Dinge, die man damit erstellen kann, erstaunlich. Der Einstieg ist einfach, leicht zu verstehen und dennoch äußerst wirkungsvoll. In A-Frames eigenen Worten:

Warum sollte ich WebVR-Inhalte erstellen?

Um eines klarzustellen: WebVR und A-Frame sind immer noch nicht überall nutzbar. Diese Technologie schreitet schnell voran, ist aber noch ziemlich experimentell. Außerdem wird WebVR derzeit (zumindest nicht für eine Weile) die Art und Weise, wie wir Websites erstellen, nicht ersetzen. Ich gehe davon aus, dass 2D-Ansichten mit normalen Monitoren und Bildschirmen noch lange Zeit die dominierende Art sein werden, Inhalte zu konsumieren. Daher denke ich, dass der Hauptgrund für die Erstellung von WebVR-Inhalten der Spaß ist. Es ist eine neue und aufregende Technologie und wir können damit wirklich, wirklich coole Dinge machen. Einige dieser Projekte könnten zu Kundenprojekten werden, ein Museum könnte Sie damit beauftragen, einen virtuellen Rundgang für sie zu erstellen, oder ein Spiel könnte erfolgreich sein und Sie könnten Geld dafür bekommen. Aber im Wesentlichen sollten wir Spaß haben und spannende Dinge mit WebVR und A-Frame schaffen.

Lass uns etwas machen

Meiner Meinung nach ist der beste Weg, sich für ein Framework wie A-Frame zu begeistern, darin, etwas anzupacken und zu bauen. Wir werden eine ziemlich einfache Virtual-Reality-Kunstgalerie erstellen und Ihnen gleichzeitig einige der Kernfunktionen von A-Frame vorstellen.

Erste Schritte

Das Wichtigste zuerst: Wir benötigen einen lokalen Server. Wenn Sie bereits eine Möglichkeit haben, dies zu tun, großartig. Wenn nicht, empfehle ich die Einrichtung eines Knotenservers mit http-Server. Ok, wenn Sie einen lokalen Server haben, tauchen wir in A-Frame ein. Wir beginnen mit einem einfachen HTML-Dokument namens index.html und laden Sie die A-Frame-Bibliothek in den Kopf des Dokuments. A-Frame sollte in den Kopf geladen werden, damit es bereit ist, bevor die benutzerdefinierten Elemente geladen werden, die wir hinzufügen möchten. Nachdem wir A-Frame geladen haben, bereiten wir das HTML-Dokument für eine A-Frame-Szene vor. A-Frame basiert auf HTML und verwendet benutzerdefinierte Elemente, um einen Großteil der Komplexität zu abstrahieren. Platzieren wir ein in das Dokument ein. Alle unsere A-Frame-Komponenten werden innerhalb dieses A-Scene-Tags hinzugefügt, sodass dies unsere übergeordnete Komponente wird. Dies ist die gesamte geleistete Strukturarbeit. Ich weiß richtig? Super einfach. Wir haben noch keine Objekte in der Szene, daher wird es nur ein leerer Bildschirm sein, aber wir können die Beispielobjekte aus dem A-Frame-Tutorial schnell hinzufügen. Wow. Ok, vielleicht nicht ganz großartig, da es nur ein paar Formen sind, aber hey, in ein paar Zeilen werden einige 3D-Objekte in WebVR geladen. Als nächstes beginnen wir mit der Erstellung unserer Virtual Reality Art Gallery.

Google-Blöcke ist eine Anwendung zum Erstellen von 3D-Modellen in VR, die an sich schon großartig ist. In der Galerie teilen Menschen ihre Kreationen und wir werden das Modell „Kleine Galerie“ herunterladen. Gehen Sie zum Google Blocks-Seite für dieses Modell und klicken Sie auf Download. Dadurch wird ein Ordner mit zwei darin enthaltenen Dateien heruntergeladen. A model.obj und ein Materialien.mtl. Platzieren Sie diese beiden Dateien in einem Ordner namens „Galerie“ und legen Sie diesen Ordner neben Ihrem index.html Datei. Wir benötigen beide Dateien, um das Modell korrekt darzustellen, und fügen sie als Nächstes in A-Frame ein.

Ihr Projekt sollte derzeit wie folgt aussehen: index.html gallery/model.obj gallery/materials.mtl

Erstellen eines VR-Galerieraums

Jetzt laden wir das heruntergeladene Modell in unser Projekt. A-Frame verfügt über einen integrierten Vermögensverwaltungssystem, wodurch unsere Assets vorgeladen und zwischengespeichert werden. Dies ist eine großartige Funktion, die einen wirklich wichtigen Schritt abstrahiert und unser Leben viel einfacher macht. Laden wir unser Objekt und unser Material in den Asset Loader: Die benötigt ein id-Attribut, mit dem wir jedes Asset ansprechen, und ein src-Attribut, mit dem wir die Dateien laden. Jetzt können wir dieses Objekt mithilfe des Entity-Elements zur Szene hinzufügen. Das Entity-Element ist eines der Kernelemente in A-Frame und Sie werden es wahrscheinlich häufig verwenden. Da wir es als Platzhalter für unser Objekt verwenden, müssen wir das Objekt und das Material tatsächlich hineinladen. Wenn Sie Ihre Seite aktualisieren, sollten Sie hoffentlich das Modell in der Mitte des Bildschirms sehen. Die Positionierung wird wahrscheinlich nicht funktionieren, aber Sie sollten sich umschauen können. Lassen Sie uns nun die Positionierung korrigieren, indem wir manuell ein Kameraelement hinzufügen und positionieren. Wie Sie sehen, ist das Kameraelement tatsächlich eine Kamerakomponente, die an ein Entitätselement angehängt ist, und wir können die Möglichkeit hinzufügen, mit dem Look-Element umzusehen. steuert Komponente. Jetzt haben wir das Kameraelement hinzugefügt und können es positionieren. Die Positionierung erfordert drei Werte: X, Y und Z, und wir beginnen damit, für jeden dieser Werte den Standardwert 0 festzulegen. Wie Sie wahrscheinlich sofort erkennen können, wird der Versuch, einen X-, Y- und Z-Wert nur im Code zu positionieren, erfolgreich sein etwas knifflig und ein Rezept für Kopfschmerzen. Glücklicherweise haben wir Zugriff auf einen fantastischen A-Frame-Inspektor, der Sie bei der Arbeit an Ihren VR-Erlebnissen unterstützt. Sie können den A-Frame-Inspektor mit öffnen + + i.

Wir können auf die Kamera in der Liste links klicken und die Position der Kamera entweder mit den Pfeilen oder den Eigenschaften im rechten Menü ermitteln. Spielen Sie mit dem Inspektor herum und sehen Sie, was Sie damit machen können. Durch Ändern der Eigenschaften und Experimentieren können Sie viel lernen. Dies ist eine der besten Möglichkeiten, etwas über die Positionierung im 3D-Raum zu lernen.

Am Ende möchten wir eine Position erreichen, bei der die Kamera im Raum zentriert und leicht angehoben ist, sodass sie sich auf Kopfhöhe befindet. Außerdem drehen wir die Kamera zu Beginn so, dass sie aus dem Fenster zeigt.

Hinzufügen einer Willkommensnachricht

Um der VR-Galerie eine etwas einladendere Atmosphäre zu verleihen, fügen wir eine Willkommensnachricht hinzu Die Textkomponente von A-Frame. Das Hinzufügen von Text ist so einfach wie die Eingabe eines Werts in die Textkomponente, es gibt jedoch auch viele zusätzliche Werte, die geändert werden können. Wir verfügen wie gewohnt über die Positions- und Rotationsattribute sowie einige Textanpassungsoptionen wie Schriftart, Ausrichtung und Farbe. Wir haben auch einen angerufen Seite. Side teilt A-Frame tatsächlich mit, welche Seite des Textes gerendert werden soll. Dies ist hilfreich, wenn Sie sich in Ihrer Szene bewegen können und keinen umgekehrten Text sehen möchten. Wir freuen uns, dass es auf beiden Seiten sichtbar ist. Der Text erscheint also direkt vor dem Fenster, aber ich fühle mich immer noch nicht willkommen. Fügen wir etwas Animation hinzu, damit es die Aufmerksamkeit auf sich zieht und die Szene interessanter macht.

Animieren unserer Willkommensnachricht

A-Frame verfügt über eine leistungsstarke Animationskomponente, die an andere Komponenten angehängt werden kann. Wir befestigen es, indem wir es innerhalb des Elements verschachteln, das wir animieren möchten. Dies ist eine wirklich leistungsstarke Funktion, die weit über reine Animationen hinausgeht. Auf diese Weise können wir mehrere Objekte gruppieren. Als Beispiel dafür, wie dies verwendet werden könnte, stellen Sie sich ein Heads-up-Display in einem Spiel vor oder die Erde auf einer Umlaufbahn um die Sonne, während der Mond folgt und sich um die Erde dreht. Wir werden es in diesem Tutorial einfach halten und nur den Text animieren. Wir müssen eine Eigenschaft auswählen, die wir animieren möchten, und diese als festlegen Attribut Wert. Wir lassen unseren Text auf und ab hüpfen, damit wir die Position bearbeiten können. Als nächstes müssen wir der Animation mitteilen, wohin diese Komponente animiert werden soll – wir möchten nur, dass sie sich leicht nach oben bewegt, also sollten wir den Positionswert der übergeordneten Komponente kopieren und anpassen Y Wert. Wir können auch die Beschleunigung und die Dauer sowie festlegen, ob und wie die Schleife wiederholt wird. Wir werden unsere Animation auf und ab hüpfen lassen, indem wir sie endlos wiederholen und dabei jedes Mal die Richtung wechseln. Da sind wir habe es. Eine nette Willkommensnachricht, die auf und ab hüpft. Hier ist der vollständige Code: < a-asset-item id="gallery-mtl" src="/gallery/materials.mtl">