A-Frame wurde von Mozilla entwickelt und basiert auf HTML. Das ermöglicht uns die einfache Erstellung von 3D-Inhalten, ohne dass tiefgreifende Programmierkenntnisse erforderlich sind.
Mit A-Frame kannst du mit einfachen HTML-Tags komplexe 3D-Umgebungen und interaktive VR-Erlebnisse gestalten.
A-Frame bietet zahlreiche Vorteile: Es ist benutzerfreundlich, relativ einfach zu erlernen, ermöglicht schnelle Produktvisualisierungen und ist mit gängigen 3D-Formaten kompatibel. Damit können deine Projekte effizient gestaltet und präsentiert werden.
A-Frame ist relativ einfach zu erlernen und anzuwenden, vor allem wenn man sich mit Grundlagen in HTML/ CSS bereits gut auskennt.
Mit A-Frame können statische Architekturvisualisierungen in dynamische, interaktive Präsentationen verwandelt werden. Deine Kunden und Stakeholder können virtuell durch die Räume gehen oder das 3D-Modell aus verschiedenen Blickwinkeln interaktiv betrachten.
Durch die Präsentation von Entwürfen in WebXR können deine Kunden direkt in die 3D-Modelle eintauchen und sofortiges Feedback geben. Dies fördert einen effizienteren Designprozess und führt zu besseren Ergebnissen.
A-Frame ermöglicht die Zusammenarbeit mehrerer Personen an einem WebXR-Projekt in Echtzeit. Das erleichtert die gemeinsame Arbeit an virtuellen Touren, 3D Modellen, sowie Mockups und die sofortige Umsetzung von Änderungen.
Architekturvisualisierungen werden durch virtuelle Rundgänge lebendig. Mit Aframe können 3D-Modelle als begehbare Rundgänge erstellt werden, die es Nutzern ermöglichen, durch virtuelle Räume zu gehen. Dies bietet dir beispielsweise als Architekt die Möglichkeit, Entwürfe in lebensechter Größe zu präsentieren und Kunden so ein immersives Erlebnis zu bieten. Solche Rundgänge können auch als virtuelle Touren gestaltet werden, die mehrere aufeinanderfolgende Szenarien beinhalten, um ein umfassenderes Bild eines Projekts zu vermitteln. Dies kann besonders nützlich für die Präsentation von mehrere Räumen sein.
Eine nächste Möglichkeit der Architekturvisualisierung ist der interaktive 3D Model Viewer. Dieser ermöglicht es Nutzern, 3D-Modelle aus verschiedenen Perspektiven zu betrachten und zu manipulieren. Auch wenn diese Art von Anwendung ladeintensiver ist, bietet sie deinen Besuchern beeindruckende visuelle Effekte und spannende Interaktivität.
Nutzer können durch einfache Mausbewegungen oder Touch-Gesten Modelle drehen, zoomen und Details aus verschiedenen Blickwinkeln betrachten. Nutzer können durch einfache Mausbewegungen oder Touch-Gesten Modelle drehen, zoomen und Details aus verschiedenen Blickwinkeln betrachten. Solche Viewer sind ideal für die Produktvisualisierungen.
Falls du diese Art von Produktvisualisierung verwenden willst, solltest du ggf. überlegen das WebXR Erlebnis auf einer seperaten Unterseite deiner Website auszulagern. Damit bleibt die Anwendung stabil und beeinflusst nicht den restlichen Content auf deiner Website.
Eine weitere inspirierende Anwendung ist die Erstellung einer VR-Szene mit einem 360-Grad-Panorama als Hintergrund. In diesem Anwendungsfall lassen sich einfache VR-Szenen mit Low Poly Modellen und einem Panorama Hintergrund ermöglichen. Modelle mit geringer Polygonanzahl sind in Aframe grundsätzlich empfehlenswert, damit Ladezeiten reduziert werden und die Perfomance deiner Website stabil bleibt.
Diese Technik ist ideal für die Darstellung von Architekturszenarien wie beispielsweise Stadtansichten oder Umgebungen. Mittels Projektion von Bildern der Stadt auf Planes kann eine realistische, jedoch performante Darstellung ermöglicht werden. Diese Methode eignet sich hervorragend für immersives Storytelling und die Erstellung von 360-Grad-Touren.
Alles, was du brauchst, ist ein Webbrowser, einen Texteditor wie glitch.com und ein einfaches 3D Modell. Falls du kein eigenes 3D-Modelle zur Hand hast, kannst du auf vielen bekannten Plattformen herunterladen. Suche dazu am besten nach Low-Poly Modellen.
Alternativ kannst Du auch ein Bild einfügen, 2D Aufsteller oder planare Mockups in Aframe darstellen.
Stelle sicher, dass dein 3D-Modell im passenden Format vorliegt. Aframe unterstützt mehrere Formate, wobei .glTF und .glb am weitesten verbreitet und empfohlen sind.
Das Modell sollte außerdem
nicht zu groß sein, idealerweise zwischen
20-30 MB,
(maximal 50 MB) um schnelle Ladezeiten zu gewährleisten. Überprüfe dein Modell auf unnötige Details und reduziere, falls erforderlich die Dateigröße, oder Texturen. - wie du das anstellen kannst, siehst du
hier.
Dein 3D-Modell kannst du zum Beispiel mit blender reduzieren, indem du den 'Decimate-Modifier' anwendest und die Ratio runtersetzt. Pass jedoch auf, dass das Modell nach der Reduzierung noch genügend Polygone besitzt.
Jetzt kannst du dein Modell in den HTML-Code integrieren! Lade es dazu als Asset in glitch hoch oder verlinke es über einen externen Online-Speicher wie etwa Hubspot oder Google Drive.
<a-scene>
<a-assets>
<a-asset-item id="3d-model" src="URL_ZU_DEINEM_MODELL.gltf"></a-asset-item>
</a-assets>
<--! DEIN 3D CONTENT -->
</a-scene>
3D-Modelle kannst du in Aframe einfach über HTML-Tags hinzuzufügen. Innerhalb des <a-scene>-Tags, platzierst du auch deine Assets für die Szene. Verwende das <a-assets>-Tag, um darüber deine Assets wie unser 3D-Modell vorzuladen und die Performance zu optimieren.
<a-entity gltf-model="#3d-model" position="0 0 -5" scale="1 1 1" rotation="0 -25 0"></a-entity>
Danach kannst du das 3D-Modell in die Szene einfügen und z.B. auf Position (0, 0, -5) stellen. Du kannst die Position und Skalierung nach Bedarf noch anpassen.
<a-entity camera position="0 1.6 0" look-controls></a-entity>
Die Kamera in der 3D-Szene ermöglicht es sich umzuschauen. Die brauchst du also immer in WebXR.
<a-plane rotation="-90 0 0" width="40" height="40" color="#7BC8A4"></a-plane>
Zusätzlich noch ein einfache <a-plane> Bodenplatte, um der Szene eine Referenzebene zu geben.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jan's Starter - Erste Aframe Szene</title>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<!-- Assets vorladen -->
<a-assets>
<a-asset-item id="3d-model" src="URL_ZU_DEINEM_MODELL.gltf"></a-asset-item>
</a-assets>
<!-- 3D-Modell einfügen -->
<a-entity gltf-model="#3d-model" position="0 0 -5" scale="1 1 1" rotation="0 -25 0"></a-entity>
<!-- Kamera -->
<a-entity camera position="0 1.6 0" look-controls></a-entity>
<!-- Boden -->
<a-plane rotation="-90 0 0" width="10" height="10" color="#7BC8A4"></a-plane>
</a-scene>
</body>
</html>
Lade nun deine Szene bzw. den Link in einem Webbrowser und überprüfe, ob alles wie gewünscht funktioniert. Du kannst nun die unten stehende Szene auch entweder in glitch remixen, lokal testen oder auf deiner Webseite hochladen, um sie online zugänglich zu machen!
et. voila... Deine erste Architekturvisualisierung mit Aframe in WebXR!
Sobald du die Grundlagen mit Aframe verstanden hast, kannst Du später auch komplexere Modelle und Interaktionen hinzufügen. Importiere dazu weitere 3D-Modelle, integriere Sie Beleuchtungseffekte und füge interaktive Elemente wie Schaltflächen und Animationen hinzu.
Wie du deine Szene weiter interaktiv anreicherst, kannst du
hier lesen.
Das Fazit
A-Frame bietet Architekten, Designern und Kreativdienstleistern neue, innovative Möglichkeiten, ihre Projekte interaktiv zu präsentieren. Die Plattform ermöglicht es Dir, 3D-Inhalte immersiv und kosteneffizient zu laden, während die Model Viewer Library zusätzliche interaktive Elemente einbringt.
Mit Benutzerfreundlichkeit und den leistungsstarken Funktionen kann A-Frame für dich im Architektur- und Designalltag zu einem sehr nützlichen Werkzeug werden. In Zukunft wird ein Tutorial die Nutzung der Model Viewer Library weiter vertiefen und dir zeigen, was du noch mit Aframe alles machen kannst.
