Augmented Reality mit A-Frame und AR.JS
Einbinden von 3d Objekten
A-Frame kann 3D-Objekte einbinden, die online zu finden sind oder selbst mit einem Programm wie Blender erstellt und hochgeladen wurden.
Dabei können verschiedene Formate verwendet werden wie obj, glb oder gltf.
Es empfiehlt sich 3D-Objekte im GLTF Format einzubinden.
https://aframe.io/docs/1.1.0/components/gltf-model.html#why-use-gltf
Weitere Informationen zu 3D-Objekten in A-Frame finden Sie auf der A-Frame Seite:
https://aframe.io/docs/1.1.0/introduction/models.html
Hier das bisherige Beispiel etwas erweitert:
<html><head><script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script></head><a-assets> <a-asset-item id="cityModel" src="https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf"></a-asset-item> </a-assets><body><a-scene><a-entity gltf-model="#cityModel"></a-entity></a-scene></body></html>
Wir haben hier die <a-box> durch ein 3D-Modell ersetzt, das auf der A-Frame-Seite liegt.
Dafür haben wir sogenannte <a-assets> definiert.
A-Assets
Elemente wie 3D Modelle, Bilder oder Musik werden in sogenannten <a-asset-items> eingebunden und dann im Code aufgerufen.
Für die Übersichtlichkeit und Arbeit im Code macht es Sinn, alle a-asset-items in einem Container, einem a-asset zu sammeln.
Daher definieren wir zunächst vor Öffnung des a-scene-Tags die a-assets:<a-assets> <a-asset-item id="cityModel" src="https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf"></a-asset-item> </a-assets>
Innerhalb der a-assets werden dann die a-asset-items definiert.
Diesen weisen wir eine eindeutige und einzigartige Bezeichnung, die id zu. Diese id darf nie noch für ein anderes a-asset-item verwendet werden. Eine id muss also immer einzigartig sein.
Als zweites benötigen wir noch den Ort, wo das Asset hinterlegt ist, also z.B. die URL. Diese binden wir in dem Component src (Abkürzung für Source) ein.
In diesem Beispiel wird auf eine Datei verwiesen, die auf einem Server hochgeladen wurde und auf die man über eine URL zugreift.
Man kann aber auch auf Assets zugreifen, die zusammen mit der HTML Datei hinterlegt wurden.
Dies trifft zu, wenn Sie Ihre Projekte bei ILIAS veröffentlichen möchten oder auch, wenn Sie bei Glitch eigene 3D-odelle einbinden wollen. Siehe dazu Entwickeln und Veröffentlichen.
Dabei wird statt auf eine URL bei src, auf die Dateien direkt verwiesen.
Wenn die Datei namens "VC.gltf" in einem Ordner namens "assets" bei der HTML Datei liegen, sähe der a-assets Verweis so aus:<a-assets> <a-asset-item id="cityModel" src="assets/VC.gltf"></a-asset-item> </a-assets>
Man gibt hier also den Dateien-Pfad an, sowie den Namen der Datei inklusive Datei-Endung. Hier wird das gltf-Format verwendet.
a-entity Objekt
Nachdem wir das a-asset-item definiert haben, müssen wir es noch im Code aufrufen.
Dies tun wir natürlich innerhalb des a-scene-Tag.
Wir erstellen zunächst ein neutrales a-entity und fügen die Component gltf-model an. Dort tragen wir dann die id ein, die wir in a-asset-item definiert haben. Allerdings ergänzen wir ein # vor die id.<a-entity gltf-model="#cityModel"></a-entity>
Eigenschaften von Assets
Die Eigenschaften der Assets können je nach Form angepasst werden. Dies funktioniert wie bei dem Beispiel zur a-box. Also Position, Rotation, Größe etc.