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:
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:
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.
(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.
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.
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.