OpenSource4School/HIRO-Marker
Augmented Reality-Umgebung mittels aframe und HIRO-Marker selbst erstellen
BearbeitenSie benötigen:
- Einen Computer mit Internetverbindung,
- ein Smartphone oder Tablet mit Kamera und Internetverbindung,
- Einen Browser mit WebGL und WebRTC
- einen Drucker zum Ausdrucken des HIRO-Markers.
Schritt 1: Homepage erstellen
Bearbeiten- Legen Sie einen Account unter GitHub an: https://github.com/github (eine Einführung zum Einrichten von GitHub ist unter folgendem Link verfügbar: https://guides.github.com/features/pages/)
- Kopieren Sie das folgende Repository in GitHub über "Fork": https://github.com/melanie-platz/AR-HIRO
- Richten Sie Ihre Homepage ein (über Settings > GitHub Pages > Choose a theme > Select theme).
Schritt 2: HIRO-Marker ausdrucken
BearbeitenDrucken Sie die Marker aus (am besten auf weißes Papier): Marker PDF Printout for Kanji and Hiro
Schritt 3: Szene erstellen
BearbeitenErstellen Sie Ihre Szene, die dargestellt werden soll, mit Hilfe von: https://niebert.github.io/JSON3D4Aframe/
- Mit Hilfe von "Add" oder "Delete" könne Sie Körper hinzufügen oder löschen. Durch Klicken auf "Save AFrame" kann der aframe gespeichert werden und über den Browser betrachtet werden.
- Durch klicken auf "Save AR" kann die Szene gespeichert werden (voreingestellter Dateiname: "object3d_ar_hiro.html"). Geben Sie der Datei einen neuen Namen (in unserem Fall: "cylinder-html").
- Laden Sie die entstandene Datei in GitHub hoch.
Code mit Erläuterungen
Bearbeiten[1] Kennzeichnet die Datei als HTML-Datei und öffnet den HTML-Kopf.
<!DOCTYPE html <head>
[2] Aframe einbinden:
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
[3] aframe-ar.js einbinden:
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"> </script>
[4] Titel festlegen:
<title> AR.js for HIRO Marker </title>
[5] HTML-Seite hat keine Rand (margin:0px), d.h. der AFrame füllt die ganze Seite ohne Rand aus.
</head> <body style='margin : 0px; overflow: hidden;'>
[6] Markereinstellungen: Es wird der Hiro-Marker verwendet. Alternativ gibt es als Standard auch den Kanji-Marker
<a-scene> <a-marker id="mymarker" preset="hiro">
[7] Definition des Objekts, welches auf den Marker gepackt wird (hier: blauer Zylinder)
<a-cylinder position="0.00 0.50 -4.00" material="color: #4545aa;opacity:0.5" rotation="0 0 0" radius="1.00" height="1.00" > </a-cylinder>
[8] Schließt u.a. die AFrame-Umgebung und die HTML-Datei
</a-marker> <a-entity camera></a-entity> </a-scene> </body> </html>
Schritt 4: Link mit dem Smartphone/ Tablet öffnen
BearbeitenDie in Schritt 3 in GitHub hochgeladene Datei kann nun mit dem Smartphone/ Tablet im Browser (Firefox) aufgerufen werden über:
https://[Ihr Benutzername].github.io/AR-HIRO/[Name der Datei].html
Dazu muss dem Zugriff auf die Kamera des Gerätes zugestimmt werden. Zum Anzeigen des Objekts, bewegen Sie die Kamera über den in Schritt 2 ausgedruckten HIRO-Marker.
Schritt 5 (optional): Erstellen eines QR-Codes
BearbeitenUm leichter mit dem Smartphone/ Tablet auf den Link zugreifen zu können, kann ein QR-Code erzeugt werden, z.B. mit Hilfe von http://goqr.me/. Um auf den QR-Code zugreifen zu können, wird ein QR-Code-reader (z.B. QR Droid) benötigt.
Beispiele
Bearbeiten- https://fannanni.github.io/AR-HIRO/figur%201.html
- https://marcelschwarz.github.io/AR-HIRO/Hammer.html
|
3D-Modelle mit 360-Grad-Panorama
BearbeitenIn der OpenSource-Software JSON3D4Aframe kann man auch bei einem Aframe-3D-Modell realistische 3D-Hintergründe auswählen. Klicken Sie dazu auf AFrame-Settings und wählen Sie eine 360-Gradpanorama aus.
- Salzkristall als 3D-Modell mit Himmel im Hintergrund
- crystal_lattice.json-Datei, mit der man das 3D-Model für das Salzkristall in JSON3D4Aframe laden kann. Verwenden Sie nach dem Klick auf crystal_lattice.json-Datei im Browser die Menüoption "Speichern unter ...", um die JSON-Datei auf Ihrem Computer anzuspeichern. Mit dem Load-Button in JSON3D4Aframe können Sie das Salzkristall laden.
Weiterführende Informationen zu aframe bzw. HIRO-Markern
Bearbeiten- https://github.com/jeromeetienne/ar.js
- https://aframe.io/blog/arjs/
- https://medium.com/arjs/how-to-create-your-own-marker-44becbec1105
- https://en.wikiversity.org/wiki/3D_Modelling/Examples
Siehe auch
BearbeitenLinks und Literatur
Bearbeiten- ↑ AR.js Repository, Jerome Etienne (2018) - Release 1.6 - https://github.com/jeromeetienne/ar.js