
VC Story Funktionen und Einrichtung
1. Übersicht
Das VC Story Plugin ist eine leistungsstarke Erweiterung für VC Map, die interaktives Storytelling ermöglicht, indem traditionelle Webinhalte mit 3D-Karteninteraktionen verknüpft werden. Dieses Plugin erlaubt es, fesselnde Erzählungen zu erstellen, die die dritte Dimension nutzen, um Fakten, Projekte und Geschichten verständlicher darzustellen.
2. Zentrale Funktionen
2.1. Interaktives Storytelling-Framework
Das Plugin bietet ein umfassendes Framework zur Erstellung interaktiver Stories, die auf Benutzerinteraktionen reagieren:
-
Scroll-basierte Interaktionen: Aktionen werden ausgelöst, wenn durch den Story-Inhalt gescrollt wird
-
Klick-basierte Interaktionen: Aktionen werden durch Schaltflächenklicks oder interaktive Elemente ausgelöst
-
Iframe-Integration: Geschichten werden in einem Iframe mit nahtloser Integration in die Hauptanwendung von VC Map angezeigt
-
Intersection Observer: Erkennt automatisch, welcher Story-Abschnitt aktuell sichtbar ist, und löst entsprechende Aktionen aus
2.2. Story-Konfiguration
2.2.1. Story-Struktur
Geschichten werden über zwei Hauptdateien konfiguriert:
-
HTML-Datei - index.html: Enthält den visuellen Story-Inhalt mit gestalteten Abschnitten
-
JSON-Konfiguration - items.json: Definiert Aktionen und deren Auslöser
-
Assets: Der Assets-Ordner enthält die Bilder, Geojson-Dateien und 3D-Modelle für die VC Story.
Die HTML-Datei ist für das Layout und Design der Story verantwortlich, während die JSON-Konfiguration die interaktiven Elemente und deren Verhalten festlegt. Die JSON-Datei kann verschiedene Aktionen enthalten, die basierend auf Benutzerinteraktionen wie Scrollen oder Klicken ausgeführt werden.
In der items.json werden alle Aktionen erstellt und den Elementen in der index.html über die ID zugewiesen.
Das Hauptobjekt der items.json besitzt vier Schlüssel:
-
disableMovement
: [Boolean
] Legt fest, ob die Karte wie gewohnt bewegt werden kann. -
actions
: [Array
] Die definierten Aktionen. -
items
: [Array
] Die Verknüpfung der definierten Aktionen mit den HTML-Elementen. Hier wird auch festgelegt, ob es sich um eine Klick- oder Scroll-Interaktion handelt.
Weitere Informationen zu möglichen Aktionen und deren Verwendung finden sich unter Story AKtionen. Beide Dateien arbeiten zusammen, um ein stimmiges Storytelling-Erlebnis zu schaffen.
WICHTIG: Die Dateien müssen in einem externen Editor wie Visual Studio Code oder Notepad++ bearbeitet werden, da der App-Konfigurator keine Bearbeitungsmöglichkeiten für diese Dateien bietet.
2.2.2. Einrichtung
Für die Einrichtung der VC Story wird der Ordner virtualcitySTORY-3.x.x benötigt. Dieser hat folgende Struktur:
virtualcitySTORY-3.x.x.zip
├─ storyExample
│ ├─ index.html
│ ├─ items.json
| ├─ customStory.css
│ ├─ assets
│ │ ├─ lib
│ │ │ └─ css
│ | │ │ └─ ...
│ │ │ └─ fonts
│ | │ │ └─ ...
│ │ ├─ geojson
│ │ │ └─ ...
│ │ ├─ images
│ │ │ └─ ...
│ │ └─ models
│ │ └─ ...
├─ @vcmap-story.tar.gz
└─ README.md
Bitte entpacken Sie die Datei virtualcitySTORY-3.x.x.zip
und kopieren Sie den Ordner storyExample
in den Ordner datasource-data/{your-story} des Publishers. Der Ordner enthält alle notwendigen Dateien, um eine neue Story zu erstellen.
Die Datei @vcmap-story.tar.gz
enthält das VC Story Plugin, das als Plugin zu einem Modul im App Configurator hinzugefügt werden kann. Die Datei @vcmap-story.tar.gz
muss als Plugin zum VC Publisher hinzugefügt werden. Gehen Sie dazu wie folgt vor:
-
Plugin zum Publisher hinzufügen:
-
Öffnen Sie den Admin-Bereich des VC Publishers (nur für Admin-Benutzer verfügbar).
-
Navigieren Sie zum Bereich Plugins.
-
Laden Sie die Datei
@vcmap-story.tar.gz
hoch. -
Das Plugin steht nun für die Verwendung in Modulen zur Verfügung.
-
-
Neues Modul erstellen:
-
Erstellen Sie im App Configurator ein neues Modul für die Story.
-
Fügen Sie diesem Modul das VC Story Plugin hinzu.
-
-
Plugin konfigurieren:
-
Folgen Sie den Schritten unter Story schrittweise erstellen, um das Plugin zu konfigurieren.
-
2.2.3. Plugin-Konfiguration
{
indexUrl: string; // Pfad zur Story-HTML-Datei
itemsUrl: string; // Pfad zur Story-Konfigurationsdatei (JSON)
}
Schritte zur Einrichtung einer neuen Story:
-
Neuen Ordner für Ihre Story im Publisher datasource-data anlegen – z.B.
datasource-data/stories/my-story
-
VC Story Plugin herunterladen – entpacken & den Inhalt dieses Ordners in Ihren neu erstellten Story-Ordner kopieren
-
Neues Modul im App Configurator erstellen – z.B.
my-story
-
Modul bearbeiten – das VC Story Plugin zum Modul hinzufügen
-
Plugin im App Configurator bearbeiten –
indexUrl
aufindex.html
unditemsUrl
aufitems.json
setzen, falls gewünscht activeOnStartup auftrue
setzen, um die Story beim Laden des Moduls automatisch zu aktivieren -
index.html in einem externen Editor öffnen – Story-Inhalt, Layout und Design anpassen
-
items.json in einem externen Editor öffnen – Aktionen und deren Auslöser definieren
-
Vorhandene Stories migrieren – siehe Vorhandene Stories migrieren, falls vorhanden
-
Die Datei
index.html
bearbeiten – Story-Inhalt, Layout und Design anpassen -
Die Datei
items.json
bearbeiten – Aktionen und deren Auslöser definieren, weitere Informationen finden Sie unter Story Aktionen & Wie Aktionen verwendet werden -
Optional customStory.css – Die Datei
customStory.css
bearbeiten, um Ihrer Story eigene Styles zu geben
3. Zusammenfassung
Das VC Story Plugin bietet eine umfassende Plattform zur Erstellung immersiver, interaktiver 3D-Storytelling-Erlebnisse. Das umfangreiche Aktionssystem, die nahtlose Integration in VC Map und die flexiblen Konfigurationsmöglichkeiten machen es für zahlreiche Anwendungsfälle geeignet – von Präsentationen in der Stadtplanung bis hin zur Vermittlung von Bildungsinhalten.
Die modulare Architektur und das erweiterbare Callback-System des Plugins sorgen dafür, dass es sich an wachsende Storytelling-Anforderungen anpassen kann, während gleichzeitig hohe Performance- und Nutzererlebnis-Standards gewährleistet bleiben.