Dostosowywanie marketingu narracyjnego 3D

Wprowadzenie

Z tego przewodnika dowiesz się, jak dostosować rozwiązanie 3D Storytelling, aby tworzyć wciągające historie oparte na geolokalizacji.

Możesz skonfigurować rozwiązanie do opowiadania historii na 2 wygodne sposoby. Po pierwsze, możesz użyć intuicyjnego interfejsu dostępnego w aplikacji Admin, który zawiera specjalny panel konfiguracji. W tym panelu użytkownicy mogą modyfikować główne właściwości, takie jak imageUrl, tytuł, data i inne, zarówno w przypadku całej historii, jak i poszczególnych rozdziałów.

Po drugie, możesz dostosować ustawienia aparatu i opcje ostrości dla każdego rozdziału za pomocą interfejsu GUI w aplikacji administratora. Gdy użytkownicy będą zadowoleni z konfiguracji, mogą pobrać wygenerowany plik JSON.

Możesz też bezpośrednio edytować plik JSON. Możesz dostosować strukturę JSON, wczytać skonfigurowane rozwiązanie do opowiadania historii i pominąć panel sterowania administracyjnego. To podwójne podejście zapewnia zarówno przyjazny interfejs użytkownika, jak i zaawansowaną manipulację kodem JSON.

Pierwsze kroki:

Włącz

Tworzenie własnej historii

Ogólny układ historii jest podzielony na historię okładkową, a następnie na rozdziały. Zarówno okładkę, jak i rozdział można dostosować indywidualnie. Sprawdź
szczegóły tworzenia i dostosowywania wystaw za pomocą aplikacji administratora oraz pliku konfiguracyjnego.

strona tytułowa

Najpierw musisz utworzyć stronę tytułową całej historii. Do Twojej historii zostaną dodane omówienie, zdjęcie główne i opis.

Korzystanie z aplikacji administratora

Zacznij od dodania strony tytułowej do swojej historii. Możesz to zrobić w aplikacji Admin na tym ekranie:

obraz

Używanie pliku config.json

Jeśli masz plik konfiguracyjny, możesz też bezpośrednio dodać do niego te sekcje:

  • 1. imageUrl: adres URL głównego pliku multimedialnego (obrazu, GIF-a lub filmu) dla całej historii.

Może to być dowolny publicznie dostępny adres URL wskazujący obraz, GIF lub plik wideo, którego chcesz użyć jako głównego elementu multimedialnego w całej historii.

  • 2. title: tytuł całej historii.
  • 3. date: data lub okres powiązany z relacją.
  • 4. description: Krótki opis historii.
  • 5. createdBy: twórca lub autor historii.
  • 6. imageCredit: Informacje o autorze głównego obrazu.
  • 7. cameraOptions: początkowe ustawienia kamery dla całej historii.

Rozdziały

Historia jest podzielona na rozdziały, z których każdy ma własny zestaw zmiennych. Możesz utworzyć dowolną liczbę rozdziałów. Zacznij od wybrania adresu, a następnie dodaj do rozdziału te informacje:

Korzystanie z aplikacji administratora

Wyszukiwanie lokalizacji: użyj zintegrowanego paska wyszukiwania Autocomplete w Google Maps Platform, aby znaleźć lokalizację, którą chcesz wyświetlić.

Po dodaniu lokalizacji możesz dodać szczegóły do rozdziału, klikając przycisk Edytuj obok lokalizacji:

obraz

Dodaj szczegóły lokalizacji:

Gdy będziesz zadowolony(-a) z ogólnej konfiguracji, pobierz plik JSON i użyj go w aplikacji w wersji demonstracyjnej.

Konfigurowanie za pomocą pliku config.json

Aby dostosować poszczególne rozdziały, możesz edytować te zmienne bezpośrednio w pobranym pliku config.json:

  • title: tytuł rozdziału.
  • id: unikalny identyfikator rozdziału.
  • imageUrl: adres URL obrazu rozdziału.
  • imageCredit: Informacje o autorze zdjęcia w rozdziale.
  • content: tekst rozdziału.
  • dateTime: data lub okres związany z rozdziałem.
  • coords: współrzędne lokalizacji powiązanej z rozdziałem.
    • lat: szerokość geograficzna,
    • lng: długość geograficzna.
  • address: Adres powiązany z rozdziałem.

Ustawienia aparatu

Aplikacja udostępnia wiele różnych opcji sterowania aparatem. W tej sekcji znajdziesz informacje o różnych ustawieniach aparatu i sposobach ich dostosowywania.

obraz

(Obróć,powiększ i przechyl kamerę, aby uzyskać idealny kąt widzenia)

Korzystanie z aplikacji Administrator

Kamera: dostosuj szybkość ruchu kamery i typ orbity, aby uzyskać wybrany sposób wyświetlania.

  • Znacznik lokalizacji umożliwia włączanie i wyłączanie wyświetlania pinezki w określonej lokalizacji.

  • Skupienie na promieniu tworzy winietę wokół określonego obszaru bez wskazywania konkretnej lokalizacji. To świetny sposób na zaprezentowanie okolicy lub ogólnego obszaru.

obraz

Pokazuje, jak zmienić ostrość kamery, aby pokazać obszar zamiast konkretnego punktu.

Używanie pliku config.json

Możesz też dostosować wszystkie parametry kamery bezpośrednio za pomocą pliku konfiguracyjnego JSON:

  • cameraOptions: ustawienia kamery dla rozdziału. (więcej informacji o kątach kamery)

    • position: parametr position określa współrzędne przestrzenne kamery w środowisku 3D. Składa się z 3 wartości: x, y i z. Każdy współrzędny punkt reprezentuje punkt na osiach x, y i z, określając położenie kamery.

    • heading: parametr kierunku odnosi się do kierunku poziomego, w którym skierowana jest kamera. W terminologii geograficznej oznacza to kąt między polem widzenia kamery a kierunkiem północnym. Kierunek 0° oznacza, że kamera jest skierowana na północ.

    • pitch: parametr pitch określa kąt pionowy kamery. Oznacza to pochylenie lub nachylenie widoku kamery. Dodatni kąt nachylenia oznacza, że kamera jest skierowana w dół, a ujemny – w górę.

    • roll: parametr roll określa obrót wokół osi kamery. Reprezentuje ruch obrotowy kamery. Wartość 0 oznacza brak rotacji, a wartości dodatnie lub ujemne oznaczają odpowiednio rotację w prawo lub w lewo.

  • focusOptions: opcje skupienia się na konkretnym punkcie.

  • focusRadius: promień ostrości.

  • showFocus: wartość logiczna określająca, czy ostrość ma być widoczna czy ukryta.

  • showLocationMarker: wartość logiczna określająca, czy znacznik lokalizacji ma być widoczny.

Zapisywanie konfiguracji

Na koniec kliknij Zapisz pozycję kamery, aby zapisać pozycję kamery, a następnie kliknij Opuść tryb edycji, aby zapisać zmiany.

obraz

Aplikacja ma przyjazny interfejs, który umożliwia dostosowywanie wrażeń 3D. To aplikacja administracyjna.

Ostateczny plik config.json

Ostateczny plik config.json zawiera wszystkie informacje potrzebne do wygenerowania niestandardowego sposobu prezentacji treści. Zawiera szczegóły strony tytułowej, rozdziały i ustawienia kamery. Możesz użyć tego pliku, aby dopracować artykuł i mieć pewność, że wygląda i działa dokładnie tak, jak chcesz.

Aby rozpocząć,pobierz plik config.json z aplikacji administratora lub utwórz nowy od zera. Następnie otwórz plik w edytorze tekstu i zacznij edytować wartości. Możesz zmieniać tekst, obrazy, a nawet ustawienia kamery, aby zapewnić widzom wyjątkowe i wciągające wrażenia.

Plik JSON z podsumowaniem artykułu może wyglądać tak:

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

Konkretny rozdział może wyglądać tak: Rozdziały to tablica, która może zawierać wiele pojedynczych rozdziałów.

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

Zaawansowane opcje dostosowywania

Możesz zagłębić się w kod i wprowadzić inne zmiany:

Wczytywanie pliku konfiguracyjnego z innej lokalizacji

Gotowe rozwiązanie wczytuje konfigurację opowiadania historii z pliku lokalnego . Możesz to jednak łatwo zmienić w pliku config.js:

export async function loadConfig(configUrl) {
  try {
    // Fetch the configuration data from the specified URL.
    const configResponse = await fetch(configUrl);

Konfiguracje kamery

Kamerę można dodatkowo dostosować z pliku /utils/cesium.js. Określa ono wiele ważnych zmiennych, takich jak:

  • RADIUS
  • BASE_PITCH_RADIANS
  • BASE_HEADING_RADIANS
  • BASE_ROLL_RADIANS
  • DEFAULT_HIGHLIGHT_RADIUS

Możesz dostosować te zmienne, aby uzyskać różne kąty kamery i doświadczenia.

Podsumowanie

W tym dokumencie znajdziesz przewodnik po dostosowywaniu aplikacji 3D Storytelling. Omówiliśmy różne opcje dostępne w aplikacji administratora i sposoby ich wykorzystania do tworzenia wciągających i angażujących wystaw opartych na geolokalizacji. Omówiliśmy też proces tworzenia niestandardowej historii za pomocą pliku config.json. Następne kroki

Teraz, gdy wiesz już, jak dostosować aplikację 3D Storytelling, możesz zacząć tworzyć własne historie. Poniżej znajdziesz kilka pomysłów, które pomogą Ci zacząć.

  • Utwórz historię o swoim rodzinnym mieście lub miejscu, które odwiedzasz.
  • Utwórz historię o wydarzeniu historycznym lub osobie, która Cię zainspirowała.
  • Utwórz opowiadanie o fikcyjnym świecie lub o swoim śnie.

Możliwości są nieograniczone. Puść wodze fantazji i stwórz coś naprawdę wyjątkowego.