3D Storytelling: Anpassungsleitfaden

Aktivieren

• API für fotorealistische 3D-Kacheln
• Places API

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

Zunächst erstellen Sie eine Titelseite für den gesamten . Dadurch werden der Übersicht, ein Titelbild und eine Beschreibung zu Ihrer Story hinzugefügt.

Admin App verwenden

Zunächst fügen Sie eine Titelseite für Ihre Geschichte hinzu. Dies erfolgt über die Admin App. mithilfe des folgenden Bildschirms:

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 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 Story.
• 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 enthalten. Du kannst 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: Sie können die integrierte automatische Vervollständigung der Google Maps Platform verwenden. um den gewünschten Standort zu finden.

Nachdem du einen Ort hinzugefügt hast, kannst du dem Kapitel Details hinzufügen. Klicke dazu neben dem Ort auf die Schaltfläche Bearbeiten:

Details zum Standort hinzufügen:

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 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 festlegen, ob eine Markierung an einem bestimmten Ort angezeigt oder ausgeblendet werden soll.

• Mit der Option Radiusfokus wird ein Vignettenschatten um einen bestimmten Bereich ohne um 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 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 mit 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 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 Neigungsparameter bestimmt den vertikalen Winkel der Kamera. Sie gibt die Neigung der Kamera an. A eine positive Tonhöhe nach unten, eine negative nach oben zeigt.

  • roll: Der Roll-Parameter definiert die Drehung um die Kameraachse. Er steht für 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.

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 endgültige Datei config.json enthält alle Informationen, die zum Generieren der Datei eine individuelle Storytelling-Erfahrung. Dazu gehören die Details der Titelseite, die Kapitel und die Kameraeinstellungen. Mit dieser Datei kannst du deine Story optimieren und dafür sorgen, dass sie genau so aussieht, wie du es dir vorstellst.

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 Text, Bilder und sogar die Kameraeinstellungen ändern, um deinen Zuschauern ein einzigartiges und 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
    }
  }

Ein bestimmtes Kapitel kann so 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

Standardmäßig lädt die Lösung die Storytelling-Konfiguration aus einer lokalen 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 -perspektiven 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.