360-Grad Rundgang erstellen

zuletzt aktualisiert am 31.01.2019

Video-Tutorial

Teil 1: Marzipano-Tool

Teil 2: Quellcode-Veränderungen

Teil 3: Bilddaten aktualisieren


Hinweis: nach der Veränderung der Bilddateien müssen ggf. die Link- und Info-Hotspots angepasst werden. Dies geschiet über die Tabelle.

Dateien zum Tutorial

  1. Bilder (von insta360)
  2. style.css
  3. Marzipano-Tabelle (.xlsx)

Tutorial in Kurzform

  1. Bilder erstellen und vorbereiten
  2. Bilder und Marzipano-Website erstellen:
    1. Marzipano-Tool aufrufen.
    2. Bilder per Drag & Drop dazufĂĽgen
    3. Initial Views Setzen
    4. Export
    5. Nur bei Aktualisierung von Bildmaterial: die Ordner in app-files/tiles in den bestehenden Ordner app-files/tiles kopieren. Bestehende Ordner ggf. sichern.
  3. ggf. MenĂĽ-Liste der Marzipano-Website anpassen:
    1. mit Notepad++ (oder anderem HTML-fähigem Texteditor)  index.html öffnen
    2. Namen und Reihenfolge der Räume unter <div id=“sceneList“> anpassen.
  4. Info-Hotspaoots ergänzen oder verändern
    1. Marzipano-Tabelle (.xlsx) öffnen und Inhalte in der Tabelle ergänzen/anpassen
    2. Spalte M der Tabelle auswählen und kopieren.
    3. data.js mit Notepad++ (oder anderem HTML-fähigem Texteditor) öffnen (ggf. vorher Sicherungskopie erstellen!)
      1. Inhalt durch den Inhalt der Spalte M ersetzen
      2. Alle AnfĂĽhrungszeichen [„] entfernen: Suchen und ersetzen [„] -> []; ALLE
      3. Alle [|] durch [„] ersetzen: Suchen und ersetzen [|] -> [„]; ALLE
      4. data.js speichern

Ergebnis: ZTM 360°-Rundgang
Anmerkungen: In der style.css sind noch kleinere optische Mängel, die bei Gelegenheit noch angepasst werden. [Stand: 12/2018]

Erläuterungen zum Code

Einzelne Informations-Punkte sind mit folgendem (exemplarischen) Code eingebettet Spalte M in der Tabelle:

Dabei haben die Codes folgende Bedeutung:

  • yaw: Bedeutet die Links-Rechts-Verschiebung im Bild (X-Achse), kann Werte von -Ď€ bis +Ď€ annehmen (-3,14… bis +3,14…)
  • pitch: Bedeutet die Verschiebung von Oben nach unten (Y-Achse), kann die Werte von -½π bis +½π annehmen (-1.57 bis +1.57)
  • title: Ist der Text, der in der Titelzeile des Info-Punkts steht
  • text: Ist der Text, der in der Info-Box steht, wir verwenden folgenden Aufbau:
    • <a href=’https://…‘>: Enthält den Link zum angestrebten Ziel.
      • <img src=’https://…‘>: bettet ein Bild als klickfläche ein
      • …Text… bettet Text als Klickfläche ein
    • </a> schlieĂźt ab, was als angeklickt werden kann, um zum Link zu fĂĽhren

Audio einbetten

Vielen Dank fĂĽr die inspirierende Nachfrage, wie Audio eingebettet werden kann. Dies ist möglich durch eine Einbettung folgender Argumente im „text:“-Bereich des Info-Hotspots. Wir haben dazu in dem Verzeichnis, in dem auch die index.html ist neben den ordnern „img“, „tiles“ und „vendor“ noch den ordner „audio“ abgelegt. In diesen haben wir die datei „FILENAME.WAV“ kopiert:

FĂĽr andere Dateitypen ist wird der Typ „audio/mp3“ bzw. „audio/ogg“ angegeben.

Der komplette Code fĂĽr den Info-Hotspot lautet:

Schreibe einen Kommentar

Wir benutzen Cookies um die Nutzerfreundlichkeit der Webseite zu verbessen. Durch Ihren Besuch stimmen Sie dem zu.