BlogSoftwareentwicklung

A-Frame — 3D-Anwendungen im Browser

Benjamin Krause·21.10.2022

Wolltet ihr auch schon einmal VR, AR oder einfach nur 360°-Content erstellen? Ihr könnt HTML, CSS und JavaScript? Ihr seid nicht gewillt, viel Geld oder gigantische Mengen an Zeit für ein Hobbyprojekt auszugeben? Dann könnte A-Frame die Lösung sein.

Was ist A-Frame?

Kurzgesagt ist A-Frame ein Web-Framework, um 3D-Anwendungen mittels reinem HTML zu kreieren. Um eine Szene zu erstellen, werden A-Frame-spezifische HTML-Tags verwendet, die von A-Frame interpretiert, jedoch von der Standard-Browser-Renderengine ignoriert werden. Auf diesem Weg werden 3D-Modelle, Animationen oder Lichter und Schatten platziert. Wer mehr Interaktion möchte, kann über JavaScript und der Standard-DOM-API die Szene erweitern und verändern.

Was ist A-Frame nicht?

A-Frame ist definitiv keine Klickibunti-Anwendung, mit der alles auf magische Weise funktioniert. Grundlegende Konzepte von HTML, CSS und JavaScript müssen vorhanden sein — es handelt sich lediglich um ein Framework. Wer seine Szene nicht nur mit primitiven Objekten füllen möchte, muss zudem mit gängiger 3D- und Grafiksoftware wie Blender, GIMP und Inkscape umgehen können oder auf Modellbibliotheken zurückgreifen.

Anwendungsbeispiele

Zusammenhängende 360°-Bilder

In einem ersten Anwendungsbeispiel geht es darum, eine zusammenhängende Szene aus 360°-Bildern zu erstellen — nicht nur präsentieren, sondern durch interaktive Inhalte erweitern. Die Idee kam bei einer Wanderung durch den Harz: Wie kann man jemandem, der körperlich nicht in der Lage ist, den Harz zu besuchen, eben diesen präsentieren? In der Anwendung sind mehrere Szenen durch blaue Pfeile verbunden; ein Klick springt in die nächste Szene.

Interaktive Einladungen

Wer keine Lust auf klassische Papiereinladungen hat, kann mit A-Frame interaktive Einladungen bauen, via GitLab Pages bereitstellen und einfach den Link verschicken. Ein Anwendungsbeispiel zeigt eine Einladung zu einem Glühweinabend — auf der Flasche im Szenenmittelpunkt sind alle wichtigen Informationen zu finden.

Für wen ist A-Frame?

A-Frame spricht viele Nutzergruppen an: Einsteiger in die digitale Welt und kreativschaffende Personen haben es besonders leicht, Inhalte zu kreieren und auszuliefern. Aber auch erfahrene Entwickler profitieren — ganze Anwendungen oder Prototypen lassen sich mit sehr geringem Zeitaufwand erstellen. Engines wie Unity oder Godot bieten zwar mehr Features, sind jedoch nicht so einfach zu bedienen.