Opowiadanie historii 3D: przewodnik po dostosowywania

Wstęp

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

Masz swobodę konfigurowania rozwiązania do marketingu narracyjnego za pomocą 2 wygodnych metod. Możesz skorzystać z intuicyjnego interfejsu dostępnego w aplikacji Admin z dedykowanym panelem konfiguracji. W tym panelu użytkownicy mogą modyfikować główne właściwości, takie jak imageUrl, tytuł czy data, zarówno w odniesieniu do całego artykułu, 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ę JSON, wczytać skonfigurowane rozwiązanie do opowiadania historii i ominąć panel sterowania administratora. To podwójne podejście zapewnia zarówno łatwy w użyciu interfejs, jak i zaawansowaną obsługę plików 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ł. 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ą ogólnego artykułu. 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. Możesz to zrobić w aplikacji Admin na tym ekranie:

obraz

Użyj pliku config.json

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

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

Może to być dowolny publicznie dostępny adres URL prowadzący do pliku graficznego, GIF lub wideo, którego chcesz użyć jako głównego nośnika artykułu.

  • 2. title: tytuł całego artykułu.
  • 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. Możesz utworzyć dowolną liczbę rozdziałów. Najpierw wybierz adres, a następnie dodaj do rozdziału następujące informacje.

Użyj aplikacji Admin

Wyszukiwanie lokalizacji: dzięki zintegrowanemu pasku wyszukiwania autouzupełniania Google Maps Platform możesz 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 uznasz, że wszystko działa zgodnie z oczekiwaniami, pobierz plik json i użyj go 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ą. W tej sekcji znajdziesz informacje o różnych ustawieniach kamery i sposobach ich dostosowywania.

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, by uzyskać optymalny efekt.

  • Znacznik lokalizacji pozwala przełączać się między wyświetlaniem pinezki w konkretnej lokalizacji a jej ukrywaniem.

  • Ostrość w promieniu tworzy cień w formie winietowania wokół wybranego obszaru bez wskazywania konkretnej lokalizacji. To świetne rozwiązanie, gdy chcesz przedstawić okolicę lub ogólny obszar.

obraz

Pokazuje, jak zmienić ostrość kamery, aby pokazać obszar, a nie konkretny punkt.

Użyj pliku config.json

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

  • cameraOptions: ustawienia aparatu dla tego rozdziału. (dowiedz się więcej o kątach kamery).

    • position: parametr pozycji 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 kontekście geograficznym oznacza kąt między polem widzenia kamery a kierunkiem północnym. Nagłówek 0 oznacza, że kamera jest skierowana na północ.

    • pitch: parametr tonu określa kąt pionowy kamery. Oznacza przechylenie lub nachylenie pola widzenia kamery. Pozytywna sugestia oznacza z dół, a negatywna – rosną.

    • roll: parametr obrócenia określa obrót wokół osi kamery. Reprezentuje on obrót kamery. Rzut 0 oznacza brak obrotu, a wartości dodatnie i ujemne – odpowiednio 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, a potem kliknij Opuść tryb edycji, aby zapisać swoją pracę.

obraz

Aplikacja ma łatwy w użyciu interfejs, który umożliwia dostosowanie wyglądu 3D do własnych preferencji. To aplikacja Admin.

Ostateczna wersja pliku config.json

Końcowy plik config.json zawiera wszystkie informacje potrzebne do wygenerowania spersonalizowanego sposobu marketingu narracyjnego. Zawiera szczegółowe informacje o okładce, rozdziały i ustawienia aparatu. Za pomocą tego pliku możesz doprecyzować 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 zmieniać tekst, obrazy, a nawet ustawienia aparatu, aby zapewnić widzom niepowtarzalne 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, która może zawierać wiele osobnych 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

Rozwiązanie wczytuje konfigurację narracji 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 aplikacji 3D Storytelling. Omówiliśmy różne opcje dostępne w aplikacji Admin i dowiedzieliśmy się, jak z nich korzystać do tworzenia wciągających i atrakcyjnych historii geolokalizacji. Omówiliśmy też proces tworzenia historii niestandardowej za pomocą pliku config.json. Dalsze kroki

Wiesz już, jak dostosować aplikację Narracja 3D, więc 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 stwórz coś naprawdę wyjątkowego.