A web framework for building virtual reality experiences

WebVR Tutorial: Einführung in A-Frame

WebVR ist eine API, die Zugriff auf Ein- und Ausgabefunktionen bietet, die mit -Hardware wie Google Daydream, Oculus Rift, Samsung Gear VR, HTC Vive und Windows Mixed Reality Headsets verbunden sind. Einfach ausgedrückt, können wir damit -Websites erstellen, die wir in einem VR-Headset anzeigen können.

WebVR zielt darauf ab, Dir VR-Erlebnisse zu ermöglichen, die in das Web eingebettet sind, das wir heute kennen und lieben. Es geht explizit nicht darum, einen Browser zu erstellen, den du komplett in VR verwendest (obwohl er in einer solchen Umgebung gut funktionieren könnte).

Sie haben es eilig? Dann speichern Sie diesen Blogartikel von R23 als PDF

Brauchen Sie den Inhalt dieses Artikels “WebVR Tutorial: Einführung in A-Frame” schnell und bequem? Dann speichern Sie ihn doch einfach als PDF!

Angesichts der Vermarktung früher VR-Hardware an Gamer ist natürlich davon auszugehen, dass in erster Linie für die Spieleentwicklung eingesetzt wird. Das ist sicherlich etwas, was wir aufgrund der Geschichte der -API, die eng verwandt ist, erwarten, aber wir werden wahrscheinlich viel mehr Virtual Reality -Inhalte sehen als groß angelegte Spiele.

Wir visualisieren Ideen!

R23 ist Ihre Digitalagentur für Virtual & Augmented Reality. Wir investieren in immersive Technologien wie Augmented Reality und künstliche Intelligenz, die die Grundlage für die Art und Weise sein werden, wie wir in Zukunft online einkaufen. Mit neuen visuellen Entdeckungstools helfen wir Käufer:innen, neue Produkte zu finden, und mit AR-Erlebnissen helfen wir Menschen, Artikel zu visualisieren, bevor sie sie kaufen.
Charakterdesign / Maskottchen

Fotorealistische Visualisierungen und 3D-Animationen lassen sich schnell und kostengünstig erzeugen und in Ihrem Online-Shop veröffentlichen.

VR-Inhalte im Internet werden sich im Großen und Ganzen auf Bereiche erstrecken, die nicht in ein App-Store passen. Einige Beispiele dafür sind:

360°- und 3D- sind Bereiche von großem Interesse. Ein VR-fähiger Videoplayer würde, sobald er VR-Hardware erkennt, einen “View in VR” -Button anzeigen, ähnlich wie die “Fullscreen” -Buttons, die in heutigen Videoplayern vorhanden sind. Wenn der Benutzer auf diese Schaltfläche klickt, wird ein Video im Headset gerendert und reagiert auf natürliche Kopfbewegungen.

Objektvisualisierung

Websites können einfache 3D-Visualisierungen durch WebVR liefern, oft als eine Verbesserung ihrer traditionellen Darstellung. 3D-Modelle, Architekturvisualisierungen und Mapping können wirkungsvoller, leichter verständlich und maßstabsgetreu in VR dargestellt werden.

Homeshopping-Anwendungen (z. B. Matterport) zeigen dies besonders anschaulich. Je nach Geräteausstattung können Standorte vom einfachen Fotokarussell über ein interaktives 3D-Modell auf dem Bildschirm bis hin zur Komplettlösung in VR skaliert werden, so dass der Eindruck entsteht, als wäre man tatsächlich im Haus präsent. Die Möglichkeit, dass dies ein reibungsarmes Erlebnis für den Benutzer wird, ist ein großer Vorteil für Benutzer und Entwickler, da sie nicht zu überzeugen, die Benutzer zu einer schweren (und möglicherweise böswilligen) ausführbaren Datei vor der Hand zu installieren.

Künstlerische Erfahrungen

VR bietet eine interessante Leinwand für Künstler, die die Möglichkeiten eines neuen Mediums erforschen wollen. Künstler können mit einer einzigen Codebasis auch leichter Menschen für den Inhalt gewinnen und die unterschiedlichsten Geräte und Plattformen ansprechen.

Besuch im Virtual-Reality-Museum

Wir gestalten und arbeiten an unserem Museum. Cecropia Solutions entwickelte auf Basis von das ursprüngliche Projekt. Das Virtual-Reality-Museum ist für uns eine Demo um die WebVR-Fähigkeiten zu testen.

Navigation

In dieser Version ist die Hauptnavigation Handbedienung (Vive Stäbe und Oculus Touch), um einen teleportierenden Strahl zu schießen, um anzuprobieren, wo du sein willst.

Für den Desktop sind die herkömmlichen Spielkontrollen verfügbar (WASD, Pfeiltasten und Maus).

Für mobile Plattformen (GearVR und Cardboard) sind Teleport Spots mit einem Gaze Cursor der Weg, um zu den verschiedenen Zielen in der Halle zu springen.

Teste und probiere unseren Virtual Reality – Raum aus https://blog.r23.de/museum/

Was ist A-Frame?

A-Frame ist ein Web-Framework für die Erstellung von Virtual Reality (VR)-Erlebnissen. Ursprünglich von Mozilla entwickelt, ist A-Frame eine einfache, aber leistungsfähige Methode zur Entwicklung von VR-Inhalten. Als unabhängiges Projekt hat sich A-Frame zu einer der größten und einladendsten VR Communities entwickelt.

A-Frame basiert auf HTML und macht den Einstieg einfach. Aber A-Frame ist nicht nur ein 3D-Szenendiagramm oder eine Markup-Sprache, sondern der Kern ist ein leistungsfähiges Entity-Komponente-Framework, das eine deklarative, erweiterbare und kompilierbare Struktur zu three.js bereitstellt.

A-Frame erlaubt die Schaffung dreidimensionaler Welten mittels einer deklarativen Sprache. Objekte werden durch Tags angegeben, ihre Eigenschaften wie Position und Farbe in Attributen. Neben den standardmäßig zur Verfügung stehenden Objekten besteht auch die Möglichkeit, eigene Komponenten zu erstellen oder aus anderen Quellen einzubinden.

A-Frame stellt die so definierten Objekte dann grafisch dar und ermöglicht es dem Benutzer, in der Szene zu navigieren. Im einfachsten Fall wird die Szene einfach am Bildschirm gerendert, über die WebVR-API kann aber in modernen Browsern auch eine Virtual Reality-Brille benutzt werden. Intern setzt A-Frame bei der Darstellung die Bibliothek three.js ein.

Über Manipulationen des DOM kann die Szene auch nachträglich verändert werden. Mit Bildwiederholraten von 90 fps können dabei flüssige Bewegungen dargestellt werden.

<html>
  <head>
    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Das könnte Dich auch interessieren

Wir bieten 3D – Charakterdesign nach deinem Ebenbild in unserem Atelier an. Wir benötigen nur wenige Fotos und einige Maße von dir und wenige Tage später erhältst du von uns dein 3D – Charakter, den Du anschließend in Deinem 3D Projekt wirkungsvoll in Szene setzen kannst.

Shopbetreiber, die das volle Potenzial von VR-Commerce ausschöpfen wollen, brauchen die Produktdaten in 3D. In unserem Fotostudio in Hagen scannen wir deine Produkte für VR-Commerce. Den Service kannst du online buchen.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Ich bin dir für jede Unterstützung dankbar!

Gefällt Ihnen dieser Beitrag? Teilen Sie ihn mit anderen. Sie machen uns damit eine große Freude!

Wie können wir Ihnen helfen?

Wir unterstützen Sie bei der Umsetzung Ihres Augmented Reality (AR) oder Virtual Reality (VR) Projektes! Ob Produktfotografie, 3D-Scan-Service, 3D-Visualisierung oder fertige 3D-Modelle für AR/VR – wir beraten Sie persönlich und unverbindlich.

Wenn Sie ein individuelles Angebot auf Basis Ihrer aktuellen Vorlagen (Fotos, Zeichnungen, Skizzen) wünschen, nutzen Sie einfach unser Anfrageformular.


Beitragsautor R23

3D-Modelle für Metaverse und Echtzeit-Anwendungen: VR, AR und mehr

Als Atelier für Metaverse Inhalte und interaktive Markenerlebnisse bieten wir Ihnen eine breite Palette an 3D-Modellen, die sich perfekt für Echtzeitanwendungen eignen. Ob Sie in eine virtuelle Welt eintauchen wollen (Virtual Reality, VR), virtuelle Objekte in die reale Welt einblenden wollen (Augmented Reality, AR) oder beides kombinieren wollen (Mixed Reality, MR) – unsere Modelle sind für alle Formen von Extended Reality (XR) optimiert. Dank unserer Expertise können Sie wertvolle Entwicklungszeit und -kosten sparen. Nutzen Sie unsere 3D-Modelle als Prototypen für Ihre XR-Erfahrungen oder integrieren Sie sie in Ihr fertiges Projekt. Wir stehen Ihnen gerne mit Rat und Tat zur Seite und sorgen dafür, dass Ihre Markenerlebnisse einzigartig und unvergesslich werden.

3D-Visualisierung
3D-Scan – Dienstleistung

Angebot anfordern


Kommentare

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert