Wstęp
W tym przewodniku omawiamy różne sposoby personalizacji rozwiązania 3D Narracji, tworząc ciekawe historie z wykorzystaniem geolokalizacji.
Wykorzystujesz 2 wygodne metody konfigurowania rozwiązań do marketingu narracyjnego. Możesz korzystać z intuicyjnego interfejsu dostępnego w aplikacji Admin ze specjalnym panelem konfiguracji. W tym panelu użytkownicy mogą zmieniać główne właściwości, np. imageUrl, tytuł, datę i inne, zarówno w przypadku całego artykułu, jak i poszczególnych rozdziałów.
Po drugie, za pomocą graficznego interfejsu użytkownika w aplikacji Admin możesz dostosować ustawienia kamery i opcje ostrości dla każdego rozdziału. Gdy konfiguracja będzie zadowalająca, użytkownicy będą mogli pobrać wygenerowany plik JSON.
Możesz też edytować bezpośrednio plik JSON. Możesz dostosować strukturę JSON, wczytać skonfigurowane rozwiązanie do opowiadania historii i pominąć administracyjny panel sterowania. To podwójne podejście zapewnia łatwy w użyciu interfejs i zaawansowaną obsługę plików JSON.
Pierwsze kroki:
Włącz
Stwórz własną historię
Ogólny układ historii jest podzielony na okładkę, po której następuje rozdziały.
Zarówno okładkę, jak i rozdział można dostosować osobno. 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ć okładkę artykułu. Spowoduje to dodanie do relacji podsumowania, zdjęcia na okładkę i opisu.
Użyj aplikacji Admin
Najpierw dodaj stronę tytułową artykułu. Możesz to zrobić w aplikacji Admin na tym ekranie:
Użyj pliku config.json
Poza tym, jeśli masz plik konfiguracyjny, możesz bezpośrednio dodać w nim te sekcje:
- 1.
imageUrl: URL głównego pliku multimedialnego (obrazu, GIF-a lub filmu) dla całego artykułu.
Może to być dowolny publicznie dostępny adres URL prowadzący do obrazu, GIF-a lub pliku wideo, którego chcesz użyć jako głównego nośnika przekazu dla całej historii.
- 2.
title: tytuł całego artykułu. - 3.
date: data lub przedział czasowy powiązany z artykułem. - 4.
description: krótki opis zdarzenia. - 5.
createdBy– twórca lub autor opowieści. - 6.
imageCredit: informacje o autorze głównego zdjęcia. - 7.
cameraOptions: początkowe ustawienia aparatu dla całej relacji.
Rozdziały
Fabuła dzieli się 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 szczegóły.
Użyj aplikacji Admin
Wyszukiwanie lokalizacji: aby znaleźć lokalizację, którą chcesz wyświetlić, użyj zintegrowanego paska wyszukiwania autouzupełniania Google Maps Platform.
Po dodaniu lokalizacji możesz dodać do niej szczegółowe informacje, klikając przycisk Edytuj obok lokalizacji:
Dodaj informacje o lokalizacji:
Jeśli ogólna konfiguracja Ci odpowiada, pobierz plik json i użyj go w aplikacji demonstracyjnej.
Konfiguracja 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: URL obrazu rozdziału.imageCredit: informacje o autorze obrazu rozdziału.content: treść rozdziału.dateTime: data lub przedział czasu związany z rozdziałem.coords: określa lokalizację powiązaną z rozdziałem.lat: szerokość geograficzna.lng: długość geograficzna.
address: adres powiązany z rozdziałem.
Ustawienia aparatu
Aplikacja oferuje wiele różnych elementów sterujących aparatem. W tej sekcji poznasz różne ustawienia aparatu i dowiesz się, jak je dostosować.
(Przesuwaj, powiększaj, przechylaj aparat, aby uzyskać idealny kąt widzenia)
W aplikacji Admin
Kamera: dostosuj szybkość ruchu kamery i typ orbity, aby dostosować widok.
Znacznik lokalizacji pozwala przełączać się między wyświetlaniem pinezki w określonej lokalizacji lub jej ukrywaniem.
Ostrość promienia tworzy cień winietowy wokół określonego obszaru bez wskazania konkretnej lokalizacji. To świetny sposób na zaprezentowanie okolicy lub ogólnego obszaru.
Pokazuje, jak zmienić ostrość kamery, aby pokazać obszar zamiast konkretnego punktu.
Użyj pliku config.json
Możesz też dostosować wszystkie parametry kamery bezpośrednio za pomocą pliku konfiguracyjnego JSON:
cameraOptions: ustawienia aparatu dla danego rozdziału. (dowiedz się więcej o kątach aparatu)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, określając lokalizację kamery.heading: parametr nagłówka odnosi się do kierunku poziomego, w którym jest skierowana kamera. W kontekście geograficznym jest to kąt między polem widzenia aparatu a kierunkiem północnym. Kierunek 0 oznacza, że kamera jest skierowana w kierunku północnym.pitch: parametr wysokości dźwięku określa kąt pionowy kamery. Oznacza pochylenie lub pochylenie widoku kamery. Pozytywny ton jest skierowany w dół, a ujemny w górę.roll: parametr obrócenia określa obrót wokół osi kamery. Przedstawia ruch obrotowy kamery. Obrót 0 oznacza brak rotacji, a wartości dodatnie i ujemne – obrót odpowiednio w prawo lub w lewo.
focusOptions: opcje skupienia się na konkretnym punkcie.focusRadius: promień ostrości.showFocus: wartość logiczna służąca do pokazywania i ukrywania zaznaczenia.showLocationMarker: wartość logiczna, która pozwala wyświetlić lub ukryć znacznik lokalizacji.
Zapisz konfigurację
Na koniec kliknij Zapisz pozycję kamery, aby zapisać pozycję kamery, a następnie kliknij Opuść tryb edycji, aby zapisać pracę.
Aplikacja ma łatwy w użyciu interfejs, który pozwala dostosować obraz 3D. To jest aplikacja Admin.
Ostatni plik config.json
Końcowy plik config.json zawiera wszystkie informacje potrzebne do utworzenia niestandardowego rozwiązania do opowiadania historii. Zawiera informacje o okładce, rozdziałach i ustawieniach aparatu. Za pomocą tego pliku możesz dopracować swoją historię i dopilnować, by wyglądała i działała dokładnie tak, jak chcesz.
Zacznij od pobrania pliku config.json z aplikacji administracyjnej lub utworzenia nowego pliku 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 stworzyć wyjątkowe i wciągające funkcje dla odbiorców.
Plik json z przeglądem 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 przyjmować 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 dostosowania
Możesz zagłębić się w kod i wprowadzić kilka innych zmian:
Wczytaj plik konfiguracyjny z innej lokalizacji
Rozwiązanie od razu 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
Aparat można 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 śmiało dostosować te zmienne, aby uzyskać różne funkcje i nie tylko.
Podsumowanie
W tych dokumentach znajdziesz przewodnik po dostosowywaniu aplikacji 3D Storytelling. Omówiliśmy różne opcje dostępne w aplikacji Admin i sposoby ich wykorzystania, aby tworzyć wciągające i angażujące historie z geolokalizacją. Omówiliśmy też proces tworzenia niestandardowej opowieści za pomocą pliku config.json. Dalsze kroki
Gdy już wiesz, jak dostosować aplikację do opowiadania historii 3D, możesz zacząć tworzyć własne historie. Oto kilka pomysłów na początek:
- Opowiedz o swoim rodzinnym mieście lub odwiedzonych przez Ciebie miejscach.
- Opowiedz o jakimś wydarzeniu historycznym lub o osobie, która Cię zainspirowała.
- Stwórz opowieść o fikcyjnym świecie albo o swoich snach.
Możliwości są nieograniczone. Puść wodze fantazji i stwórz coś naprawdę wyjątkowego.