360°-Rundgänge kostenlos erstellen mit Marzipano

In diesem Beitrag erkläre ich Dir, wie Du virtuelle Rundgänge durch Deinen Betrieb, Museen, Ausstellungen oder andere Orte erstellen kannst. Mit Marzipano lassen sich 360°-Bilder sogar kostenlos miteinander verknüpfen. Darüber hinaus gebe ich Dir ein paar Extratipps für das Tool.

Kostenlose Tools verschwinden vom Markt…

Zugegeben: Die Auswahl an kostenlose Tools zum Erstellen virtueller Rundgänge ist deutlich kleiner geworden. Lange Zeit habe ich dafür Story Spheres genutzt, das einen einfachen Einstieg in das Virtual Reality Storytelling bot. Das Problem: Die so erstellten Rundgänge lagen auf den Servern von Story Spheres und waren auf meinen Seiten lediglich per iframe eingebunden. Und jetzt, da die Seite offensichtlich kaputt ist, funktionieren auch die dort erstellten Rundgänge nicht mehr.

Wer suchet, der findet

Ich habe lange nach einer kostenlosen, aber genauso leistungsfähigen Alternative gesucht. Mit dem Marzipano-Tool bin ich endlich fündig geworden. Damit kannst Du sehr einfach interaktive 360-Grad-Panoramen erstellen. Besonders schön: Marzipano verzichtet auf jegliche Anmeldung oder Registrierung. Ein weiterer Pluspunkt: Das fertige Projekt wird anschließend auf Deinem Server abgelegt. Der Upload per FTP ist für Neulinge etwas gewöhnungsbedürftig. Aber keine Angst: Wer das einmal gemacht hat, bekommt das locker hin.

Erste Schritte mit Marzipano

Dazu ist das Tool besonders einfach zu bedienen:

1. Zur Erstellung eines virtuellen Rundgangs rufst Du zunächst das Tool über den Link https://www.marzipano.net/tool/ auf.
2. Danach fordert Dich Marzipano auf, einige 360°-Bilder auszuwählen, die Du für den Rundgang nutzen möchtest.
3. Ist das erledigt, kannst Du die Bilder noch umbenennen.
4. jedem Deiner Bilder Info-Boxen mit weiterführenden Informationen hinterlegen (über den Button „Info hotspot“) oder eines der Anderen 360°-Bilder verlinken, die Du hochgeladen hast (über den Button „Link hotspot“). Über den Button „Set inital View“ kannst Du die Startansicht Deines 360°-Fotos auswählen.

Export des Projektes

Bevor Du Deinen Rundgang exportierst, kannst Du im linken Fenster noch einige Einstellungen vornehmen. Ich empfehle Dir

1. den „Project Title“ in einen aussagekräftigeren Namen zu ändern
2. „Autorotate“ zu deaktivieren
3. die „View control buttons“ deaktiviert zu lassen und den
4. „Fullscreen button“ zu aktivieren.

Schließlich kannst Du Dein Projekt über den Export-Button oben rechts herunterladen. Du erhältst eine .zip-Datei, die Du entpackst. In dem Order, der wie Dein Projekt heißt, findest Du einen weiteren Ordner App-Files mit den eigentlichen Projektdateien. Diesen Ordner benennst Du zum Beispiel in „360“ um und lädst ihn in das Hauptverzeichnis Deines Servers. Anschließend kannst Du Deinen Rundgang per https://dein-domainname.de/360/ aufrufen, in meinem Fall also über: https://matthias-suessen.de/360/

Virtuelle Rundgänge in WordPress-Beiträge einbetten

Möchtest Du Deinen Rundgang nun in einen Blogbeitrag einfügen, kannst Du das mit folgendem Code machen:

<iframe src="https://matthias-suessen.de/360/" name="marzipano" width="900" height="400">
  <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
  Sie können die eingebettete Seite über den folgenden Verweis aufrufen: 
  <a href="https://matthias-suessen.de/360/">360 Grad Rundgang</a>
  </p>
</iframe>

Die gefetteten Passagen müsstest Du zuvor mit dem Pfad zu Deinen 360-Grad-Rundgang (also zum Beispiel „https://dein-domainname.de/360/„) austauschen. Das Ergebnis kann dann so aussehen:

Nützliche Zusatzfunktionen von Marzipano

Nach der Pflicht kommt die Kür. Grundsätzlich ist es möglich, die Info-Hotspots mit Bildern, Videos oder Tönen anzureichern. Auch Links auf andere Seiten sind möglich. Dafür danke ich Matthias Stober für diesen Beitrag auf Schule-bw.de, der mir sehr hilfreich war.

Vorab die Bemerkung, dass man sich dafür ein wenig mit HTML auseinandersetzen muss. Davor musst Du aber keine Angst haben. Aus jahrelanger Erfahrung kann ich Dir sagen, dass das bisher noch jedeR hinbekommen hat. Und ein paar Grundkenntnisse in HTML sind immer gut. Außerdem ist die mit Abstand die wichtigste Sprache des World Wide Web gut dokumentiert. Wer weiß, wonach er suchen muss, wird bei Problemen schnell fündig.

Bilder, Videos und Töne in Maripano einfügen

Zurück zu Marzipano. Zunächst einmal gehst Du wie oben vor, erstellst also online Dein Projekt und fügst Info-Hotspots hinzu. Zusätzlich legst Du jetzt noch ein paar Spots an, die Du Bildern, Videos und Tönen erweitert möchtest. Anschließend exportierst Du Dein Projekt, lädst es als .zip-Datei runter und entpackst diese. In dem Projektordner findest Du den Unter-Ordner App-Files mit den eigentlichen Projektdateien. In diesem legst Du für die drei Medienarten drei weitere Ordner an. Du kannst sie frei benennen. Ich habe sie audio, images und video genannt und meine mp3-Dateien in den Ordner audio, meine Bilder in den Ordner images und meine Videos in den Order video gelegt.

Jetzt kommt der etwas kompliziertere Teil: In diesem Schritt musst Du die Datei data.js aus Deinem Projektordner mit einem HTML-Editor öffnen. Eine kostenlose Lösung bietet da zum Beispiel Brackets, das es für Windows und den Mac gibt.

In dieser Datei suchst Du jetzt nach dem Info-Hotspot, bei dem Du Bilder, Töne oder Videos anzeigen möchtest. Du erkennst Sie an den Überschriften, die Du in Marzipano vergeben hast. In meinem Fall habe ich einen Spot Hier meine Audiobeschreibung genannt. Die unmittelbar folgenden Zeile wird mit „text“: „“ eingeleitet. Um eine Audiodatei einzufügen, änderst Du den Eintrag in „text“: „<audio controls><source src=’audio/meineTondatei.mp3′ type=’audio/mp3′></audio>“. Für ein Video müsstest Du dort „text“: „<video controls width=’250′><source src=’video/meineVideodatei.mp4′ type=’video/mp4′></video>“ eintragen sowie „text“: „<img source src=’images/meineBilddatei.jpg‘></img>“ eintragen. Klingt erstmal kompliziert, ist es aber gar nicht. So sieht die Passage mit den multimedialen Infohotspots in meiner data.js-Datei aus:

  "infoHotspots": [
    {
      "yaw": -2.5356351230639973,
      "pitch": 0.14595310937005124,
      "title": "Salon/ Festsaal<br>",
      "text": "<video controls width='250'><source src='video/videoevenburg.mp4' type='video/mp4'></video>"
    },
    {
      "yaw": 2.251973004298333,
      "pitch": 0.0819413200714294,
      "title": "Hier meine Audiobeschreibung<br>",
      "text": "<audio controls><source src='audio/20210505-132507.mp3' type='audio/mp3'></audio>"
    },
    {
      "yaw": 0.7849768814671609,
      "pitch": -0.20610148519236482,
      "title": "Hier mein Bild<br>",
      "text": "<img source src='images/1280px-Schloss_Gluecksburg_msu_2018_-7111.jpg'></img>"
    }

Wie das aussieht, kannst Du Dir in dem oben verlinkten Rundgang in dem Raum evenburg_saal_oben anschauen. Dort habe ich drei Infospots hinterlegt und mit Bild, Ton und Video angereichert.

Mein Fazit zu Marzipano

Probier es aus. Es ist leichter, als es zunächst erscheint. Und Du hast so eine kostenlose Lösung. Tools, die das leichter machen, kosten in der Regel viel Geld. Außerdem bist Du dann immer auf andere Dienstleister angewiesen. Mit Marzipano bist Du ziemlich unabhängig. Wie so oft sind kostenlose Tools zu Anfang etwas sperrig. Hat man sich damit aber etwas intensiver beschäftigt, kann man damit beeindruckende Ergebnisse erzielen. Ganz besonders gefällt mir, dass alle Dateien auf meinem eigenen Server liegen und ich so unabhängig von Dritten bin. Aber: Für manche mag Marzipano etwas sperrig in der Einrichtung sein. Wer WordPress nutzt, ist hier wie so oft fein raus: Mit dem Plugin WP VR – 360° Panorama und Virtuelle Tour Ersteller für WordPress, das ich in diesem Beitrag vorstelle, lassen sich gänzlich ohne Programmierkenntnisse ebenfalls tolle interaktive Rundgänge erstellen.