3D Storytelling: Anpassungsleitfaden

Einführung

In diesem Leitfaden erfahren Sie, wie Sie mit der 3D-Storytelling-Lösung können angepasst werden, sodass Sie spannende Geschichten zur Standortbestimmung erstellen können.

Sie können die Storytelling-Lösung flexibel auf zwei Arten konfigurieren: praktischen Methoden. Zunächst können Sie die intuitive Benutzeroberfläche verwenden, die im Admin-App mit eigenem Konfigurationsbereich In diesem Bereich können Nutzer die Haupteigenschaften wie "imageUrl", "title" und "date" sowohl für die Gesamtgeschichte als auch für einzelne Kapitel.

Außerdem können Sie die Kameraeinstellungen und Fokusoptionen für jedes über das GUI in der Admin-App. Sobald sie mit der Konfiguration zufrieden sind, 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 nutzerfreundliche Oberfläche und erweiterte JSON-Bearbeitung.

Erste Schritte:

<ph type="x-smartling-placeholder">

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. Jetzt ansehen:
Details dazu, wie die Geschichten mit der Admin App erstellt und angepasst werden können sowie die Konfigurationsdatei.

Titelseite

Zunächst erstellen Sie eine Titelseite für den gesamten . 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. Dies erfolgt über die Admin App. mithilfe des folgenden Bildschirms:

Image

config.json verwenden

Wenn Sie die Konfigurationsdatei haben, können Sie diese Abschnitte der Datei:

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

Das kann jede öffentlich zugängliche URL sein, die auf ein Bild, ein GIF oder ein Video 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 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. Sie können kannst du beliebig viele Kapitel erstellen. Wählen Sie zuerst eine Adresse aus und fügen Sie dann die folgenden Details zum

Admin App verwenden

Standortsuche: Sie können die integrierte automatische Vervollständigung der Google Maps Platform verwenden. um den gewünschten Standort zu finden.

Nachdem Sie einen Ort hinzugefügt haben, können Sie Details zum Kapitel hinzufügen, indem Sie auf das Bearbeiten neben dem Standort:

Image

Details zum Standort hinzufügen:

Sobald Sie mit der Gesamtkonfiguration zufrieden sind, laden Sie die JSON-Datei herunter und können Sie es 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 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. Dieser Abschnitt werden die verschiedenen Kameraeinstellungen vorgestellt und erklärt, wie Sie sie anpassen können.

Image

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

Admin App verwenden

Kamera:Passen Sie die Bewegungsgeschwindigkeit und Umlauftyp der Kamera an. ausgewähltes Videoerlebnis.

  • Mit der Standortmarkierung können Sie die Anzeige einer Markierung an einem bestimmten oder verbergen.

  • Mit der Option Radiusfokus wird ein Vignettenschatten um einen bestimmten Bereich ohne um einen bestimmten Standort zu bestimmen. Dies eignet sich hervorragend, um ein Viertel zu präsentieren. oder den ungefähren Ort.

Image

Hier sehen Sie, wie Sie den Fokus der Kamera ändern, um einen Bereich zu präsentieren, anstatt einen bestimmten Punkt zu erreichen.

config.json verwenden

Sie können alle Kameraparameter auch direkt mit der JSON-Konfiguration anpassen Datei:

  • cameraOptions: Kameraeinstellungen für das Kapitel. Weitere Informationen zur Kamera Winkel)

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

    • heading: Der Parameter „heading“ bezieht sich auf die horizontale Richtung in auf das die Kamera gerichtet ist. In geografischer Hinsicht steht er für die Winkel zwischen der Kamerasicht und der Nordrichtung. Eine Überschrift mit 0 zeigt an, dass die Kamera nach Norden zeigt.

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

    • roll: Der Roll-Parameter definiert die Drehung um den . Sie repräsentiert die Drehbewegung der Kamera. Ein Wurf von 0 gibt keine Rotation an, während positive oder negative Werte ein nach rechts oder links drehen.

  • 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 Ihre Kameraposition zu speichern. Klicken Sie auf Bearbeitungsmodus beenden, um Ihre Arbeit zu speichern.

Image

Diese Anwendung bietet eine benutzerfreundliche Oberfläche, mit der Sie das 3D-Erlebnis. Dies ist die Admin-App.

Die endgültige config.json

Die endgültige Datei config.json enthält alle Informationen, die zum Generieren der Datei eine individuelle Storytelling-Erfahrung. Sie enthält Informationen zur Titelseite, Kapitel und Kameraeinstellungen. Mit dieser Datei können Sie Ihre Story optimieren und sicherstellen, sieht und fühlt sich genau so an, wie Sie es sich vorstellen.

Laden Sie zuerst die Datei „config.json“ aus der Admin-App herunter oder eine ganz neue erstellen. Öffnen Sie dann die Datei in einem Texteditor wenn Sie die Werte bearbeiten. Du kannst den Text, die Bilder und sogar die Kamera um ein einzigartiges und immersives Erlebnis für Ihre Zielgruppe zu schaffen.

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 sind ein Array und können einzelnen Kapiteln innerhalb des Arrays.

"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 Lösung lädt die Storytelling-Konfiguration eine lokale Datei . 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 haben wir einen Leitfaden zum Anpassen des 3D-Storytellings bereitgestellt. . Wir haben uns die verschiedenen Optionen angesehen, die in der Admin-App verfügbar sind, und wie Sie damit immersive und ansprechende Geschichten zur Standortbestimmung erstellen können. Mi. haben auch das Erstellen einer benutzerdefinierten Story mithilfe der config.json besprochen. -Datei. 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. Lass deiner Fantasie freien Lauf und erschaffe etwas wirklich Besonderes erleben.