Einführung
In dieser Anleitung werden verschiedene Möglichkeiten zur Anpassung der 3D-Storytelling-Lösung beschrieben, mit denen Sie fesselnde Geschichten mit geografischen Informationen erstellen können.
Sie haben zwei Möglichkeiten, Ihre Storytelling-Lösung zu konfigurieren. Erstens können Sie die intuitive Benutzeroberfläche in der Admin-App mit einem speziellen Konfigurationsbereich verwenden. In diesem Bereich können Nutzer die Haupteigenschaften wie „imageUrl“, „title“ und „date“ sowohl für die gesamte Geschichte als auch für einzelne Kapitel ändern.
Zweitens können Sie die Kameraeinstellungen und Fokusoptionen für jedes Kapitel über die grafische Benutzeroberfläche in der Admin-App anpassen. Wenn Sie mit der Konfiguration zufrieden sind, können Sie die generierte JSON-Datei herunterladen.
Alternativ können Sie die JSON-Datei direkt bearbeiten. Sie können die JSON-Struktur anpassen, die konfigurierte Storytelling-Lösung laden und die Admin-Systemsteuerung umgehen. Dieser duale Ansatz bietet sowohl eine nutzerfreundliche Benutzeroberfläche als auch erweiterte JSON-Manipulation.
Erste Schritte:
Aktivieren
Eigene Geschichte erstellen
Das Layout der Geschichte ist in eine Titelgeschichte und Kapitel unterteilt.
Sowohl die Titelgeschichte als auch ein Kapitel können individuell angepasst werden. Weitere Informationen finden Sie unter
Details zum Erstellen und Anpassen von Geschichten mit der Admin-App
und der Konfigurationsdatei.
Titelseite
Als Erstes müssen Sie eine Titelseite für Ihre gesamte Geschichte erstellen. Dadurch werden der Geschichte eine Übersicht, ein Titelbild und eine Beschreibung hinzugefügt.
Admin-App verwenden
Fügen Sie zuerst eine Titelseite für Ihre Geschichte hinzu. Das geht in der Admin-App über den folgenden Bildschirm:
„config.json“ verwenden
Wenn Sie die Konfigurationsdatei haben, können Sie diese Abschnitte auch direkt in der Datei hinzufügen:
- 1.
imageUrl: URL der Hauptmediendatei (Bild, GIF oder Video) für die gesamte Geschichte.
Das kann eine öffentlich zugängliche URL sein, die auf eine Bild-, GIF- oder Videodatei verweist, die Sie als Hauptmedium für die gesamte Geschichte verwenden möchten.
- 2.
title: Titel der gesamten Geschichte. - 3.
date: Datum oder Zeitraum, der mit der Geschichte verknüpft ist. - 4.
description: Eine kurze Beschreibung der Geschichte. - 5.
createdBy: Der Ersteller oder Autor der Geschichte. - 6.
imageCredit: Urhebernachweis für das Hauptbild. - 7.
cameraOptions: Anfängliche Kameraeinstellungen für die gesamte Geschichte.
Kapitel
Die Geschichte ist in Kapitel unterteilt, die jeweils eigene Variablen haben. Sie können beliebig viele Kapitel erstellen. Wählen Sie zuerst eine Adresse aus und fügen Sie dann die folgenden Details zum Kapitel hinzu.
Admin-App verwenden
Standortsuche: Verwenden Sie die integrierte Google Maps Platform Autocomplete-Suchleiste, um den gewünschten Standort zu finden.
Nachdem Sie einen Standort hinzugefügt haben, können Sie Details zum Kapitel hinzufügen. Klicken Sie dazu neben dem Standort auf die Schaltfläche Bearbeiten:
Fügen Sie Details zum Standort hinzu:
Wenn Sie mit der Gesamtkonfiguration zufrieden sind, laden Sie die JSON-Datei herunter und verwenden Sie sie in der Demo-App.
Mit „config.json“ konfigurieren
Sie können die folgenden Variablen direkt in der heruntergeladenen Datei „config.json“ bearbeiten, um jedes Kapitel anzupassen:
title: Titel des Kapitels.id: Eindeutige Kennung für das Kapitel.imageUrl: URL des Bildes des Kapitels.imageCredit: Urhebernachweis für das Bild des Kapitels.content: Textinhalt für das Kapitel.dateTime: Datum oder Zeitraum, der für das Kapitel spezifisch ist.coords: Koordinaten für den Standort, der mit dem Kapitel verknüpft ist.lat: Breitengrad.lng: Längengrad.
address: Adresse, die mit dem Kapitel verknüpft ist.
Kameraeinstellungen
Die Anwendung bietet viele verschiedene Steuerelemente für die Kamera. In diesem Abschnitt werden die verschiedenen Kameraeinstellungen und ihre Anpassungsmöglichkeiten beschrieben.
(Kamera schwenken,zoomen und neigen, um den perfekten Blickwinkel zu erhalten)
Admin-App verwenden
Kamera:Passen Sie die Geschwindigkeit der Kamerabewegung und den Orbit-Typ an, um die gewünschte Ansicht zu erstellen.
Mit Standortmarkierung können Sie festlegen, ob eine Stecknadel an einem bestimmten Standort angezeigt oder ausgeblendet werden soll.
Mit Radiusfokus wird ein Vignettenschatten um einen bestimmten Bereich erstellt, ohne einen bestimmten Standort zu markieren. Das ist ideal, um eine Nachbarschaft oder einen ungefähren Ort zu präsentieren.
Hier wird gezeigt, wie Sie den Fokus der Kamera ändern, um einen Bereich anstelle eines bestimmten Punkts zu präsentieren.
„config.json“ verwenden
Sie können alle Kameraparameter auch direkt über die JSON-Konfigurationsdatei anpassen:
cameraOptions: Kameraeinstellungen für das Kapitel. (Weitere Informationen zu Kamera winkeln)position: Der Parameter „position“ bestimmt die räumlichen Koordinaten der Kamera in der 3D-Umgebung. Er besteht aus drei Werten: „x“, „y“ und „z“. Jede Koordinate stellt einen Punkt auf der x-, y- und z-Achse dar und definiert die Position der Kamera.heading: Der Parameter „heading“ bezieht sich auf die horizontale Richtung, in die die Kamera gerichtet ist. Geografisch gesehen stellt er den Winkel zwischen der Ansicht der Kamera und der Nordrichtung dar. Ein Wert von 0 bedeutet, dass die Kamera genau nach Norden zeigt.pitch: Der Parameter „pitch“ bestimmt den vertikalen Winkel der Kamera. Er gibt die Neigung der Kameraansicht an. Ein positiver Wert bedeutet, dass die Kamera nach unten zeigt, ein negativer Wert, dass sie nach oben zeigt.roll: Der Parameter „roll“ definiert die Drehung um die Achse der Kamera. Er stellt die Drehbewegung der Kamera dar. Ein Wert von 0 bedeutet keine Drehung, während positive oder negative Werte eine Drehung nach rechts bzw. links angeben.
focusOptions: Optionen zum Fokussieren auf einen bestimmten Punkt.focusRadius: Radius für den Fokus.showFocus: Boolescher Wert, um den Fokus ein- oder auszublenden.showLocationMarker: Boolescher Wert, um die Standortmarkierung ein- oder auszublenden.
Konfiguration speichern
Klicken Sie abschließend auf Kameraposition speichern , um die Kameraposition zu speichern, und dann auf Bearbeitungsmodus verlassen , um Ihre Arbeit zu speichern.
Diese Anwendung bietet eine nutzerfreundliche Benutzeroberfläche, mit der Sie die 3D-Darstellung anpassen können. Das ist die Admin-App.
Die endgültige „config.json“
Die endgültige Datei „config.json“ enthält alle Informationen, die zum Generieren Ihrer benutzerdefinierten Storytelling-Darstellung erforderlich sind. Dazu gehören die Details der Titelseite, die Kapitel und die Kameraeinstellungen. Mit dieser Datei können Sie Ihre Geschichte optimieren und dafür sorgen, dass sie genau so aussieht und sich so anfühlt, wie Sie es möchten.
Laden Sie zuerst die Datei „config.json“ aus der Admin-App herunter oder erstellen Sie eine neue Datei. Öffnen Sie dann die Datei in einem Texteditor und bearbeiten Sie die Werte. Sie können den Text, die Bilder und sogar die Kameraeinstellungen ändern, um für Ihre Zielgruppe eine einzigartige und immersive Darstellung zu erstellen.
Eine JSON-Datei mit der Übersicht über die Geschichte kann so aussehen:
{
"properties": {
"imageUrl": "https://storage.googleapis.com/gmp-3d-tiles-storytelling/assets/images/317-300x160.jpg",
"title": "Title",
"date": "1967",
"description": ""his is where you put descriptions",
"createdBy": "Add author",
"imageCredit": "Add image credit",
"cameraOptions": {
"position": {
"x": -2708127.031960028,
"y": -4260747.583520751,
"z": 3886346.825328216
},
"heading": -1.5708,
"pitch": -0.785398,
"roll": 0
}
}
Und ein bestimmtes Kapitel kann so aussehen. „Chapters“ ist ein Array und kann viele einzelne Kapitel im Array enthalten.
"chapters": [
{
"title": "The Jimmy Hendrix Experience",
"id": 4,
"imageUrl": "https://storage.googleapis.com/gmp-3d-tiles-storytelling/assets/images/401-300x160.jpg",
"imageCredit": "Hunter",
"content": "XYZZZ",
"dateTime": "Aug 10-12 1967",
"coords": {
"lat": 37.7749,
"lng": -122.4194
},
"address": "The Filmore | 1805 Geary Blvd",
"cameraOptions": {
"position": {
"x": -2706472.5713478313,
"y": -4261528.277488908,
"z": 3885143.750529967
},
"heading": 0,
"pitch": 0,
"roll": 0
},
"focusOptions": {
"focusRadius": 3000,
"showFocus": false,
"showLocationMarker": true
}
},
Erweiterte Anpassungen
Sie können in den Code eintauchen und verschiedene andere Anpassungen vornehmen:
Konfigurationsdatei von einem anderen Speicherort laden
Standardmäßig lädt die Lösung die Storytelling-Konfiguration aus einer lokalen Datei . Das lässt sich aber ganz einfach in „config.js“ ändern:
export async function loadConfig(configUrl) {
try {
// Fetch the configuration data from the specified URL.
const configResponse = await fetch(configUrl);
Kamerakonfigurationen
Die Kamera kann weiter über die Datei /utils/cesium.js angepasst werden.
Dort werden eine Reihe wichtiger Variablen definiert, z. B.:
- RADIUS
- BASE_PITCH_RADIANS
- BASE_HEADING_RADIANS
- BASE_ROLL_RADIANS
- DEFAULT_HIGHLIGHT_RADIUS
Sie können diese Variablen anpassen, um verschiedene Kamerawinkel und ‑darstellungen zu erhalten.
Fazit
In diesem Dokument haben wir eine Anleitung zur Anpassung der 3D-Storytelling-Anwendung bereitgestellt. Wir haben die verschiedenen Optionen in der Admin-App untersucht und gezeigt, wie sie verwendet werden können, um immersive und ansprechende Geschichten mit geografischen Informationen zu erstellen. Außerdem haben wir beschrieben, wie Sie mit der Datei „config.json“ eine benutzerdefinierte Geschichte erstellen. Nächste Schritte
Nachdem Sie nun gelernt haben, wie Sie die 3D-Storytelling-Anwendung anpassen, können Sie Ihre eigenen Geschichten erstellen. Hier einige Ideen für den Anfang:
- Erstellen Sie eine Geschichte über Ihre Heimatstadt oder einen Ort, den Sie besucht haben.
- Erstellen Sie eine Geschichte über ein historisches Ereignis oder eine Person, die Sie inspiriert hat.
- Erstellen Sie eine Geschichte über eine fiktive Welt oder einen Traum, den Sie hatten.
Die Möglichkeiten sind einfach endlos. Lassen Sie Ihrer Fantasie freien Lauf und erstellen Sie etwas ganz Besonderes.