Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » JavaScript & jQuery » A-Frame macht virtuelle Realitäten lebendig

A-Frame macht virtuelle Realitäten lebendig

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 4 Minuten
  • von Denis Potschien
  • 23. Januar 2016
Bookmarke mich
Share on pocket

Virtuelle Realität spielt eine immer größere Rolle im World Wide Web. JavaScript und moderne Browser machen es mittlerweile grundsätzlich möglich, dreidimensionale Welten zu erschaffen, in denen man sich bewegen kann. Mit dem JavaScript-Framework A-Frame baust du dir auf der Grundlage einer eigenen Auszeichnungssprache schnell solche virtuelle Realitäten.

A-Frame macht virtuelle Realitäten lebendig

A-Frame: JavaScript einbinden und erste 3D-Welt bauen

Zunächst einmal musst du die JavaScript-Datei von A-Frame in deinem HTML-Head einbinden. Die komprimierte Datei ist knapp 700 Kilobyte groß und beinhaltet alles, was du benötigst. Andere Bibliotheken, wie beispielsweise jQuery, sind nicht notwendig.

Anschließend beginnst du innerhalb deines HTML-Bodys eine Szenerie zu erschaffen. Da A-Frame seine eigene Auszeichnungssprache – ähnlich wie HTML – mitbringt, ist das Erstellen deiner ersten 3D-Welt spielend einfach. Zunächst einmal zeichnest du eine neue Szenerie mit dem Element „<a-scene>“ aus. Darin platzierst du beliebige 3D-Objekte wie Quader („<a-cube>“), Kugeln („<a-sphere>“) oder Zylinder („<a-cylinder>“).

<a-scene>
  <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cube position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-cube>
  <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
</a-scene>

Im Beispiel werden in einer Szenerie eine Kugel, ein Quader sowie ein Zylinder platziert. Über Attribute definierst du die Größe, Farbe, Position und Drehung des Objektes. Der Wert für „position“ erwartet drei Werte, um ein Objekt auf der X-, Y-, und Z-Achse im Raum platzieren zu können. „rotation“ erwartet ebenfalls drei Werte, welche die Winkel der Drehung auf den drei Achsen definieren.

aframe_beispiel_einfach
Einfaches Beispiel mit Kugel, Quader und Zylinder

Für die Größe eines Objektes stehen dir je nach Typ unterschiedliche Attribute zur Verfügung. Bei „<a-sphere>“ muss lediglich ein Radius („radius“) angegeben werden. „<a-cube>“ erwartet Angaben für die drei Kantenlängen („width“, „height“ und „depth“). Beim Zylinder gibst du einen Radius, sowie eine Höhe an („radius“ und „height“).

VR mit Smartphone, Tablet und Google Cardboard erleben

Damit der Browser die virtuelle Realität auch darstellen kann, setzt A-Frame seine spezielle Auszeichnungssprache per HTML5-Canvas um. Aus dem A-Frame-Quelltext im Beispiel wird also eine Zeichenfläche, in der das Framework mit den JavaScript-Zeichenmethoden die Szenerie ausgibt.

Wie es sich für eine echte virtuelle Welt gehört, ist die Dreidimensionalität von A-Frame nicht statisch, sondern dynamisch. Auf einem Desktop-Rechner kannst du per Maus die Perspektive der Szenerie verändern. Wirklich interessant wird es allerdings, wenn du dir deine Szenerie mit deinem Smartphone oder Tablet anschaust. Denn A-Frame interpretiert die Orientierung deines Mobilgerätes und verändert analog dazu die Perspektive der Szenerie.

aframe_beispiel_vr_cardboard
Darstellung für Google Cardboard auf einem Smartphone

Für echten 3D-Genuss kannst du auch den VR-Modus in Kombination mit Google-Cardboard nutzen. Schaust du dir eine mit A-Frame erstellte Szenerie mit einem Mobilgerät an, wechselt du über ein Icon in Form einer Brille in den VR-Modus. Dann stellt A-Frame die Szenerie auf einem geteilten Display dar. Du siehst links und rechts zweimal dieselbe Szenerie aus leicht unterschiedlichen Blickwinkeln. Setzt du dein Smartphone in Google Cardboard ein, erlebst du eine echte virtuelle Realität.

Auch mit Oculus Rift funktioniert A-Frame. Hierzu müssen derzeit aber noch experimentelle Versionen von Firefox oder Chrome installiert sein, da die derzeitigen Browser die notwendige Unterstützung von WebVR noch nicht mitliefern. In jedem Fall muss dein Browser WebGL unterstützen, um A-Frame darstellen zu können.

Animationen hinzufügen

Per „<a-animation>“ fügst du einem Objekt auf einfache Weise eine Animation hinzu. Dazu wird „<a-animation>“ als Kindelement jenes Objektes ausgezeichnet, welches animiert werden soll.

<a-cube position="-1 0.5 1" rotation="0 0 0" width="1" height="1" depth="4" color="#4CC3D9">
  <a-animation attribute="rotation" to="0 360 0" dur="10000" fill="forwards" repeat="indefinite"></a-animation>
</a-cube>

Im Beispiel dreht sich ein Quader um 360 Grad auf der Y-Achse. Dazu wird per „attribute“ die Art der Animation definiert und per „to“ das Ziel der Animation. „dur“ gibt die Länge an und „fill“ legt fest, was am Ende der Animation geschehen soll. Der Wert „forwards“ sorgt dafür, dass die Animation nicht wieder auf den Anfang zurückgesetzt wird. Per „repeat“ stellst du die Wiederholungen ein.

Eigene Kameras, Licht, Interaktivität und Materialien

A-Frame kann noch sehr viel mehr, als ich hier vorstelle. Auf Wunsch fügst du zum Beispiel auch eine eigene Kamera und eigenes Licht hinzu. Du hast die Möglichkeit, interaktive Elemente zu erstellen und Materialien hinzuzufügen. Leider ist die Dokumentation von A-Frame noch nicht vollständig. Einige der Möglichkeiten finden sich dort noch nicht wieder.

aframe_beispiel_panorama
360-Grad-Panorama als VR

Auch Bilder und Videos kannst du einbinden. So erstellst du beispielsweise ein 360-Grad-Panorama als virtuelle Realität.

Fazit

A-Frame ist ein interessantes Framework für einfache, aber auch durchaus komplere VR-Welten. Die Unterstützung von Mobilgeräten sowie Oculus Rift oder Google Cardboard ermöglicht erlebbare 3D-Szenerien. Dazu ist die Handhabe von A-Frame denkbar einfach. Während du bei anderen 3D-Frameworks per JavaScript programmieren musst, läuft hier alles sehr einfach über eine eigene Auszeichnungssprache.

Außerdem gibt es zahlreiche einfache und komplexe Beispiele, die dir die Möglichkeiten von A-Frame sehr anschaulich darstellen. A-Frame steht unter der bekannten MIT-Lizenz. Eine private sowie kommerzielle Nutzung ist somit möglich.

(dpe)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Agenturpartner

Homepage & Design Heroes GmbH

Balingen

CAF Webdesign Agentur

Berlin

Critch GmbH – Immobilienkanzlei FREITAG®

München

Carmen Hurst | Webdesign

Bad Homburg

BIZ Digital Marketing

Nürtingen

Alle Agenturpartner

Jobs

Senior Online Marketing Manager und stv. Geschäftsführer

Innsbruck

Texter / Junior Content Marketing Manager

Innsbruck

WordPress Developer – Vollzeit

Remote

Frontend-Entwickler Angular, React

Bonn

Online Marketing Manager

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Google Fonts sind nicht mehr datenschutzkonform. Was nun?

Mit dem Urteil des Landgerichts München vom 20.01.2022 ist nun auch die Verwendung von Google Fonts über die Fonts API nicht mehr datenschutzkonform. Zeit sich nach einer Lösung umzusehen, wie Du dennoch Google Fonts weiterhin einsetzen kannst.

 →   

Dunkel Design – herzlich willkommen auf Dr. Web

Wir freuen uns, dass Moritz Dunkel mit seiner Agentur DNKL.DSGN aus Köln an Bord ist. Moritz Dunkel von Dunkel Design verstärkt unser Agentur-Netzwerk. Inhaltsstarke Seiten

 →   

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.