Wprowadzenie
Z tego przewodnika dowiesz się, jak dostosować rozwiązanie 3D Storytelling, aby tworzyć ciekawe historie oparte na geolokalizacji.
Rozwiązanie do marketingu narracyjnego możesz skonfigurować na 2 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, title, date i inne, zarówno w przypadku całej historii, jak i poszczególnych rozdziałów.
Po drugie, możesz dostosować ustawienia kamery i opcje ostrości dla każdego rozdziału za pomocą graficznego interfejsu użytkownika w aplikacji Administracja. Gdy użytkownicy będą zadowoleni z konfiguracji, 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 pominąć ustawienia administratora. To podwójne podejście zapewnia zarówno przyjazny dla użytkownika interfejs, jak i zaawansowaną manipulację JSON.
Pierwsze kroki:
Włącz
Tworzenie własnej historii
Ogólny układ historii dzieli się na stronę tytułową i rozdziały.
Zarówno stronę tytułową, jak i rozdział można dostosować indywidualnie. Sprawdź
szczegóły dotyczące tworzenia i dostosowywania historii za pomocą aplikacji Administracja
oraz pliku konfiguracyjnego.
Strona tytułowa
Najpierw musisz utworzyć stronę tytułową całej historii. Spowoduje to dodanie do relacji omówienia, zdjęcia głównego i opisu.
Korzystanie z aplikacji Administracja
Zacznij od dodania strony tytułowej do swojej historii. Możesz to zrobić w aplikacji Administracja na tym ekranie:
Korzystanie z pliku config.json
Jeśli masz plik konfiguracyjny, możesz też bezpośrednio dodać te sekcje w pliku:
- 1.
imageUrl: adres URL głównego pliku multimedialnego (obrazu, pliku GIF lub filmu) dla całej historii.
Może to być dowolny publicznie dostępny adres URL wskazujący obraz, plik GIF lub film, którego chcesz użyć jako głównego medium dla całej historii.
- 2.
title: tytuł całej historii. - 3.
date: data lub okres związany z historią. - 4.
description: krótki opis historii. - 5.
createdBy: twórca lub autor historii. - 6.
imageCredit: informacje o autorze głównego obrazu. - 7.
cameraOptions: początkowe ustawienia kamery dla całej historii.
Rozdziały
Historia jest podzielona na rozdziały, z których każdy ma własny zestaw zmiennych. Możesz utworzyć dowolną liczbę rozdziałów. Zacznij od wybrania adresu, a następnie dodaj do rozdziału te informacje:
Korzystanie z aplikacji Administracja
Wyszukiwanie lokalizacji: użyj zintegrowanego paska wyszukiwania z autouzupełnianiem w Google Maps Platform , aby znaleźć lokalizację, którą chcesz pokazać.
Po dodaniu lokalizacji możesz dodać do rozdziału szczegóły, klikając przycisk Edytuj obok lokalizacji:
Dodaj szczegóły lokalizacji:
Gdy będziesz zadowolony z ogólnej konfiguracji, pobierz plik JSON i użyj go w aplikacji w wersji demonstracyjnej.
Konfigurowanie za pomocą pliku config.json
Aby dostosować każdy rozdział, możesz edytować te zmienne bezpośrednio w pobranym pliku config.json:
title: tytuł rozdziału.id: unikalny identyfikator rozdziału.imageUrl: adres URL obrazu rozdziału.imageCredit: informacje o autorze obrazu rozdziału.content: treść tekstowa rozdziału.dateTime: data lub okres związany z rozdziałem.coords: współrzędne lokalizacji powiązanej z rozdziałem.lat: szerokość geograficzna.lng: długość geograficzna.
address: adres powiązany z rozdziałem.
Ustawienia aparatu
Aplikacja udostępnia wiele różnych ustawień aparatu. W tej sekcji znajdziesz informacje o różnych ustawieniach aparatu i sposobach ich dostosowywania.
(Przesuwaj,powiększaj i przechylaj aparat, aby uzyskać idealny kąt widzenia)
Korzystanie z aplikacji Administracja
Aparat: dostosuj szybkość ruchu aparatu i typ orbity, aby uzyskać wybrany sposób wyświetlania.
Znacznik lokalizacji umożliwia przełączanie między wyświetlaniem pinezki w określonej lokalizacji a jej ukrywaniem.
Ostrość promienia tworzy cień winiety wokół określonego obszaru bez wskazywania konkretnej lokalizacji. Jest to świetne rozwiązanie do prezentowania okolicy lub ogólnego obszaru.
Pokazuje, jak zmienić ostrość aparatu, aby pokazać obszar zamiast konkretnego punktu.
Korzystanie z pliku config.json
Możesz też dostosować wszystkie parametry aparatu bezpośrednio za pomocą pliku konfiguracyjnego JSON:
cameraOptions: ustawienia aparatu dla rozdziału. (Więcej informacji o kamerze kątach)position: parametr pozycji określa współrzędne przestrzenne aparatu w środowisku 3D. Składa się z 3 wartości: x, y i z. Każda współrzędna reprezentuje punkt na osiach x, y i z, określając położenie aparatu.heading: parametr kierunku odnosi się do kierunku poziomego, w którym skierowany jest aparat. W terminologii geograficznej reprezentuje kąt między widokiem aparatu a kierunkiem północnym. Kierunek 0 oznacza, że aparat jest skierowany na północ.pitch: parametr nachylenia określa kąt pionowy aparatu. Oznacza nachylenie lub pochylenie widoku aparatu. Dodatnie nachylenie powoduje skierowanie aparatu w dół, a ujemne – w górę.roll: parametr obrotu określa obrót wokół osi aparatu. Reprezentuje ruch obrotowy aparatu. Wartość 0 oznacza brak obrotu, a wartości dodatnie lub ujemne oznaczają obrót odpowiednio w prawo lub w lewo.
focusOptions: opcje ustawiania ostrości na określonym punkcie.focusRadius: promień ostrości.showFocus: wartość logiczna określająca, czy ostrość ma być widoczna.showLocationMarker: wartość logiczna określająca, czy znacznik lokalizacji ma być widoczny.
Zapisywanie konfiguracji
Na koniec kliknij Zapisz pozycję aparatu , aby zapisać pozycję aparatu, a następnie kliknij Wyjdź z trybu edycji , aby zapisać zmiany.
Ta aplikacja udostępnia przyjazny dla użytkownika interfejs, który umożliwia dostosowywanie środowiska 3D. Jest to aplikacja Administracja.
Końcowy plik config.json
Końcowy plik config.json zawiera wszystkie informacje potrzebne do wygenerowania niestandardowego środowiska opowiadania historii. Obejmuje on szczegóły strony tytułowej, rozdziały i ustawienia aparatu. Możesz użyć tego pliku, aby dostosować historię i upewnić się, że wygląda i działa dokładnie tak, jak chcesz.
Aby rozpocząć,pobierz plik config.json z aplikacji Administracja lub utwórz nowy od zera. Następnie otwórz plik w edytorze tekstu i zacznij edytować wartości. Możesz zmienić tekst, obrazy, a nawet ustawienia aparatu, aby stworzyć dla odbiorców wyjątkowe i wciągające wrażenia.
Plik JSON z omówieniem historii 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 pojedynczych 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:
Wczytywanie pliku konfiguracyjnego z innej lokalizacji
Rozwiązanie domyślnie wczytuje konfigurację opowiadania historii 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 aparatu
Aparat można dodatkowo dostosować w pliku /utils/cesium.js.
Określa on kilka ważnych zmiennych, takich jak:
- RADIUS
- BASE_PITCH_RADIANS
- BASE_HEADING_RADIANS
- BASE_ROLL_RADIANS
- DEFAULT_HIGHLIGHT_RADIUS
Możesz dowolnie modyfikować te zmienne, aby uzyskać różne kąty widzenia i wrażenia.
Podsumowanie
W tym dokumencie znajdziesz przewodnik po dostosowywaniu aplikacji 3D Storytelling. Omówiliśmy różne opcje dostępne w aplikacji Administracja i sposoby ich wykorzystania do tworzenia wciągających historii opartych na geolokalizacji. Omówiliśmy też proces tworzenia niestandardowej historii za pomocą pliku config.json. Następne kroki
Teraz, gdy wiesz już, jak dostosować aplikację 3D Storytelling, możesz zacząć tworzyć własne historie. Poniżej znajdziesz kilka pomysłów, które pomogą Ci zacząć.
- Utwórz historię o swoim rodzinnym mieście lub miejscu, które odwiedziłeś(-aś).
- Utwórz historię o wydarzeniu historycznym lub osobie, która Cię zainspirowała.
- Utwórz historię o fikcyjnym świecie lub śnie.
Możliwości są nieograniczone. Puść wodze fantazji i stwórz coś wyjątkowego.