Einführung
In diesem Leitfaden werden verschiedene Möglichkeiten zur Anpassung der 3D Storytelling-Lösung beschrieben, mit denen Sie fesselnde Geolocation-Storys erstellen können.
Sie haben die Möglichkeit, die Storytelling-Lösung auf zwei bequeme Arten 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 wichtigsten Eigenschaften wie „imageUrl“, „title“, „date“ und mehr 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 GUI in der Admin-App optimieren. 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 das Admin-Steuerfeld umgehen. Dieser duale Ansatz bietet sowohl eine nutzerfreundliche Oberfläche als auch erweiterte JSON-Bearbeitung.
Erste Schritte
Aktivieren
Eigene Geschichte erstellen
Das Gesamtlayout der Story ist in eine Titelgeschichte und anschließende Kapitel unterteilt.
Sowohl das Cover als auch ein Kapitel können individuell angepasst werden.
finden Sie Details dazu, wie die Geschichten sowohl mit der Admin-App als auch mit der Konfigurationsdatei erstellt und angepasst werden können.
Titelseite
Als Erstes müssen Sie eine Titelseite für Ihre gesamte Story erstellen. Dadurch werden Ihrer Geschichte die Übersicht, ein Titelbild und eine Beschreibung hinzugefügt.
Admin-App verwenden
Fügen Sie zuerst ein Deckblatt für Ihre Geschichte hinzu. Das können Sie in der Admin-App auf dem folgenden Bildschirm tun:
„config.json“ verwenden
Wenn Sie die Konfigurationsdatei haben, können Sie diese Abschnitte auch direkt in die Datei einfügen:
- 1.
imageUrl: URL der Hauptmediendatei (Bild, GIF oder Video) für die gesamte Story.
Dies kann eine beliebige öffentlich zugängliche URL sein, die auf eine Bild-, GIF- oder Videodatei verweist, die Sie als Hauptmedium für die gesamte Story verwenden möchten.
- 2.
title: Titel der gesamten Geschichte. - 3.
date: Das Datum oder der Zeitraum, der mit der Story verknüpft ist. - 4.
description: Eine kurze Beschreibung der Story. - 5.
createdBy: Der Ersteller oder Autor der Geschichte. - 6.
imageCredit: Bildnachweis für das Hauptbild. - 7.
cameraOptions: Anfängliche Kameraeinstellungen für die gesamte Story.
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 Suchleiste der Google Maps Platform mit automatischer Vervollständigung, um den gewünschten Standort zu finden.
Nachdem Sie einen Standort hinzugefügt haben, können Sie dem Kapitel Details hinzufügen, indem Sie neben dem Standort auf den Button Bearbeiten klicken:
Fügen Sie Details zum Standort hinzu:
Wenn Sie mit der Gesamtkonfiguration zufrieden sind, laden Sie die JSON-Datei herunter. Sie können sie dann in der Demo-App verwenden.
Mit config.json konfigurieren
Sie können die folgenden Variablen direkt in der heruntergeladenen Datei „config.json“ bearbeiten, um die einzelnen Kapitel anzupassen:
title: Titel des Kapitels.id: Eindeutige Kennung für das Kapitel.imageUrl: URL des Bildes für das Kapitel.imageCredit: Bildnachweis für das Bild des Kapitels.content: Textinhalt für das Kapitel.dateTime: Datum oder Zeitraum, der für das Kapitel relevant ist.coords: Koordinaten für den mit dem Kapitel verknüpften Ort.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.
(Schwenke,zoome und neige die Kamera, um den perfekten Blickwinkel zu finden)
Admin-App verwenden
Kamera: Passen Sie die Geschwindigkeit der Kamerabewegung und den Umlaufbahntyp an, um die gewünschte Ansicht zu erstellen.
Mit Standortmarkierung können Sie eine Stecknadel an einem bestimmten Ort ein- oder ausblenden.
Mit Radiusfokus wird ein Vignettenschatten um einen bestimmten Bereich erstellt, ohne einen bestimmten Ort festzulegen. Das ist ideal, um ein Viertel oder einen ungefähren Ort zu zeigen.
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 auch alle Kameraparameter direkt über die JSON-Konfigurationsdatei anpassen:
cameraOptions: Kameraeinstellungen für das Kapitel. (Weitere Informationen zu Kamerawinkeln)position: Der Positionsparameter 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, der die Position der Kamera definiert.heading: Der Parameter „heading“ bezieht sich auf die horizontale Richtung, in die die Kamera zeigt. In geografischer Hinsicht ist dies der Winkel zwischen der Kameraansicht und der Nordrichtung. Eine Ausrichtung von 0 bedeutet, dass die Kamera nach Norden zeigt.pitch: Der Parameter „pitch“ bestimmt den vertikalen Winkel der Kamera. Er gibt die Neigung der Kameraansicht an. Eine positive Neigung zeigt nach unten, eine negative Neigung nach oben.roll: Der Rollparameter definiert die Drehung um die Kameraachse. Es stellt die Drehbewegung der Kamera dar. Ein Rollwinkel von 0 bedeutet, dass keine Drehung vorliegt, 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 Oberfläche, über die Sie die 3D-Ansicht anpassen können. Dies 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-Anwendung 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 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 die Datei dann in einem Texteditor und bearbeiten Sie die Werte. Sie können den Text, die Bilder und sogar die Kameraeinstellungen ändern, um ein einzigartiges und immersives Erlebnis für Ihr Publikum zu schaffen.
Eine JSON-Datei mit einer Story-Übersicht 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
}
}
Ein bestimmtes Kapitel kann so aussehen. „Chapters“ ist ein Array und kann viele einzelne Kapitel 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 den Code genauer untersuchen und weitere Anpassungen vornehmen:
Konfigurationsdatei von einem anderen Speicherort laden
Standardmäßig lädt die Lösung die Storytelling-Konfiguration aus einer lokalen Datei . Dies kann jedoch in config.js leicht geändert werden:
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.
Darin werden eine Reihe wichtiger Variablen definiert, z. B.:
- RADIUS
- BASE_PITCH_RADIANS
- BASE_HEADING_RADIANS
- BASE_ROLL_RADIANS
- DEFAULT_HIGHLIGHT_RADIUS
Du kannst diese Variablen anpassen, um verschiedene Kamerawinkel und -erlebnisse zu erhalten.
Fazit
In diesem Dokument finden Sie eine Anleitung zum Anpassen der 3D-Storytelling-Anwendung. Wir haben uns die verschiedenen Optionen in der Admin-App angesehen und wie sie verwendet werden können, um immersive und ansprechende Geolocation-Geschichten zu erstellen. Außerdem haben wir den Prozess zum Erstellen einer benutzerdefinierten Story mithilfe der Datei „config.json“ besprochen. Nächste Schritte
Nachdem Sie nun gelernt haben, wie Sie die 3D Storytelling-Anwendung anpassen, können Sie mit dem Erstellen eigener Geschichten beginnen. Hier einige Ideen für den Anfang:
- Erstellen Sie eine Geschichte über Ihre Heimatstadt oder einen Ort, den Sie besucht haben.
- Erstelle eine Geschichte über ein historisches Ereignis oder eine Person, die dich inspiriert hat.
- Erstelle eine Geschichte über eine fiktive Welt oder einen Traum, den du hattest.
Die Möglichkeiten sind einfach endlos. Lassen Sie Ihrer Fantasie freien Lauf und erstellen Sie etwas ganz Besonderes.