3D Storytelling: Anpassungsleitfaden

Einleitung

In diesem Leitfaden erfahren Sie, wie Sie die 3D Storytelling-Lösung anpassen können, um fesselnde Geolocation-Geschichten zu erstellen.

Sie können die Storytelling-Lösung flexibel mit zwei praktischen Methoden 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“ und „Datum“ ändern, und zwar sowohl für die Gesamtgeschichte als auch für einzelne Kapitel.

Zweitens können Sie die Kameraeinstellungen und Fokusoptionen für jedes Kapitel über das GUI in der Admin-App optimieren. Wenn Nutzer 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 doppelte Ansatz bietet sowohl eine nutzerfreundliche Oberfläche als auch eine erweiterte JSON-Bearbeitung.

Erste Schritte:

Aktivieren

Erstelle deine eigene Geschichte

Das Gesamtlayout der Geschichte ist in eine Titelgeschichte gefolgt von Kapiteln unterteilt. Titel und Kapitel können individuell angepasst werden. Hier erfahren Sie,
wie Sie die Storys sowohl mit der Admin-App als auch mit der Konfigurationsdatei erstellen und anpassen können.

Titelseite

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

Admin App verwenden

Zuerst fügen Sie eine Titelseite für Ihre Geschichte hinzu. Verwenden Sie dazu den folgenden Bildschirm in der Admin-App:

Image

config.json verwenden

Wenn Sie die Konfigurationsdatei haben, können Sie außerdem diese Abschnitte direkt in die Datei einfügen:

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

Das kann eine beliebige öffentlich zugängliche URL sein, die auf ein Bild, ein GIF oder eine Videodatei verweist, das Sie als Hauptmedium für die gesamte Geschichte verwenden möchten.

  • 2. title: Titel der gesamten Geschichte.
  • 3. date: Datum oder Zeitraum der Meldung.
  • 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 enthalten. 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 von 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 die Schaltfläche Bearbeiten klicken:

Image

Details zum Standort hinzufügen:

Wenn Sie mit der Gesamtkonfiguration zufrieden sind, laden Sie die JSON-Datei herunter, die Sie in der Demo-App verwenden können.

Mit config.json konfigurieren

Sie können die folgenden Variablen direkt in der heruntergeladenen config.json-Datei bearbeiten, um die einzelnen 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 des Kapitels.
  • coords: Koordinaten des Standorts, der dem Kapitel zugeordnet ist.
    • lat: Breitengrad.
    • lng: Längengrad.
  • address: Adresse des Ortsverbands.

Kameraeinstellungen

Die App bietet viele verschiedene Kamerasteuerelemente. In diesem Abschnitt werden die verschiedenen Kameraeinstellungen und ihre Anpassung beschrieben.

Image

(Schwenken, zoomen oder neigen Sie die Kamera für den perfekten Blickwinkel)

Admin App verwenden

Kamera:Passe die Bewegungsgeschwindigkeit und Umlauftyp der Kamera an, um das gewünschte Videoerlebnis zu erzielen.

  • Mit der Standortmarkierung können Sie umschalten, ob die Markierung an einem bestimmten Ort angezeigt oder ausgeblendet werden soll.

  • Bei der Option Radiusfokus wird ein Vignettenschatten um einen bestimmten Bereich herum erstellt, ohne einen bestimmten Ort zu bestimmen. Das ist ideal, um ein Viertel oder einen ungefähren Ort zu präsentieren.

Image

Hier sehen Sie, 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 mit der JSON-Konfigurationsdatei anpassen:

  • cameraOptions: Kameraeinstellungen für das Kapitel. Weitere Informationen über Kamerawinkel

    • position: Der Positionsparameter bestimmt die räumlichen Koordinaten der Kamera in der 3D-Umgebung. Sie besteht aus drei Werten: x, y und z. Jede Koordinate repräsentiert einen Punkt auf den x-, y- und z-Achsen und definiert die Position der Kamera.

    • heading: Der Parameter „heading“ bezieht sich auf die horizontale Richtung, in die die Kamera ausgerichtet ist. Geographisch stellt er den Winkel zwischen der Kamerasicht und der Nordrichtung dar. Eine Richtung von 0 gibt an, dass die Kamera nach Norden zeigt.

    • pitch: Der Parameter für die Tonhöhe bestimmt den vertikalen Winkel der Kamera. Es gibt die Neigung oder Neigung des Kamerablicks an. Eine positive Neigung zeigt nach unten, eine negative Neigung nach oben.

    • roll: Der Roll-Parameter definiert die Drehung um die Kameraachse. Sie repräsentiert die Drehbewegung der Kamera. Eine Roll von 0 gibt an, dass es keine Drehung gibt, während positive oder negative Werte eine Rotation nach rechts oder links kennzeichnen.

  • 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 zum Ein- oder Ausblenden der Standortmarkierung.

Konfiguration speichern

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

Image

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

Die endgültige config.json

Die endgültige Datei config.json enthält alle Informationen, die Sie für ein individuelles Storytelling benötigen. Sie enthält Informationen zur Titelseite, Kapitel und Kameraeinstellungen. Mit dieser Datei können Sie Ihre Story optimieren und dafür sorgen, dass sie genau so aussieht und anfühlt, wie Sie es sich vorstellen.

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

Eine JSON-Datei mit der Übersicht der 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
    }
  }

So kann ein bestimmtes Kapitel 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 sich den Code genauer ansehen und verschiedene andere Anpassungen vornehmen:

Konfigurationsdatei aus einem anderen Speicherort laden

Die Storytelling-Konfiguration wird standardmäßig aus einer lokalen Datei geladen . Dies kann jedoch einfach in config.js 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 Kamerawinkel und -funktionen zu erhalten.

Fazit

In diesen Dokumenten finden Sie einen Leitfaden zum Anpassen der Anwendung „3D Storytelling“. Wir haben die verschiedenen Optionen in der Admin-App kennengelernt und erfahren, wie sie zum Erstellen immersiver und ansprechender Geschichten zur Standortbestimmung verwendet werden können. Außerdem wurde das Erstellen einer benutzerdefinierten Story mithilfe der Datei „config.json“ erläutert. 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.
  • Erzähle 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.