Introduzione
Questa guida illustra i diversi modi in cui la soluzione di storytelling 3D può essere personalizzata, consentendoti di creare storie di geolocalizzazione accattivanti.
Hai la possibilità di configurare la soluzione di storytelling tramite due metodi pratici. Innanzitutto, puoi utilizzare l'interfaccia utente intuitiva disponibile nell'app Amministrazione, che include un riquadro di configurazione dedicato. In questo riquadro, gli utenti possono modificare le proprietà principali come imageUrl, titolo, data e altro ancora, sia per la storia complessiva che per i singoli capitoli.
In secondo luogo, puoi perfezionare le impostazioni della fotocamera e le opzioni di messa a fuoco per ogni capitolo utilizzando la GUI nell'app Amministrazione. 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 bypassare il pannello di controllo Amministrazione. Questo approccio duale offre sia un'interfaccia intuitiva sia la manipolazione avanzata di JSON.
Guida introduttiva:
Attiva
Crea la tua storia
Il layout complessivo della storia è suddiviso in una storia di copertina seguita da capitoli.
Sia la copertina che un capitolo possono essere personalizzati singolarmente. Consulta
i dettagli su come creare e personalizzare le storie utilizzando sia l'app Amministrazione sia il file di configurazione.
Pagina di copertina
La prima cosa da fare è creare una copertina per la tua storia complessiva. In questo modo, alla tua storia verranno aggiunte la panoramica, una foto di copertina e una descrizione.
Utilizzare l'app Amministrazione
Per iniziare, aggiungi una pagina di copertina per la tua storia. Puoi farlo dall'app Amministrazione utilizzando la seguente schermata:
Utilizzare config.json
Inoltre, se hai il file di configurazione, puoi aggiungere direttamente queste sezioni al file:
- 1.
imageUrl: l'URL del file multimediale principale (immagine, GIF o video) per l'intera storia.
Può trattarsi di qualsiasi URL accessibile pubblicamente che rimandi a un'immagine, a una GIF o a un file video che vuoi utilizzare come contenuto multimediale principale per l'intera storia.
- 2.
title: il titolo dell'intera storia. - 3.
date: la data o l'intervallo di tempo associato alla storia. - 4.
description: una breve descrizione della storia. - 5.
createdBy: il creator o l'autore della storia. - 6.
imageCredit: credito per l'immagine principale. - 7.
cameraOptions: le impostazioni iniziali della fotocamera per l'intera storia.
Capitoli
La storia è divisa in capitoli, ognuno con il proprio insieme di variabili. Puoi creare tutti i capitoli che vuoi. Per iniziare, seleziona un indirizzo e poi aggiungi i seguenti dettagli al capitolo.
Utilizzare l'app Amministrazione
Ricerca di località: utilizza la barra di ricerca del completamento automatico di Google Maps Platform integrata per trovare la località che vuoi mostrare.
Dopo aver aggiunto una stazione di ricarica, puoi aggiungere dettagli al capitolo facendo clic sul pulsante Modifica accanto alla stazione di ricarica:
Aggiungi i dettagli sulla località:
Una volta che la configurazione complessiva è soddisfacente, scarica il file JSON e puoi utilizzarlo nell'app di demo.
Configurazione utilizzando config.json
Puoi modificare le seguenti variabili direttamente nel file config.json scaricato per personalizzare ogni capitolo:
title: il 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 del 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 fotocamera
L'applicazione offre molti controlli diversi sulla videocamera. Questa sezione illustra le diverse impostazioni della videocamera e come personalizzarle.
(Esegui panoramica, zoom e inclina la videocamera per ottenere l'angolo di visualizzazione perfetto)
Utilizzare l'app Amministrazione
Videocamera: regola la velocità di movimento della videocamera e il tipo di orbita per creare l'esperienza di visualizzazione scelta.
L'opzione Indicatore di località ti consente di mostrare o nascondere un segnaposto in una località specifica.
L'opzione Focalizzazione con raggio crea un'ombra con effetto vignetta intorno a un'area specifica senza indicare una posizione specifica. È ideale per mostrare un quartiere o un'area generale.
Questo video mostra come modificare la messa a fuoco della fotocamera per mettere in evidenza un'area anziché un punto specifico.
Utilizzare config.json
Puoi anche personalizzare tutti i parametri della videocamera direttamente utilizzando il file di configurazione JSON:
cameraOptions: impostazioni della fotocamera per il capitolo. (scopri di più sugli angoli della fotocamera)position: il parametro posizione determina le coordinate spaziali della fotocamera nell'ambiente 3D. È costituito da tre valori: x, y e z. Ogni coordinata rappresenta un punto negli assi x, y e z, che definisce la posizione della fotocamera.heading: il parametro heading si riferisce alla direzione orizzontale in cui è rivolta la fotocamera. In termini geografici, rappresenta l'angolo tra il campo visivo della videocamera e la direzione nord. Un'intestazione di 0 indica che la fotocamera è rivolta a nord.pitch: il parametro inclinazione determina l'angolo verticale della fotocamera. Indica l'inclinazione della visuale della videocamera. Un'inclinazione positiva è rivolta verso il basso, mentre un'inclinazione negativa è rivolta verso l'alto.roll: il parametro di inclinazione definisce la rotazione attorno all'asse della fotocamera. Rappresenta il movimento rotatorio della fotocamera. Un roll pari a 0 indica nessuna rotazione, mentre i valori positivi o negativi indicano una rotazione rispettivamente verso destra o sinistra.
focusOptions: opzioni per mettere a fuoco un punto specifico.focusRadius: raggio per lo stato attivo.showFocus: valore booleano per mostrare o nascondere lo stato attivo.showLocationMarker: valore booleano per mostrare o nascondere l'indicatore della posizione.
Salvare la configurazione
Infine, fai clic su Salva posizione della fotocamera per salvare la posizione della fotocamera, quindi su Esci dalla modalità di modifica per salvare il tuo lavoro.
Questa applicazione fornisce un'interfaccia utente intuitiva che ti consente di personalizzare l'esperienza 3D. Questa è l'app Amministrazione.
Il file config.json finale
Il file config.json finale contiene tutte le informazioni necessarie per generare la tua esperienza di narrazione personalizzata. Sono inclusi i dettagli della pagina di copertina, i capitoli e le impostazioni della videocamera. Puoi utilizzare questo file per perfezionare la tua storia e assicurarti che sia esattamente come la vuoi.
Per iniziare,scarica il file config.json dall'app Amministrazione o creane uno nuovo da zero. Apri quindi il file in un editor di testo e inizia a modificare i valori. Puoi modificare il testo, le immagini e persino le impostazioni della fotocamera 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
}
}
Un capitolo specifico può avere questo aspetto. Chapters è un array e può contenere molti singoli capitoli al suo interno.
"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 esaminare il codice e apportare diverse altre personalizzazioni:
Caricare il file di configurazione da un'altra posizione
La soluzione carica la configurazione dello storytelling da un file locale . Tuttavia, questo valore può essere modificato facilmente 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 personalizzata ulteriormente 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 vari angoli di ripresa ed esperienze.
Conclusione
In questi documenti abbiamo fornito una guida alla personalizzazione dell'applicazione 3D Storytelling. Abbiamo esplorato le varie opzioni disponibili nell'app Amministrazione e come possono essere utilizzate per creare storie immersive e coinvolgenti con geolocalizzazione. Abbiamo anche discusso della procedura per creare una storia personalizzata utilizzando il file config.json. Passaggi successivi
Ora che hai imparato a personalizzare l'applicazione di storytelling 3D, 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, lascia correre la tua immaginazione e crea qualcosa di veramente speciale.