Introduzione
Questa guida ti illustrerà i diversi modi in cui la soluzione 3D Storytelling può essere personalizzata, consentendoti di creare storie di geolocalizzazione accattivanti.
Hai la flessibilità di configurare la soluzione di storytelling tramite due metodi pratici. Innanzitutto, puoi utilizzare l'interfaccia utente intuitiva disponibile nell'app per amministratori, che include un pannello di configurazione dedicato. In questo pannello, gli utenti possono modificare le proprietà principali come imageUrl, titolo, data e altro ancora, sia per la storia complessiva sia per i singoli capitoli.
In secondo luogo, puoi ottimizzare le impostazioni della videocamera e le opzioni di messa a fuoco per ogni capitolo utilizzando la GUI nell'app per amministratori. Una volta soddisfatti della configurazione, gli utenti hanno la possibilità di scaricare il file JSON generato.
In alternativa, puoi modificare direttamente il file JSON. Puoi modificare la struttura JSON, caricare la soluzione di storytelling configurata e ignorare il pannello di controllo amministratore. Questo doppio approccio offre sia un'interfaccia intuitiva sia una manipolazione JSON avanzata.
Guida introduttiva:
Attiva
Crea la tua storia
Il layout generale della storia è suddiviso in una storia di copertina seguita dai capitoli.
Sia la copertina sia un capitolo possono essere personalizzati singolarmente. Consulta i
dettagli su come creare e personalizzare le storie utilizzando sia l'app per amministratori sia il file di configurazione.
Pagina di copertina
La prima cosa da fare è creare una pagina di copertina per la storia complessiva. In questo modo, alla storia vengono aggiunti la panoramica, una foto di copertina e una descrizione.
Utilizza l'app per amministratori
Inizia aggiungendo una pagina di copertina alla storia. Puoi farlo dall'app Admin utilizzando la seguente schermata:
Utilizza config.json
Inoltre, se hai il file di configurazione, puoi aggiungere direttamente queste sezioni nel file:
- 1.
imageUrl: URL del file multimediale principale (immagine, GIF o video) per l'intera storia.
Può essere qualsiasi URL accessibile pubblicamente che rimanda a un file immagine, GIF o video che vuoi utilizzare come media principale per l'intera storia.
- 2.
title: titolo dell'intera storia. - 3.
date: la data o il periodo di tempo associato alla storia. - 4.
description: una breve descrizione della storia. - 5.
createdBy: il creatore o l'autore della storia. - 6.
imageCredit: credito per l'immagine principale. - 7.
cameraOptions: impostazioni iniziali della videocamera per l'intera storia.
Capitoli
La storia è suddivisa in capitoli, ognuno con il proprio insieme di variabili. Puoi creare tutti i capitoli che vuoi. Inizia selezionando un indirizzo e poi aggiungi i seguenti dettagli al capitolo.
Utilizza l'app per amministratori
Ricerca località: utilizza la barra di ricerca di completamento automatico di Google Maps Platform integrata per trovare la località che vuoi mostrare.
Una volta aggiunta una località, puoi aggiungere i dettagli al capitolo facendo clic sul pulsante Modifica accanto alla località:
Aggiungi i dettagli sulla località:
Una volta soddisfatto della configurazione generale, scarica il file JSON e potrai utilizzarlo nell'app demo.
Configura utilizzando config.json
Puoi modificare le seguenti variabili direttamente nel file config.json scaricato per personalizzare ogni capitolo:
title: titolo del capitolo.id: identificatore univoco del capitolo.imageUrl: URL dell'immagine del capitolo.imageCredit: credito per l'immagine del capitolo.content: contenuti di testo per il capitolo.dateTime: data o periodo di tempo specifico per il capitolo.coords: coordinate della località associata al capitolo.lat: latitudine.lng: longitudine.
address: indirizzo relativo al capitolo.
Impostazioni della videocamera
L'applicazione fornisce molti controlli diversi sulla videocamera. Questa sezione illustra le diverse impostazioni della videocamera e come personalizzarle.
(Esegui panoramiche, zoom e inclina la videocamera per ottenere l'angolo di visione perfetto)
Utilizza l'app per amministratori
Videocamera:regola la velocità di movimento della videocamera e il tipo di orbita per creare l'esperienza di visualizzazione scelta.
Indicatore di posizione ti consente di attivare o disattivare la visualizzazione di un segnaposto in una località specifica.
Messa a fuoco del raggio crea un'ombra a vignetta intorno a un'area specifica senza individuare una località specifica. È ideale per mostrare un quartiere o un'area generale.
Mostra come modificare la messa a fuoco della videocamera per mostrare un'area anziché un punto specifico.
Utilizza config.json
Puoi anche personalizzare tutti i parametri della videocamera direttamente utilizzando il file di configurazione JSON:
cameraOptions: impostazioni della videocamera per il capitolo. (Scopri di più sugli angoli della videocamera)position: il parametro position determina le coordinate spaziali della videocamera nell'ambiente 3D. È composto da tre valori: x, y e z. Ogni coordinata rappresenta un punto negli assi x, y e z, che definisce la posizione della videocamera.heading: il parametro heading si riferisce alla direzione orizzontale in cui è puntata la videocamera. In termini geografici, rappresenta l'angolo tra la visuale della videocamera e la direzione nord. Un orientamento di 0 indica che la videocamera punta verso nord.pitch: il parametro pitch determina l'angolo verticale della videocamera. Indica l'inclinazione della visuale della videocamera. Un pitch positivo guarda verso il basso, mentre un pitch negativo punta verso l'alto.roll: il parametro roll definisce la rotazione attorno all'asse della videocamera. Rappresenta il movimento di rotazione della videocamera. Un roll di 0 indica nessuna rotazione, mentre i valori positivi o negativi indicano una rotazione rispettivamente a destra o a sinistra.
focusOptions: opzioni per la messa a fuoco su un punto specifico.focusRadius: raggio per la messa a fuoco.showFocus: valore booleano per mostrare o nascondere la messa a fuoco.showLocationMarker: valore booleano per mostrare o nascondere l'indicatore di posizione.
Salva la configurazione
Infine, fai clic su Salva posizione videocamera per salvare la posizione della videocamera, quindi fai clic su Esci dalla modalità di modifica per salvare il lavoro
Questa applicazione fornisce un'interfaccia intuitiva che ti consente di personalizzare l'esperienza 3D. Questa è l'app per amministratori.
Il file config.json finale
Il file config.json finale contiene tutte le informazioni necessarie per generare la tua esperienza di storytelling personalizzata. Include i dettagli della pagina di copertina, i capitoli e le impostazioni della videocamera. Puoi utilizzare questo file per ottimizzare la storia e assicurarti che abbia l'aspetto e la sensazione che desideri.
Per iniziare,scarica il file config.json dall'app per amministratori o creane uno nuovo da zero. Poi, apri il file in un editor di testo e inizia a modificare i valori. Puoi modificare il testo, le immagini e persino le impostazioni della videocamera per creare un'esperienza unica e coinvolgente per il tuo pubblico.
Un file JSON di panoramica della storia può avere il seguente aspetto:
{
"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
}
}
E un capitolo specifico può avere il seguente aspetto. I capitoli sono un array e possono contenere molti capitoli singoli all'interno dell'array.
"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
}
},
Personalizzazioni avanzate
Puoi approfondire il codice ed eseguire diverse altre personalizzazioni:
Carica il file di configurazione da un'altra località
Per impostazione predefinita, la soluzione carica la configurazione di storytelling da un file locale . Tuttavia, questa impostazione può essere facilmente modificata in config.js:
export async function loadConfig(configUrl) {
try {
// Fetch the configuration data from the specified URL.
const configResponse = await fetch(configUrl);
Configurazioni della videocamera
La videocamera può essere ulteriormente personalizzata dal file /utils/cesium.js.
Definisce una serie di variabili importanti, ad esempio:
- RADIUS
- BASE_PITCH_RADIANS
- BASE_HEADING_RADIANS
- BASE_ROLL_RADIANS
- DEFAULT_HIGHLIGHT_RADIUS
Non esitare a modificare queste variabili per ottenere diverse angolazioni ed esperienze della videocamera.
Conclusione
In questo documento, abbiamo fornito una guida alla personalizzazione dell'applicazione 3D Storytelling. Abbiamo esplorato le varie opzioni disponibili nell'app per amministratori e come possono essere utilizzate per creare storie di localizzazione coinvolgenti e accattivanti. Abbiamo anche discusso la procedura per creare una storia personalizzata utilizzando il file config.json. Passaggi successivi
Ora che hai imparato a personalizzare l'applicazione 3D Storytelling, puoi iniziare a creare le tue storie. Ecco alcune idee per aiutarti a iniziare:
- Crea una storia sulla tua città natale o su un luogo che hai visitato.
- Crea una storia su un evento storico o su una persona che ti ha ispirato.
- Crea una storia su un mondo immaginario o su un sogno che hai fatto.
Le possibilità sono infinite. Quindi, scatena la tua immaginazione e crea qualcosa di veramente speciale.