Interaktive 360-Grad-Panoramen mit Marzipano

Marzipano ist ein umfangreicher 360-Grad-Viewer für das Internet. Um 360-Grad-Bilder für einen kreativen und produktorientierten Unterricht nutzen zu können, bietet sich vor allen Dingen das Marzipano-Tool Marzipano-Tool an. Mit ihm lassen sich sehr einfach interaktive 360-Grad-Panoramen erstellen.
Das Ergebnis ist ein kleines Paket aus HTML-, Javascript- und CSS-Dateien, das sich einfach auf einen Webserver hochladen lässt.

Hinweis: Sowohl das direkte Anzeigen des Ergebnisses im Browsers als auch die gern genutzte Möglichkeit, das Ergebnis über das Tauschverzeichnis mit der Klasse zu teilen, stößt in der Zwischenzeit bei den aktuellen Browsern an ihre Grenzen, da diese Einschränkungen beim Öffnen lokal gespeicherter Dateien haben ("blocked by CORS policy"). Zum Zeitpunkt der Veröffentlichung dieses Artikels konnten die Marzipano-Panoramen problemlos nur noch mit dem in der Zwischenzeit veralteten Internet Explorer vom lokalen Rechner bzw. aus dem Tauschverzeichnis gezeigt werden.

Mögliche Workarounds:

1. Webspace verwenden
   Laden Sie den vom Marzipano-Tool erstellten Ordner "App-Files" auf einen Webserver. Diese werden von vielen Anbietern zu günstigen Konditionen im Netz zur Verfügung gestellt. 
2. Einen eigenen Test-Server betreiben
   1. Laden Sie einen portable Server herunter. Dazu können Sie z.B. nginx oder xampp verwenden.
   2. Kopieren Sie den Inhalt des vom Marzipano-Tool erstellten Ordners "App-Files" in das Verzeichnis "html" (bei nginx) bzw. "htdocs" (bei xampp).
   3. Starten Sie den Test-Server durch das Aufrufen der entsprechenden Datei (z.B. nginx.exe).
   4. Rufen Sie jetzt in ihrem Browser "localhost" auf. 
3. Das Sicherheitsfeature in Firefox deaktivieren
   Dazu gehen Sie folgendermaßen vor:
   1. Starten Sie Firefox, geben Sie in die Adresszeile "about:config" ein und bestätigen Sie die Sicherheitswarnung. 
   2. Geben Sie im Suchfeld "privacy.file_unique_origin" ein und klicken Sie am rechten Bildschirmwand auf das Zeichen mit den zwei Pfeilen. Nun sollte im gleichen Feld "false" stehen. 
   3. Jetzt können Sie wie gewohnt die vom Marzipano-Tool erstellte "index.html" in den Browser ziehen oder auf einem anderen Weg öffnen. 
   4. Vergessen Sie nicht, das Sicherheitsfeature im Anschluss wieder zu aktivieren (vgl. Punkt 1 und 2, bis "true" im Feld steht). 

Info-Hotspots mit Bild und Ton:

Bilder und Töne können nicht mit dem Marzipano-Tool eingefügt werden. Es gibt aber auch hier einen Weg, diese zu ergänzen.

1. Erstellen Sie das vollständige Panorama mit Marzipano und legen Sie den Info-Hotspot an, der mit Bild und Ton erweitert werden soll.
2. Legen Sie im vom Marzipano-Tool erstellten Ordner "app-files" einen Unterordner für Bilder (z. B. images) bzw. Audiodateien (z. B. audio) an. Kopieren Sie die entsprechenden Dateien in die Verzeichnisse.
3. Öffnen Sie nun die Datei "data.js" im Ordner "app-files" mit einem Editor.
4. Suchen Sie nach dem entsprechenden Hotspot.
5. Modifizieren Sie nun den Eintrag hinter "text":
   Für ein Bild (in unserem Beispiel "turmberg.jpg") fügen Sie folgenden Code ein:
   <img source src='images/turmberg.jpg'></img>
   Für eine Audiodatei (in unserem Beispiel "sound.mp3") fügen Sie folgenden Code ein:
   <audio controls><source src='audio/sound.mp3' type='audio/mp3'></audio>
   Sie können den Code auch kombinieren:
   INFOTEXT<img source src='images/turmberg.jpg'></img><audio controls><source src='audio/sound.mp3' type='audio/mp3'></audio>
6. Letztendlich kann nun noch die Größe des Textfelds des Hotspots angepasst werden. Dies erfolgt in der Datei "style.css". Ändern Sie hier in Zeile 595 die Größe für ".info-hotspot" auf z.B. "width: 800px;"
   Wir haben gute Erfahrung damit gemacht, statt "width: 300px" hier "max-width: 800px";" und statt "max-height: 200px" "max-height: 640px" einzutragen.

Das folgende Video stellt an einem einfachen Beispiel die Möglichkeiten vor.

Das Ergebnis sieht dann folgendermaßen aus:

Vollbildanzeige

Ein paar Unterrichtsideen dazu:

• virtuelle Exkursion
• Wandel im Ruhrgebiet (Flächennutzung)
• Talformen
• glazialer Formenschatz
• ein interaktiver Stadtrundgang (Stadtentwicklung, Stadtplanung, ...)

Die benötigten 360-Grad Bilder können mit den meisten Smartphones problemlos erstellt werden. Sollte die vorinstallierte Kamera-App das nicht können, lässt sich z.B. die App Cardboard Camera verwenden, die allerdings die Bilder automatisch auf die Server von google hochlädt.
Alternativ lassen sich auch spezielle 360-Grad-Kameras verwenden.
Eine ebenfalls sehr erfolgversprechende Quelle für 360-Grad Fotos ist Google Street View. Eine Anleitung zum Herunterladen der Bilder findet sich z.B. auf dem Landesbildungsserver: 360-Grad-Fotos aus Google Street View herunterladen.

Im Laufe der nächsten Jahre soll aber auch die Sammlung von 360-Grad-Fotos und -Videos auf dem Landesbildungsserver ausgebaut werden.