Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » JavaScript & jQuery » A-Frame macht virtuelle Realitäten lebendig

A-Frame macht virtuelle Realitäten lebendig

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Ein Kommentar
Lesedauer: 4 Minuten
  • von Denis Potschien
  • 23. Januar 2016

Inhaltsverzeichnis

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)

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.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Logo von Lausitz Design.

Internetagentur lausitz.design

Schleife

Logo der Knallblaumedia Agentur in Hamburg.

KnallBlauMedia

Hamburg

immoXXL Website-Erstellung für Makler Leverkusen und Köln.

immoXXL – Immonia GmbH

Leverkusen

Sparkman webdesign Frankfurt.

Webdesign Frankfurt | Sparkm4n

Dillenburg

Logo der Berliner Webdesign Agentur Primaline. Zu sehen ist ein grünes Schutzschild mit Stern oben links.

PRIMA LINE

Berlin

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

Eine Antwort zu „A-Frame macht virtuelle Realitäten lebendig“
— was ist Deine Meinung?

  1. Axel sagt:
    23. Januar 2023 um 5:08 Uhr

    Ich wusste zwar, dass es Videos wohl für VR an sich gibt, auch wenn ich keine VR-Brille habe, aber interessant, dass damals schon in Sachen VR und Web was gemacht wurde.

    Natürlich stimmt das Beispielbild in diesem Beitrag mit der Webseite von aframe.io nicht mehr ganz überein.

    Antworten

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.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • (Kostenlose) Services
  • 3D-Visualisierung
  • Allgemein
  • Apps
  • Betriebliches
  • Betriebswirtschaft
  • Bilder & Vektorgrafiken bearbeiten
  • Boilerplates & andere Tools
  • Branding
  • Buchhaltung
  • CMS
  • Content Marketing
  • CSS
  • Datenschutz
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Editoren
  • Essentials
  • Fortbildung
  • Fotografie
  • Freebies
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Icons & Fonts
  • Illustrator
  • IMHO
  • Infografiken
  • Inspiration
  • Interviews
  • IT Services
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Business-News
  • Online-Marketing
  • Performance-Optimierung
  • Photoshop
  • PHP
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Amazon SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • Tutorials
  • UX Design
  • Videoproduktion
  • Virtual Reality
  • VPN
  • Webdesign
  • Website erstellen
  • WooCommerce
  • WordPress
  • WordPress Plugins
  • WordPress Themes
  • (Kostenlose) Services
  • 3D-Visualisierung
  • Allgemein
  • Apps
  • Betriebliches
  • Betriebswirtschaft
  • Bilder & Vektorgrafiken bearbeiten
  • Boilerplates & andere Tools
  • Branding
  • Buchhaltung
  • CMS
  • Content Marketing
  • CSS
  • Datenschutz
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Editoren
  • Essentials
  • Fortbildung
  • Fotografie
  • Freebies
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Icons & Fonts
  • Illustrator
  • IMHO
  • Infografiken
  • Inspiration
  • Interviews
  • IT Services
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Business-News
  • Online-Marketing
  • Performance-Optimierung
  • Photoshop
  • PHP
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Amazon SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • Tutorials
  • UX Design
  • Videoproduktion
  • Virtual Reality
  • VPN
  • Webdesign
  • Website erstellen
  • WooCommerce
  • WordPress
  • WordPress Plugins
  • WordPress Themes

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑