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. 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ę 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 Administracja oraz pliku konfiguracji.

strona tytułowa

Pierwszą rzeczą, jaką musisz zrobić, jest utworzenie strony tytułowej dla ogólnej historię. Spowoduje to dodanie do relacji podsumowania, 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. na następującym ekranie:

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 relacji.
  • 6. imageCredit: informacje o autorze zdjęcia głównego.
  • 7. cameraOptions: wstępne ustawienia kamery dla całej relacji.

Rozdziały

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

Użyj 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.

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: informacje o autorze obrazu rozdziału.
  • content: treść rozdziału.
  • dateTime: data lub przedział czasu dotyczący konkretnego 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ą. W tej sekcji znajdziesz informacje o różnych ustawieniach aparatu i o tym, jak je dostosowywać.

obraz

(Przesuwaj,powiększaj i przechylaj aparat, 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 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żywanie pliku config.json

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

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

    • 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, definiując do lokalizacji kamery.

    • heading: parametr nagłówka odnosi się do kierunku poziomego w w którą stronę wskazuje 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 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 ruch obrotowy 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 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. kliknij Opuść tryb edycji, aby zapisać swoją pracę.

obraz

Aplikacja ma łatwy w użyciu interfejs, który umożliwia dostosowywanie efekt 3D. To aplikacja Admin.

Plik config.json w ostatecznej wersji

Ostateczny plik config.json zawiera wszystkie informacje potrzebne do wygenerowania niestandardowego sposobu opowiadania historii. Zawiera szczegółowe informacje o okładce, rozdziały, i ustawieniach aparatu. Za pomocą tego pliku możesz dostosować 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 aparat aby zapewnić odbiorcom wyjątkowe i atrakcyjne wrażenia.

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

Rozwiązanie wczytuje konfigurację opowieści 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. Określa ona wiele 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. 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:

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