Matthias Stober

Interaktive 360-Grad-Panoramen mit Marzipano

360-Grad-Panoramen mit Hotspots, Informationen, Links, ... versehen und zugänglich machen.

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.

über das Tauschverzeichnis in der Klasse verteilen lässt.

Hinweis: Die bisher gern genutzte Möglichkeit, das Ergebnis über das Tauschverzeichnis mit der Klasse zu teilen, stößt in der Zwischenzeit bei vielen Browsern an ihre Grenzen, da moderne Browser 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 Internet Explorer und Edge vom lokalen Rechner bzw. aus dem Tauschverzeichnis gezeigt werden.

Mögliche Workarounds:

  1. Lokal installierten Chrome-Browser mit Parametern starten (Windows und Linux):
    Starten Sie unter Windows die "Eingabeaufforderung". Geben Sie "start chrome --allow-file-access-from-files" ein und drücken Sie Return. Öffnen Sie nun wie gewohnt die index.html aus dem Verzeichnis "app-files", das Marzipano erstellt hat. Dazu können Sie z.B. die Datei per drag and drop in das Fenster von Chrome ziehen.

    Unter Linux starten Sie im Terminal den lokal installierten Chrome-Browser mit "google-chrome --allow-file-access-from-files".

  2. Starten des lokal installierten Chrome-Browsers mit einer Batch-Datei:
    Dazu muss diese Datei ins Verzeichnis "app-files" des Ergebnisses von Marzipano kopiert werden. Diese startet den installierten Chrome-Browser mit zusätzlichen Einstellungen. Klicken Sie also zum Starten auf "marzipano_chrome.bat".

  3. Deaktivieren dieses Sicherheitsfeatures in Mozilla Firefox (alle Betriebssysteme):
    Das Sicherheitsfeature ist definitiv sinnvoll und sollte daher nur temporär deaktiviert werden. Starten Sie dazu Firefox, geben Sie in die Adresszeile "about:config" ein und suchen Sie nach dem Eintrag "fileuri". Ändern Sie den Eintrag "security.fileuri.strict_origin_policy" auf "false". Denken Sie daran, diese Einstellung auf dem gleichen Weg wieder zurückzustellen.

 

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.


Der Text dieser Seite ist verfügbar unter der Lizenz CC BY 4.0 International
Herausgeber: Landesbildungsserver Baden-Württemberg
Quelle: https://www.schule-bw.de

Bitte beachten Sie eventuell abweichende Lizenzangaben bei den eingebundenen Bildern und anderen Dateien.