Wprowadzenie
W tym przewodniku omówimy 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 adres URL obrazu, 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 sterowania administracyjnego. 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. Sprawdź
szczegóły dotyczące tworzenia i dostosowywania opowieści za pomocą aplikacji Administracja oraz pliku konfiguracyjnego.
strona tytułowa
Najpierw musisz utworzyć stronę tytułową dla całej historii. Spowoduje to dodanie do relacji ogólnego opisu, zdjęcia na okładkę i opisu.
Korzystanie z aplikacji Administratora
Zacznij od dodania strony tytułowej dla swojej historii. Możesz to zrobić w aplikacji Administracja, 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 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 związany z relacją. - 4.
description: krótki opis historii. - 5.
createdBy: twórca lub autor filmu. - 6.
imageCredit: informacja o źródle zdjęcia głównego. - 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 Administratora
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 informacje o różnych ustawieniach aparatu i o tym, jak je dostosowywać.
(Przesuwaj,powiększaj i przesuwaj kamerę, aby uzyskać idealny kąt widzenia)
Korzystanie z aplikacji Administratora
Kamera: dostosuj szybkość ruchu kamery i typ orbity, aby uzyskać wybrany efekt.
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 kamery, 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 kamery)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 rotacji, a wartości dodatnie lub ujemne odpowiednio rotację w prawo lub w lewo.
focusOptions: opcje skupiania się na określonym punkcie.focusRadius: promień obszaru 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ć 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
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 ono 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.