Opowiadanie historii 3D: przewodnik po dostosowywania

Wprowadzenie

W tym przewodniku omawiamy różne sposoby dostosowywania rozwiązania do narracji 3D, aby tworzyć ciekawe historie geolokalizacyjne.

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

Po drugie, możesz dostosować ustawienia kamery i opcje ostrości w przypadku każdego rozdziału za pomocą graficznego interfejsu użytkownika w aplikacji Admin. Po zakończeniu konfiguracji użytkownicy mogą pobrać wygenerowany plik JSON.

Możesz też bezpośrednio edytować plik JSON. Możesz dostosować strukturę pliku JSON, załadować skonfigurowane rozwiązanie do opowiadania historii i pominąć panel administracyjny. To podwójne podejście zapewnia zarówno przyjazny dla użytkownika interfejs, jak i zaawansowane możliwości manipulowania plikami JSON.

Pierwsze kroki:

Włącz

Tworzenie własnej historii

Ogólny układ tekstu jest podzielony na okładkę i rozdziały. Zarówno okładkę, jak i rozdział można dostosować indywidualnie. Zapoznaj się ze
szczegółowymi informacjami o tym, jak tworzyć i dostosowywać historie za pomocą aplikacji Admin oraz pliku konfiguracyjnego.

strona tytułowa

Najpierw musisz utworzyć stronę tytułową dla całej historii. Spowoduje to dodanie do relacji przeglądu, zdjęcia na okładkę i opisu.

Korzystanie z aplikacji Administratora

Zacznij od dodania strony tytułowej dla swojej historii. Możesz to zrobić w aplikacji Admin, korzystając z tego ekranu:

obraz

Używanie pliku config.json

Jeśli masz plik konfiguracji, możesz bezpośrednio dodać w nim 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 na obraz, GIF lub plik wideo, którego chcesz użyć jako głównego medium dla całej historii.

  • 2. title: tytuł całej historii.
  • 3. date: data lub przedział czasu powiązany z relacją.
  • 4. description: krótki opis historii.
  • 5. createdBy: twórca lub autor filmu.
  • 6. imageCredit: informacja o źródle głównego obrazu.
  • 7. cameraOptions: początkowe ustawienia aparatu dla całej historii.

Rozdziały

Fabuła jest podzielona na rozdziały, z których każdy ma własny zestaw zmiennych. Możesz utworzyć dowolną liczbę rozdziałów. Najpierw wybierz adres, a następnie dodaj do rozdziału następujące informacje.

Korzystanie z aplikacji Administratora

Wyszukiwanie lokalizacji: użyj zintegrowanego paska 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 przycisk Edytuj obok lokalizacji:

obraz

Dodaj szczegóły lokalizacji:

Gdy będziesz zadowolony z ogólnej konfiguracji, pobierz plik JSON i użyj go w aplikacji 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: niepowtarzalny identyfikator rozdziału.
  • imageUrl: adres URL obrazu rozdziału.
  • imageCredit: informacja o źródle obrazu w danym rozdziale.
  • content: tekst rozdziału.
  • dateTime: data lub ramy czasowe dotyczące danego rozdziału.
  • coords: współrzędne położenia związanego z odcinkiem.
    • lat: Latitude.
    • lng: długość geograficzna.
  • address: adres związany z rozdziałem.

Ustawienia aparatu

Aplikacja daje Ci wiele możliwości sterowania kamerą. W tej sekcji znajdziesz informacje o różnych ustawieniach kamery i sposobach ich dostosowywania.

obraz

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

Korzystanie z aplikacji Administratora

Kamera: dostosuj szybkość ruchu kamery i typ orbity, aby uzyskać wybrany efekt wizualny.

  • Znacznik lokalizacji umożliwia wyświetlanie lub ukrywanie pinezy w konkretnej lokalizacji.

  • Ostrość w promieniu tworzy cień w formie winietowania wokół wybranego obszaru bez wskazywania konkretnej lokalizacji. To świetny sposób na zaprezentowanie okolicy lub ogólnego obszaru.

obraz

Ten film pokazuje, jak zmienić ustawienie ostrości w aparacie, aby pokazać obszar zamiast konkretnego punktu.

Użyj pliku config.json

Wszystkie parametry aparatu możesz też dostosować bezpośrednio za pomocą pliku konfiguracyjnego JSON:

  • cameraOptions: ustawienia aparatu dla danego rozdziału. (dowiedz się więcej 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żda współrzędna reprezentuje punkt na osi x, y i z, który określa lokalizację kamery.

    • heading: parametr nagłówka odnosi się do kierunku poziomego, w którym skierowany jest aparat. W języku geograficznym jest to kąt między kierunkiem widzenia kamery a kierunkiem północnym. Nagłówek 0 oznacza, że kamera jest skierowana na północ.

    • pitch: parametr pitch określa kąt pionowy kamery. Określa ona pochylenie lub nachylenie widoku z kamery. Pozytywne nachylenie wskazuje w dół, a ujemne w górę.

    • roll: parametr obrócenia określa obrót wokół osi kamery. Reprezentuje ruch obrotowy kamery. Wartość 0 oznacza brak rotacji, a wartości dodatnie lub ujemne odpowiednio rotację 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 określająca, czy ma być widoczny znacznik lokalizacji.

Zapisywanie konfiguracji

Na koniec kliknij Zapisz pozycję kamery, aby zapisać pozycję kamery, a następnie kliknij Zamknij edycję, aby zapisać zmiany.

obraz

Aplikacja ta ma przyjazny dla użytkownika interfejs, który umożliwia dostosowanie wrażenia 3D. To jest aplikacja Administrator.

Plik config.json w ostatecznej wersji

Końcowy plik config.json zawiera wszystkie informacje potrzebne do wygenerowania spersonalizowanego sposobu marketingu narracyjnego. Obejmuje ona szczegóły strony tytułowej, rozdziały i ustawienia kamery. Za pomocą tego pliku możesz dostosować swoją historię i upewnić się, że wygląda i działa dokładnie tak, jak chcesz.

Zacznij od pobrania pliku config.json z aplikacji Admin lub utwórz nowy od podstaw. Następnie otwórz plik w edytorze tekstu i zacznij edytować wartości. Możesz zmienić tekst, obrazy, a nawet ustawienia kamery, aby stworzyć niepowtarzalne i wciągające doświadczenie dla widzów.

Plik JSON z informacjami o odcinek 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. Chapters to tablica, która może zawierać wiele 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ć kilka innych ustawień:

Wczytywanie pliku konfiguracyjnego z innej lokalizacji

Gotowe rozwiązanie wczytuje konfigurację opowieści z pliku lokalnego . Możesz jednak łatwo zmienić to 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 dalej dostosowywać w pliku /utils/cesium.js. Określa ona wiele ważnych zmiennych, takich jak:

  • RADIUS
  • BASE_PITCH_RADIANS
  • BASE_HEADING_RADIANS
  • BASE_ROLL_RADIANS
  • DEFAULT_HIGHLIGHT_RADIUS

Możesz zmieniać te zmienne, aby uzyskać różne kąty widzenia i wrażenia.

Podsumowanie

W tym dokumencie znajdziesz przewodnik po dostosowywaniu aplikacji do opowiadania historii w 3D. Poznaliśmy różne opcje dostępne w aplikacji Admin i sprawdzaliśmy, jak można ich używać do tworzenia wciągających i ciekawych historii z lokalizacją. Omówiliśmy też proces tworzenia historii niestandardowej za pomocą pliku config.json. Następne kroki

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

  • Utwórz historię o swoim rodzinnym mieście lub o miejscu, które odwiedziłeś(-aś).
  • Utwórz opowieść o historycznym wydarzeniu lub osobie, która Cię zainspirowała.
  • Utwórz opowiadanie o fikcyjnym świecie lub śnie.

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