Opowiadanie historii 3D: przewodnik po dostosowywania

Wprowadzenie

W tym przewodniku omawiamy różne sposoby, jak funkcja Opowiadanie historii 3D aby tworzyć fascynujące historie związane z geolokalizacją.

Możesz na 2 sposoby konfigurować rozwiązanie do marketingu narracyjnego wygodnych metod. Najpierw możesz skorzystać z intuicyjnego interfejsu dostępnego w Aplikacja administracyjna z specjalnym panelem konfiguracji. Panel ten umożliwia: modyfikować główne właściwości, takie jak imageUrl, tytuł, data itp.; zarówno całej historii, jak i poszczególnych rozdziałów.

Po drugie, możesz dla każdego korzystając z GUI w aplikacji Admin. Gdy wszystko będzie w porządku, użytkownicy 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 omijać panel sterowania administratora. To podwójne podejście zapewnia łatwy w użyciu interfejs i zaawansowane funkcje do manipulacji JSON.

Pierwsze kroki:

Włącz

Utwórz własną historię

Ogólny układ historii jest podzielony na okładkę i rozdziały. Można dostosować zarówno okładkę, jak i rozdział. Sprawdź
szczegółowe informacje na temat tworzenia i dostosowywania historii za pomocą aplikacji Admin; oraz plik konfiguracyjny.

strona tytułowa

Pierwszą rzeczą, jaką musisz zrobić, jest utworzenie strony tytułowej dla ogólnej historię. Spowoduje to dodanie do relacji przeglądu, zdjęcia na okładkę i opisu.

Użyj aplikacji Admin

Zacznij od dodania strony okładki relacji. W tym celu użyj aplikacji Admin. przy użyciu tego ekranu:

obraz

Użyj pliku config.json

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

  • 1. imageUrl: adres URL głównego pliku multimedialnego (obrazu, GIF-a lub filmu) całą historię.

Może to być dowolny publicznie dostępny adres URL wskazujący obraz, GIF lub film którego chcesz użyć jako głównego nośnika dla całej historii.

  • 2. title: tytuł całej relacji.
  • 3. date: data lub przedział czasu powiązany z relacją.
  • 4. description: krótki opis historii.
  • 5. createdBy: twórca lub autor relacji.
  • 6. imageCredit: informacje o autorze zdjęcia głównego.
  • 7. cameraOptions: wstępne ustawienia kamery dla całej relacji.

Rozdziały

Opowieść jest podzielona na rozdziały, z których każdy ma własny zestaw zmiennych. Dostępne opcje możesz utworzyć dowolną liczbę rozdziałów. Najpierw wybierz adres, a następnie dodaj następujące informacje do pola rozdział.

Użyj aplikacji Admin

Wyszukiwanie lokalizacji: używanie zintegrowanego wyszukiwania autouzupełniania 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 ikonę Przycisk Edytuj obok lokalizacji:

obraz

Dodaj szczegóły lokalizacji:

Gdy uznasz, że konfiguracja jest zadowalająca, pobierz plik json Można go używać w aplikacji w wersji demonstracyjnej.

Skonfiguruj za pomocą pliku config.json

Poniższe zmienne możesz edytować bezpośrednio w pobranym pliku config.json aby dostosować każdy rozdział:

  • title: tytuł rozdziału.
  • id: unikalny identyfikator rozdziału.
  • imageUrl: adres URL obrazu rozdziału.
  • imageCredit: informacje o autorze obrazu rozdziału.
  • content: treść rozdziału.
  • dateTime: data lub ramy czasowe dotyczące danego rozdziału.
  • coords: współrzędne lokalizacji powiązanej z rozdziałem.
    • lat: szerokość geograficzna.
    • lng: długość geograficzna.
  • address: adres związany z rozdziałem.

Ustawienia aparatu

Aplikacja daje Ci wiele możliwości sterowania kamerą. Ta sekcja poprowadzi Cię przez różne ustawienia kamery i dostosowuje je.

obraz

(Przesuwaj,powiększaj i przechylaj aparat, aby uzyskać idealny kąt widzenia)

Korzystanie z aplikacji Admin

Kamera: dostosuj prędkość ruchu kamery i typ orbity, aby utworzyć wybrany sposób oglądania.

  • Znacznik lokalizacji umożliwia przełączanie się między wyświetlaniem pinezki w konkretnym miejscu lokalizacji lub ukrywanie.

  • Ostrość w promieniu tworzy cień w formie winietowania wokół wybranego obszaru bez wskazać konkretną lokalizację. To świetny sposób na przedstawienie okolicy lub ogólny obszar.

obraz

Pokazuje, jak zmienić ostrość kamery, aby zaprezentować obszar zamiast w określonym punkcie.

Użyj pliku config.json

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

  • cameraOptions: ustawienia aparatu dla tego rozdziału. (więcej informacji na temat aparatu kąty)

    • position: parametr pozycji określa współrzędne przestrzenne w środowisku 3D. Składa się z 3 wartości: x, y i z. Każda współrzędna reprezentuje punkt na osi x, y i z, definiując do lokalizacji kamery.

    • heading: parametr nagłówka odnosi się do kierunku poziomego w w którą stronę wskazuje kamera. W kontekście geograficznym oznacza to między widokiem kamery a kierunkiem północnym. Nagłówek 0 wskazuje, że kamera jest skierowana na północ.

    • pitch: parametr tonu określa kąt pionowy aparat fotograficzny. Oznacza przechylenie lub nachylenie pola widzenia kamery. O a pozytywna – w dół, a ujemna – w górę.

    • roll: parametr obrócenia określa obrót wokół kamery. . Reprezentuje on obrót kamery. Rzut 0 wskazuje brak obrotu, a wartości dodatnie lub ujemne oznaczają w prawo lub w lewo.

  • focusOptions: opcje zaznaczenia konkretnego punktu.

  • focusRadius: promień ostrości.

  • showFocus: wartość logiczna wyświetlana lub ukrywania zaznaczenia.

  • showLocationMarker: wartość logiczna wyświetlana lub ukrywania znacznika lokalizacji.

Zapisywanie konfiguracji

Na koniec kliknij Zapisz pozycję kamery, aby zapisać pozycję kamery. kliknij Opuść tryb edycji, aby zapisać swoją pracę.

obraz

Aplikacja ma łatwy w użyciu interfejs, który pozwala na dostosowanie efekt 3D. To aplikacja Admin.

Ostateczna wersja pliku config.json

Końcowy plik config.json zawiera wszystkie informacje potrzebne do wygenerowania do własnych upodobań. Zawiera szczegółowe informacje o okładce, rozdziały, i ustawieniach aparatu. Za pomocą tego pliku możesz dopracować tekst i upewnić się, wygląda i działa dokładnie tak, jak chcesz.

Aby rozpocząć,pobierz plik config.json z aplikacji Admin lub utwórz nowe konto od podstaw. Następnie otwórz plik w edytorze tekstu i edytując wartości. Możesz zmienić tekst, obrazy, a nawet aparat aby zapewnić odbiorcom wyjątkowe i atrakcyjne wrażenia.

Plik JSON z omówieniem 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
    }
  }

A konkretny rozdział może wyglądać tak. Rozdziały to tablica i mogą przyjmować wielu osobnych rozdziałów w tablicy.

"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ć kilka innych ustawień:

Wczytywanie pliku konfiguracyjnego z innej lokalizacji

Rozwiązanie wczytuje konfigurację marketingu narracyjnego z pliku lokalnego . Można 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ć na podstawie pliku /utils/cesium.js. Definiuje kilka ważnych zmiennych, takich jak:

  • RADIUS
  • BASE_PITCH_RADIANS
  • BASE_HEADING_RADIANS
  • BASE_ROLL_RADIANS
  • DEFAULT_HIGHLIGHT_RADIUS

Możesz dowolnie zmieniać te zmienne, aby uzyskać różne aparaty i doświadczenia.

Podsumowanie

W tych dokumentach przedstawiamy wskazówki dotyczące dostosowywania funkcji aplikacji. Omówiliśmy różne opcje dostępne w aplikacji Admin jak można je wykorzystać do tworzenia wciągających historii geolokalizacji. Śr Omówiliśmy też proces tworzenia relacji niestandardowej za pomocą pliku config.json . Dalsze kroki

Już wiesz, jak dostosować aplikację Opowiadanie historii 3D możesz zacząć tworzyć własne historie. Oto kilka pomysłów na początek:

  • Opowiedz o swoim rodzinnym mieście lub odwiedzonym miejscu.
  • Opowiedz o wydarzeniu historycznym lub osobie, która Cię inspiruje.
  • Stwórz opowieść o fikcyjnym świecie lub wymarzonym marzeniu.

Możliwości są nieograniczone. Daj się ponieść wyobraźni i twórz coś wyjątkowego.