In der Architekturvisualisierung ist es längst nicht mehr nur möglich, beeindruckende 3D-Modelle statisch in 2D oder 3D zu zeigen. Mit interaktiven Funktionen kannst du als Architekt und Designer deine Kunden von passiven Betrachtern zu aktiven Nutzern bringen.
Interaktivität in deinen Architekturvisualisierungen und 3D-Mockups in WebXR ermöglicht es deinen Kunden, aktiv am Entwurf teilzunehmen, anstatt nur ein statisches Modell zu betrachten.
Durch die interaktiven Elemente in der WebXR Szene können Kunden eigens Entscheidungen treffen, verschiedene Designoptionen ausprobieren oder in virtuellen Touren Szenenwechsel beeinflussen um damit ein tieferes Verständnis für dein Projekt zu entwickeln.
Das erhöht nicht nur die Nutzerbeteiligung, sondern führt auch zu einer klaren Kommunikation zwischen beispielsweise Architekten und Kunden, da du deine Projekt dadurch anschaulicher darstellen kannst und du mit den Kunden im Anschluss über die selben Dinge sprechen kannst.
Wenn du dich jetzt fragst: Wie integriere ich nun Interaktivität in meinem WebXR Projekt? Dann kommt hier die Antwort:
Du brauchst grundsätzlich einen Cursor, mit dem du Elemente auswählen und klicken kannst und dann noch die interaktiven Elemente selbst.
Je nach Plattform können verschiedene Eingabegeräte verwendet werden, darunter die Computeraus (oder Touchpad am Laptop), ein Touchscreen oder VR-Controller. Die Auswahl der Endgeräte bestimmt, wie der Nutzer mit der 3D-Szene interagiert und wie man die Aframe Szene aufsetzen sollte.
A-Frame bietet eine einfache Möglichkeit, Cursors für Interaktionen zu nutzen. Mit wenigen Zeilen Code kann man Hover-, Click- oder Touch-Effekte implementieren, die auf das Eingabegerät des Nutzers reagieren.
Der Cursor ist das zentrale Element für Interaktionen in einer 3D-Szene. Er dient dazu, festzulegen, auf welche Objekte der Nutzer zielt, und kann in A-Frame leicht über das „cursor“-Primitive innerhalb der 'camera' hinzugefügt werden.
<a-scene>
<a-camera>
<a-cursor></a-cursor>
</a-camera>
</a-scene>
Standardmäßig wird der Cursor als weißer Ring angezeigt, der sich in einer bestimmten Entfernung vom Nutzer befindet. Um ihn individuell anzupassen, lassen sich verschiedene Eigenschaften wie Farbe, Größe und Position verändern.
<a-scene>
<a-camera>
<a-cursor color="blue" innerRadius="0.02" outerRadius="0.04"></a-cursor>
</a-camera>
</a-scene>
Du kannst die Größe des Cursors in der Mitte des Sichtfelds durch den innerRadius und outerRadius anpassen. Der innerRadius definiert den inneren Kreis, während der outerRadius den äußeren Ring des Cursors bestimmt.
Die dynamische Animation des Architekturmodells hilft dabei, die Proportionen und das Gesamtbild des Designs besser zu verstehen. Es ermöglicht deinen Betrachtern, sich einen vollständigen Überblick über das Modell zu verschaffen und die Details aus verschiedenen Perspektiven zu sehen.
<a-scene>
<a-box position="0 1 -5" color="blue" cursor-listener></a-box>
<a-camera>
<a-cursor></a-cursor>
</a-camera>
</a-scene>
A-Frame bietet eine einfache Möglichkeit, Cursors für Interaktionen zu nutzen. Mit wenigen Zeilen Code kann man Hover-, Click- oder Touch-Effekte implementieren, die auf das Eingabegerät des Nutzers reagieren.
Grundlegende Interaktionsarten in A-Frame
A-Frame bietet eine einfache Möglichkeit, Cursors für Interaktionen zu nutzen. Mit wenigen Zeilen Code kannst du bereits Hover-, Click- oder Touch-Effekte implementieren, die auf das Eingabegerät des Nutzers reagieren.
Wenn der Cursor über ein Objekt, wie zum Beispiel einen Button schwebt, kann dies mit einer Opazitätsveränderung visuell hervorgehoben werden. Die Art der Interaktion ist ideal, um Nutzer auf bestimmte interaktive Elemente aufmerksam zu machen.
Wenn der Cursor über ein Objekt, wie zum Beispiel einen Button schwebt, kann dies mit einer Opazitätsveränderung visuell hervorgehoben werden. Die Art der Interaktion ist ideal, um Nutzer auf bestimmte interaktive Elemente aufmerksam zu machen.
<a-scene>
<a-box class="clickable" position="0 1 -5" color="blue" ></a-box>
<a-camera>
<a-cursor
></a-cursor>
</a-camera>
</a-scene>
Durch einen Klick können Aktionen wie Szenenwechsel, das Wechseln von Materialien von 3D Modellen oder das Anpassen von Kamerawinkeln ausgelöst werden. Diese Form der Interaktion ist besonders nützlich, um Nutzern eine Auswahl von Optionen zu ermöglichen.
.gif)
Um ein 3D Element in der WebXR Szene interaktiv zu machen, solltest du ihm zunächst die class="clickable" geben:
<a-scene>
<a-box class="clickable" position="0 1 -5" color="blue">
</a-box>
</a-scene>
Die gewünschte Interaktion fügst du per 'animation__name' direkt in der Objektklasse hinzu und über startEvents: click; das Event selbst. Du kannst über die 'property' bestimmen, ob die Rotation, Skalierung oder die Position per click-Animation animiert wird. Die 'dur' legt die Dauer der Animation fest.
<a-scene>
<a-box class="clickable" position="0 1 -5" color="blue"
animation__scale="property: scale; startEvents: click;
easing: easeInCubic; dur: 2000; to: 0.1 0.1 0.1"
></a-box>
</a-scene>
Für mobile Geräte oder Touchscreens ermöglicht diese Interaktion das Drehen und Zoomen von Modellen. Sie ist lediglich für Benutzererfahrungen auf Tablets und Smartphones essenziell.
Die Touch-Interaktion wird automatisch durch das click-Event auf mobilen Geräten unterstützt. Da A-Frame Touch-Eingaben genauso wie Klicks behandelt, funktioniert die obige Szene sowohl auf Desktop-Geräten als auch auf Smartphones und Tablets.
Als weiteres Beispiel wird im oben zu sehenden GIF ein 3D-Modell gezeigt, dass mithilfe des Model Viewer Plugins per Touch gesteuert und rotiert werden kann, wodurch eine interaktive Betrachtung auf mobilen Geräten ermöglicht wird.
Szenenaufbau: Interaktive Elemente in A-Frame integrieren
Wie oben bereits erwähnt, muss die Szene entsprechend aufgebaut werden, um interaktive Elemente in A-Frame zu integrieren. Dazu können 3D-Modelle in die Szene eingefügt und mit verschiedenen Interaktionen verknüpft werden. Mit Hilfe von Cursor-Primitiven lässt sich das Verhalten beim Hovern oder Klicken festlegen.
Zudem kannst du Buttons oder Schaltflächen in der Szene anordnen, die es den Nutzern ermöglichen, zwischen verschiedenen Optionen zu wechseln, wie beispielsweise der Auswahl von Materialien oder unterschiedlichen Perspektiven in einem Architekturmodell.
Das bietet dir zahlreiche Use Cases, die ich in den nächsten Wochen weiterhin präsentieren werde. Sei also gespannt auf die nächsten Beiträge!
Best Practices für interaktive Architekturprojekte
Intuitive Navigation: Interaktionen sollten für den Nutzer klar und einfach verständlich sein. Eine klare Benutzerführung trägt dazu bei, dass dein Kunde problemlos durch das Modell navigieren kann.
Visuelles Feedback: Jedes interaktive Element in der WebXR Szene sollte deinen Kunden klares Feedback geben, um die Eingaben zu bestätigen (z. B. Opazitätsveränderung bei Hover-Effekten).
Optimierung der Performance: Achte grundsätzlich immer darauf, dass deine 3D-Modelle, Texturen und Bilder optimiert und schnell ladbar sind, um eine reibungslose Interaktion zu gewährleisten und Ladezeiten zu reduzieren.
Das Fazit
Interaktive Architekturvisualisierungen mit A-Frame eröffnen dir völlig neue Möglichkeiten, Projekte nicht nur statisch zu zeigen, sondern den Nutzern erlebbar zu machen.
Die Integration von Hover-, Click- und Touch-Interaktionen in WebXR-Szenen erlaubt es Architekten und Designern, ihre Mockups und 3D Modelle auf eine Weise zu präsentieren, die Kunden aktiv in den Entwurfsprozess einbezieht und es ihenenleichter vermittelt.
Mit A-Frame und den richtigen Techniken kannst du deine Mockups und Architekturprojekte zu beeindruckenden, interaktiven Erlebnissen machen.
