3D Storytelling: Anpassungsleitfaden

Einleitung

In diesem Leitfaden erfahren Sie, wie Sie mit der Lösung „3D Storytelling“ spannende Geschichten zur Standortbestimmung erstellen können.

Sie können die Storytelling-Lösung auf zwei einfache Arten konfigurieren. Zuerst können Sie die intuitive Benutzeroberfläche der Admin-App mit einem eigenen Konfigurationsbereich verwenden. In diesem Bereich können Nutzer die Haupteigenschaften wie „imageUrl“, „Titel“, „Datum“ und mehr sowohl für die Gesamtgeschichte 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 optimieren. Wenn die Nutzer mit der Konfiguration zufrieden sind, haben sie die Möglichkeit, die generierte JSON-Datei herunterzuladen.

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-Manipulation.

Erste Schritte:

Aktivieren

Eigene Story erstellen

Das Gesamtlayout der Geschichte besteht aus einer Titelstory gefolgt von Kapiteln. Sowohl das Cover als auch ein Kapitel können individuell angepasst werden. Sehen Sie sich an,
wie Sie Storys mit der Admin-App und der Konfigurationsdatei erstellen und anpassen können.

Titelseite

Als Erstes müssen Sie eine Titelseite für Ihre Gesamtgeschichte erstellen. Dadurch werden deiner Story die Übersicht, ein Titelbild und eine Beschreibung hinzugefügt.

Admin-App verwenden

Als Erstes fügen Sie Ihrer Geschichte ein Titelbild hinzu. Dies können Sie in der Admin-App über den folgenden Bildschirm tun:

Image

config.json verwenden

Wenn Sie die Konfigurationsdatei haben, können Sie die folgenden Abschnitte auch direkt hinzufügen:

  • 1. imageUrl: URL der Hauptmediendatei (Bild, GIF oder Video) für die gesamte Story.

Dabei kann es sich um eine beliebige öffentlich zugängliche URL handeln, die auf ein Bild, eine GIF- oder eine Videodatei verweist, die Sie als Hauptmedien für die gesamte Geschichte verwenden möchten.

  • 2. title: Der Titel der gesamten Story.
  • 3. date: Datum oder Zeitraum der Story.
  • 4. description: Eine kurze Beschreibung der Story.
  • 5. createdBy: Der Verfasser oder Autor der Story.
  • 6. imageCredit: Urheber für das Hauptbild.
  • 7. cameraOptions: Anfängliche Kameraeinstellungen für die gesamte Story.

Kapitel

Die Geschichte ist in Kapitel mit jeweils eigenen Variablen unterteilt. Sie können beliebig viele Kapitel erstellen. Wählen Sie zuerst eine Adresse aus und fügen Sie dem Kapitel dann die folgenden Details hinzu.

Admin-App verwenden

Standortsuche: Verwenden Sie die integrierte Suchleiste der Google Maps Platform mit automatischer Vervollständigung, um den Standort zu finden, den Sie anzeigen lassen möchten.

Nachdem Sie einen Ort hinzugefügt haben, können Sie dem Kapitel über die Schaltfläche Bearbeiten neben dem Ort Details hinzufügen:

Image

Fügen Sie Details zum Standort hinzu:

Wenn Sie mit der Gesamtkonfiguration zufrieden sind, laden Sie die JSON-Datei herunter, um sie in der Demo-App zu 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 Kapitelbilds.
  • imageCredit: Urheber für das Bild des Kapitels.
  • content: Textinhalt für das Kapitel.
  • dateTime: Datum oder Zeitraum für das Kapitel.
  • coords: Koordinaten des Orts des Kapitels.
    • lat: Breitengrad.
    • lng: Längengrad.
  • address: Die zum Kapitel gehörige Adresse.

Kameraeinstellungen

Die App bietet viele verschiedene Steuerelemente für die Kamera. In diesem Abschnitt werden die verschiedenen Kameraeinstellungen und deren Anpassung beschrieben.

Image

(Kamera schwenken,zoomen oder neigen, um den perfekten Blickwinkel zu erhalten)

Admin App verwenden

Kamera:Sie können die Bewegungsgeschwindigkeit der Kamera und den Orbittyp anpassen, um das jeweils gewünschte Videoerlebnis zu erhalten.

  • Mit der Standortmarkierung können Sie zwischen der Anzeige einer Markierung an einer bestimmten Position und dem Ausblenden einer Markierung umschalten.

  • Mit Radiusfokus wird ein Vignettenschatten um einen bestimmten Bereich erstellt, ohne einen bestimmten Ort zu präzisieren. Dies eignet sich hervorragend, um einen Stadtteil oder einen ungefähren Ort zu präsentieren.

Image

Hier sehen Sie, wie Sie den Fokus der Kamera ändern können, um einen Bereich anstelle eines bestimmten Punkts zu präsentieren.

config.json verwenden

Sie können alle Kameraparameter auch direkt mithilfe der 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. Es 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 zeigt. Geografisch gesehen stellt es den Winkel zwischen der Kamerasicht und der Nordrichtung dar. Eine Richtung von 0 bedeutet, dass die Kamera nach Norden zeigt.

    • pitch: Mit dem Parameter "head" wird der vertikale Winkel der Kamera festgelegt. Es gibt die Neigung oder Neigung des Kamerabilds an. Eine positive Neigung zeigt nach unten, eine negative nach oben.

    • roll: Der roll-Parameter definiert die Drehung um die Kameraachse. Es stellt die Drehbewegung der Kamera dar. Eine Rolle von 0 bedeutet, dass keine Rotation erfolgt, während positive oder negative Werte eine Rotation nach rechts bzw. links angeben.

  • focusOptions: Optionen, um sich auf einen bestimmten Punkt zu konzentrieren.

  • focusRadius: Radius für den Fokus.

  • showFocus: boolescher Wert, um den Fokus ein- oder auszublenden.

  • showLocationMarker: boolescher Wert zum Ein- oder Ausblenden der Standortmarkierung

Konfiguration speichern

Klicken Sie abschließend auf Kameraposition speichern, um Ihre Kameraposition zu speichern, und dann auf Bearbeitungsmodus verlassen, um Ihre Arbeit zu speichern

Image

Diese Anwendung bietet eine nutzerfreundliche Oberfläche, mit der Sie die 3D-Ansicht anpassen können. Das ist die Admin-App.

Die finale config.json

Die endgültige Datei config.json enthält alle Informationen, die zum Erstellen benutzerdefinierter Storytelling-Erlebnisse erforderlich sind. Sie enthält Details auf der Titelseite, Kapitel und Kameraeinstellungen. Mit dieser Datei können Sie Ihre Story optimieren und dafür sorgen, dass ihr Erscheinungsbild und das Erscheinungsbild Ihren Vorstellungen entspricht.

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. Du kannst Text, Bilder und sogar die Kameraeinstellungen ändern, um deinen Zuschauern ein einzigartiges und immersives Erlebnis zu bieten.

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
    }
  }

Und ein bestimmtes Kapitel kann so aussehen. Kapitel sind ein Array, das viele einzelne Kapitel enthalten kann.

"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

Die Lösung lädt die Storytelling-Konfiguration aus einer lokalen Datei . Dies kann in config.js jedoch einfach 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. 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 Kameraengel und -funktionen zu erhalten.

Fazit

In diesen Dokumenten finden Sie eine Anleitung zur Anpassung der 3D-Storytelling-Anwendung. Wir haben die verschiedenen Optionen kennengelernt, die in der Admin-App verfügbar sind, und wie Sie damit immersive und ansprechende Berichte zur Standortbestimmung erstellen können. Wir haben auch das Erstellen einer benutzerdefinierten Story mithilfe der Datei config.json besprochen. Nächste Schritte

Nachdem Sie gelernt haben, wie Sie die 3D-Storytelling-Anwendung anpassen, können Sie damit beginnen, Ihre eigenen Geschichten zu 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.
  • Erstelle eine Geschichte über eine fiktive Welt oder einen Traum, den du gehabt hast.

Die Möglichkeiten sind einfach endlos. Lassen Sie Ihrer Fantasie freien Lauf und erschaffen Sie etwas ganz Besonderes.