Opowiadanie historii 3D: przewodnik po dostosowywania

Wprowadzenie

W tym przewodniku znajdziesz różne sposoby dostosowywania rozwiązania Narracja 3D, które umożliwia tworzenie przyciągających uwagę historii z lokalizacją.

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 aparatu i opcje ostrości dla każdego rozdziału za pomocą interfejsu graficznego w aplikacji Admin. Po skonfigurowaniu ustawień 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ę z 
szczegółami dotyczącymi tworzenia i dostosowywania opowieści 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 podsumowania, zdjęcia na okładkę i opisu.

Korzystanie z aplikacji Admin

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ł czasowy 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 potem dodaj do tego rozdziału podane niżej informacje.

Korzystanie z aplikacji Admin

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 sekcji, klikając przycisk Edytuj obok lokalizacji:

obraz

Dodaj szczegóły dotyczące lokalizacji:

Gdy będziesz zadowolony z ogólnej konfiguracji, pobierz plik JSON i użyj go w aplikacji 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: 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 przedział czasu dotyczący 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 udostępnia wiele różnych ustawień aparatu. W tej sekcji znajdziesz omówienie różnych ustawień aparatu i sposobów ich dostosowywania.

obraz

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

Korzystanie z aplikacji Administratora

Kamera: dostosuj prędkość 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ń winiety wokół określonego obszaru, nie wskazując 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żywanie 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 widzenia aparatu)

    • 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, określający położenie kamery.

    • heading: parametr heading odnosi się do kierunku poziomego, w którym skierowana jest kamera. W języku geograficznym jest to kąt między kierunkiem 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. Określa ona pochylenie lub nachylenie widoku z kamery. Pozytywne nachylenie wskazuje w dół, a ujemne w górę.

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

  • focusOptions: opcje umożliwiające skupienie się na określonym punkcie.

  • focusRadius: promień ostrości.

  • showFocus: wartość logiczna określająca, czy ma być widoczny fokus.

  • 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 Admin.

Plik config.json w ostatecznej wersji

Ostateczny plik config.json zawiera wszystkie informacje potrzebne do wygenerowania niestandardowego sposobu opowiadania historii. 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.

Aby rozpocząć,pobierz plik 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 zmian:

Ładowanie 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 niestandardowej historii za pomocą pliku config.json. Następne kroki

Teraz, gdy już wiesz, jak dostosować aplikację do opowiadania historii w 3D, 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.