Augmented Reality mit A-Frame und AR.JS
Ein Beispiel
Bevor wir uns die Technologie genauer anschauen, möchten wir zunächst einen Blick auf ein Beispiel werfen.
Eine Interaktive 360° Tour durch das CERN
In diesem Beispiel kann man direkt im Browser eine 360° Tour durch das CERN in der Schweiz erleben.
Aufgabe: Rufen Sie die Seite auf und machen Sie einen kleinen Rundgang durch das CERN. Welche Funktionen fallen Ihnen auf?
Optional: Besuchen Sie die Seite nacheinander mit einem Laptop und einem Smartphone.
http://cms-aframe.web.cern.ch/
Nachdem wir uns die Seite etwas genauer angesehen haben, fallen uns einige Funktionalitäten auf.
Allerdings gibt es dann ein Problem: Sie können dann keine Maus verwenden. Durch die Kopfbewegung kann man sich zwar umschauen, aber nicht mehr per Mausklick auf die anderen Bilder springen. Hierfür haben die Entwickler sich etwas ausgedacht: Wenn Sie den Zeiger für eine Sekunde auf dem Bild stehen lassen und nicht bewegen, lädt er das Bild, als hätten Sie es angeklickt.
Dies ist also ein Beispiel dafür, wie man mit A-Frame unterschiedliche Geräte wie Laptops oder Smartphones im VR-Modus unterstützen kann.
Es gäbe noch viele weitere Punkte, die man thematisieren könnte, wie die Qualität der Bilder, die Navigation, erklärende Beschriftungen oder die Einbindung von Videos und Ton. Wir wollen es aber zunächst bei diesen wenigen Punkten belassen.
- Sie können sich mit der Maus umsehen
- Sie können über die eingeblendeten Bilder per Mausklick zu anderen 360° Bildern springen
- Sie haben eine Art Mauszeiger in der Mitte des Bildschirms
- Der Zeiger verändert seine Farbe, wenn Sie diesen auf eines der Bilder bewegen
Allerdings gibt es dann ein Problem: Sie können dann keine Maus verwenden. Durch die Kopfbewegung kann man sich zwar umschauen, aber nicht mehr per Mausklick auf die anderen Bilder springen. Hierfür haben die Entwickler sich etwas ausgedacht: Wenn Sie den Zeiger für eine Sekunde auf dem Bild stehen lassen und nicht bewegen, lädt er das Bild, als hätten Sie es angeklickt.
Dies ist also ein Beispiel dafür, wie man mit A-Frame unterschiedliche Geräte wie Laptops oder Smartphones im VR-Modus unterstützen kann.
Es gäbe noch viele weitere Punkte, die man thematisieren könnte, wie die Qualität der Bilder, die Navigation, erklärende Beschriftungen oder die Einbindung von Videos und Ton. Wir wollen es aber zunächst bei diesen wenigen Punkten belassen.
Weitere Besipiele finden Sie auf der Seite von A-Frame:
https://aframe.io/showcase/
Wie funktioniert jetzt aber eigentlich A-Frame genau?