Einführung
In diesem Leitfaden erfahren Sie, wie Sie die 3D-Storytelling-Lösung anpassen können, um ansprechende Geschichten zu erstellen, die sich auf bestimmte Orte beziehen.
Sie haben die Möglichkeit, die Storytelling-Lösung auf zwei praktische Arten zu konfigurieren. Dazu können Sie die intuitive Benutzeroberfläche 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 Story als auch für einzelne Kapitel ändern.
Zweitens können Sie die Kameraeinstellungen und Fokusoptionen für jedes Kapitel über die Benutzeroberfläche in der Admin-App optimieren. Sobald die Konfiguration zufriedenstellend ist, können Nutzer 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 das Admin-Steuerfeld umgehen. Dieser doppelte Ansatz bietet sowohl eine nutzerfreundliche Oberfläche als auch eine erweiterte JSON-Bearbeitung.
Erste Schritte:
Aktivieren
Eigene Story erstellen
Das Gesamtlayout der Story ist in eine Titelstory und die folgenden Kapitel unterteilt.
Sowohl das Cover als auch ein Kapitel können individuell angepasst werden.
Hier finden Sie weitere Informationen dazu, wie Sie Stories sowohl über die Admin-App als auch über die Konfigurationsdatei erstellen und anpassen können.
Titelseite
Als Erstes müssen Sie eine Titelseite für Ihre gesamte Story 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 Story hinzu. Dazu verwenden Sie in der Admin-App den folgenden Bildschirm:
config.json verwenden
Wenn Sie die Konfigurationsdatei haben, können Sie die folgenden Abschnitte direkt in die Datei einfügen:
- 1.
imageUrl: URL der Hauptmediendatei (Bild, GIF oder Video) für die gesamte Story.
Das kann eine beliebige öffentlich zugängliche URL sein, die auf ein Bild, GIF oder eine Videodatei verweist, die du als Hauptmedium für die gesamte Story verwenden möchtest.
- 2.
title: Titel der gesamten Geschichte. - 3.
date: Das Datum oder der Zeitraum, der mit der Meldung verknüpft ist. - 4.
description: Eine kurze Beschreibung der Meldung. - 5.
createdBy: Der Ersteller oder Autor der Meldung. - 6.
imageCredit: Bildung des Hauptbilds. - 7.
cameraOptions: Die anfänglichen Kameraeinstellungen für die gesamte Story.
Kapitel
Die Geschichte ist in Kapitel unterteilt, die jeweils eigene Variablen haben. Du kannst beliebig viele Kapitel erstellen. Sie wählen zuerst eine Adresse aus und fügen dann die folgenden Details zum Kapitel hinzu.
Admin App verwenden
Standortsuche: Verwenden Sie die integrierte Suchleiste für die automatische Vervollständigung der Google Maps Platform, um den gewünschten Standort zu finden.
Nachdem Sie einen Ort hinzugefügt haben, können Sie dem Kapitel Details hinzufügen, indem Sie neben dem Ort auf die Schaltfläche Bearbeiten klicken:
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
Du kannst die folgenden Variablen direkt in der heruntergeladenen config.json-Datei bearbeiten, um jedes Kapitel anzupassen:
title: Titel des Kapitels.id: Eindeutige Kennung für das Kapitel.imageUrl: URL des Bilds des Kapitels.imageCredit: Quellenangabe 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 des Standorts, der dem Kapitel zugeordnet ist.lat: Breitengrad.lng: Längengrad.
address: Adresse, die sich auf das Kapitel bezieht.
Kameraeinstellungen
Die Anwendung bietet viele verschiedene Steuerelemente für die Kamera. In diesem Abschnitt werden die verschiedenen Kameraeinstellungen und ihre Anpassung beschrieben.
(schwenken, zoomen, neigen Sie die Kamera, um den perfekten Blickwinkel zu finden)
Admin-App verwenden
Kamera:Passen Sie die Kamerabewegungsgeschwindigkeit und den Orbittyp an, um die gewünschte Wiedergabe zu erzielen.
Mit der Standortmarkierung können Sie umschalten, ob die Markierung an einem bestimmten Ort angezeigt oder ausgeblendet werden soll.
Mit dem Radius-Fokus wird ein Vignettenschatten um einen bestimmten Bereich herum erzeugt, ohne einen bestimmten Ort zu markieren. Das eignet sich hervorragend, um eine Nachbarschaft oder eine allgemeine Gegend zu präsentieren.
Hier wird gezeigt, wie Sie den Fokus der Kamera ändern, um einen Bereich statt 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 Kamerawinkeln)position: Der Parameter „position“ bestimmt die räumlichen Koordinaten der Kamera in der 3D-Umgebung. Sie besteht aus drei Werten: x, y und z. Jede Koordinate stellt einen Punkt in den Achsen X, Y und Z dar, der die Position der Kamera definiert.heading: Der Parameter „heading“ bezieht sich auf die horizontale Richtung, in die die Kamera ausgerichtet ist. In geografischen Begriffen entspricht er dem Winkel zwischen dem Blickwinkel der Kamera und der Nordrichtung. Ein Wert von 0 bedeutet, dass die Kamera genau nach Norden zeigt.pitch: Der Neigungsparameter bestimmt den vertikalen Winkel der Kamera. Sie gibt die Neigung der Kamera an. Ein positiver Neigungswinkel zeigt nach unten, während ein negativer Neigungswinkel nach oben zeigt.roll: Der Roll-Parameter definiert die Drehung um die Kameraachse. Er steht für die Drehbewegung der Kamera. Ein Wert von 0 bedeutet keine Drehung, während positive oder negative Werte eine Drehung nach rechts bzw. links bedeuten.
focusOptions: Optionen zum Fokussieren auf einen bestimmten Punkt.focusRadius: Radius für den Fokus.showFocus: Boolescher Wert zum Ein- oder Ausblenden des Fokus.showLocationMarker: Boolescher Wert, mit dem die Standortmarkierung angezeigt oder ausgeblendet wird.
Konfiguration speichern
Klicken Sie abschließend auf Kameraposition speichern, um die Kameraposition zu speichern, und dann auf Bearbeitungsmodus beenden, um Ihre Arbeit zu speichern.
Diese Anwendung bietet eine nutzerfreundliche Oberfläche, mit der Sie die 3D-Darstellung anpassen können. Das ist die Admin-App.
Die finale config.json
Die finale config.json-Datei enthält alle Informationen, die zum Generieren Ihrer benutzerdefinierten Storytelling-Umgebung erforderlich sind. Dazu gehören die Details der Titelseite, die Kapitel und die Kameraeinstellungen. Mit dieser Datei können Sie Ihre Story optimieren und dafür sorgen, dass sie genau so aussieht, wie Sie es sich vorstellen.
Laden Sie zuerst die Datei „config.json“ aus der Admin-App herunter oder erstellen Sie eine neue. Öffnen Sie die Datei dann in einem Texteditor und bearbeiten Sie die Werte. Du kannst Text, Bilder und sogar die Kameraeinstellungen ändern, um deinen Zuschauern ein einzigartiges und immersives Erlebnis zu bieten.
Eine JSON-Datei für die Storyübersicht könnte 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
}
}
Ein bestimmtes Kapitel kann so aussehen: „Kapitel“ ist ein Array und kann viele einzelne Kapitel umfassen.
"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 den Code genauer untersuchen und weitere Anpassungen vornehmen:
Konfigurationsdatei aus 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 über die Datei „/utils/cesium.js“ weiter angepasst werden.
Sie definiert eine Reihe wichtiger Variablen, wie zum Beispiel:
- RADIUS
- BASE_PITCH_RADIANS
- BASE_HEADING_RADIANS
- BASE_ROLL_RADIANS
- DEFAULT_HIGHLIGHT_RADIUS
Sie können diese Variablen anpassen, um verschiedene Kamerawinkel und -perspektiven zu erhalten.
Fazit
In diesen Dokumenten finden Sie eine Anleitung zum Anpassen der 3D-Storytelling-Anwendung. Wir haben die verschiedenen Optionen in der Admin-App kennengelernt und erfahren, wie Sie damit immersive und ansprechende Geolocation-Geschichten erstellen können. Außerdem haben wir das Erstellen einer benutzerdefinierten Story mithilfe der Datei „config.json“ besprochen. Nächste Schritte
Nachdem Sie nun gelernt haben, wie Sie die Anwendung „3D Storytelling“ anpassen, können Sie Ihre eigenen Geschichten erstellen. Hier einige Ideen für den Anfang:
- Erstelle eine Geschichte über deine Heimatstadt oder einen Ort, den du besucht hast.
- Erstelle eine Geschichte über ein historisches Ereignis oder eine Person, die dich inspiriert hat.
- Erschaffe eine Geschichte über eine fiktive Welt oder einen Traum, den du schon einmal hattest.
Die Möglichkeiten sind einfach endlos. Lassen Sie Ihrer Fantasie freien Lauf und erschaffen Sie etwas ganz Besonderes.