Introduzione
Questa guida ti illustrerà diversi modi per personalizzare la soluzione Storytelling 3D, per creare storie di geolocalizzazione avvincenti.
Hai la flessibilità di configurare la soluzione di storytelling tramite due pratici metodi. In primo luogo, puoi utilizzare l'intuitiva UI disponibile nell'app Amministrazione, che offre un riquadro di configurazione dedicato. All'interno di questo riquadro, gli utenti possono modificare le proprietà principali, come imageUrl, titolo, data e altro, 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 Amministratore. Una volta soddisfatti della configurazione, gli utenti possono scaricare il file JSON generato.
In alternativa, puoi modificare direttamente il file JSON. Puoi modificare la struttura JSON, caricare la soluzione di storytelling configurata ed evitare il pannello di controllo di amministrazione. Questo duplice approccio offre un'interfaccia facile da usare e la manipolazione avanzata di JSON.
Guida introduttiva:
Attiva
Crea la tua storia
La struttura complessiva della storia è suddivisa in una storia di copertina seguita dai capitoli.
Sia la copertina che un capitolo possono essere personalizzati singolarmente. Scopri
i dettagli su come creare e personalizzare le storie utilizzando sia l'app di amministrazione
che il file di configurazione.
Pagina di copertina
La prima cosa da fare è creare una pagina di copertina per la tua storia complessiva. che aggiunge una panoramica, una foto di copertina e una descrizione alla tua storia.
Utilizza l'app di amministrazione
Per iniziare, aggiungi una pagina di copertina alla tua storia. Puoi farlo dall'app Amministrazione utilizzando la schermata seguente:
Utilizzare il file config.json
Inoltre, se hai il file di configurazione, puoi aggiungere direttamente queste sezioni al 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 supporto principale per l'intera storia.
- 2.
title: titolo dell'intera storia. - 3.
date: la data o il periodo di tempo associati alla storia. - 4.
description: una breve descrizione della storia. - 5.
createdBy: l'autore della storia. - 6.
imageCredit: merito dell'immagine principale. - 7.
cameraOptions: impostazioni iniziali della fotocamera per l'intera storia.
Capitoli
La storia è suddivisa in capitoli, ciascuno con il proprio insieme di variabili. Puoi creare tutti i capitoli che vuoi. Inizia selezionando un indirizzo, quindi aggiungi i seguenti dettagli al capitolo.
Utilizza l'app di amministrazione
Ricerca della posizione: utilizza la barra di ricerca del completamento automatico di Google Maps Platform per trovare la località che vuoi mostrare.
Una volta aggiunta una località, puoi aggiungere dettagli al capitolo facendo clic sul pulsante Modifica accanto alla località:
Aggiungi dettagli sulla posizione:
Se la configurazione generale ti soddisfa, scarica il file JSON e puoi 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: merito dell'immagine del capitolo.content: contenuti testuali del capitolo.dateTime: data o periodo di tempo specifici del capitolo.coords: coordinate per la località associata al capitolo.lat: Latitudine.lng: longitudine.
address: indirizzo relativo al capitolo.
Impostazioni della fotocamera
L'applicazione offre molti controlli diversi sulla fotocamera. Questa sezione illustra le diverse impostazioni della videocamera e come personalizzarle.
(Panoramica,zoom, inclina la videocamera per ottenere l'angolo di visione perfetto)
Utilizzare l'app di amministrazione
Videocamera: regola la velocità di movimento della videocamera e il tipo di orbita per creare l'esperienza di visualizzazione scelta.
L'indicatore di posizione ti consente di nasconderlo o mostrare un segnaposto in una posizione specifica.
L'opzione Messa a fuoco raggio crea un'ombra della vignettatura intorno a un'area specifica senza bloccare la posizione specifica. È l'ideale per mostrare un quartiere o un'area generale.
Questa immagine mostra come cambiare la messa a fuoco della fotocamera per mostrare un'area anziché un punto specifico.
Utilizzare il file config.json
Puoi anche personalizzare tutti i parametri della fotocamera direttamente utilizzando il file di configurazione JSON:
cameraOptions: impostazioni della fotocamera per il capitolo. (scopri di più sulle angolazioni della fotocamera)position: il parametro di 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 e definisce la posizione della videocamera.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 pari a 0 indica che la fotocamera è rivolta verso nord.pitch: il parametro Tonalità determina l'angolo verticale della videocamera. Indica l'inclinazione o l'inclinazione del campo visivo della videocamera. Un'inclinazione positiva punta verso il basso, mentre una negativa punta verso l'alto.roll: il parametro di rotazione definisce la rotazione attorno all'asse della fotocamera. Rappresenta il movimento rotatorio della videocamera. Un lancio pari a 0 indica alcuna rotazione, mentre i valori positivi o negativi indicano una rotazione rispettivamente a destra o a sinistra.
focusOptions: opzioni per concentrarti su un punto specifico.focusRadius: raggio per l'area di interesse.showFocus: valore booleano per mostrare o nascondere lo stato attivo.showLocationMarker: valore booleano per mostrare o nascondere l'indicatore di posizione.
Salva la configurazione
Infine, fai clic su Salva posizione della fotocamera per salvare la posizione della fotocamera, poi fai clic su Esci dalla modalità di modifica per salvare il lavoro.
Questa applicazione fornisce un'interfaccia facile da usare che consente di personalizzare l'esperienza 3D. Questa è l'app di amministrazione.
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 copertina, i capitoli e le impostazioni della fotocamera. Puoi usare questo file per perfezionare la tua storia e assicurarti che l'aspetto e l'aspetto siano esattamente come vuoi.
Per iniziare,scarica il file config.json dall'app Amministrazione 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 fotocamera per creare un'esperienza unica e immersiva 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 e apportare diverse altre personalizzazioni:
Carica il file di configurazione da un'altra posizione
La soluzione carica subito la configurazione di storytelling da un file locale . Tuttavia, questo valore può essere facilmente modificato 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 fotocamera può essere ulteriormente personalizzata da /utils/cesium.js file.
Definisce una serie di variabili importanti come:
- RAGGIO
- BASE_PITCH_RADIANS
- BASE_HEADING_RADIANS
- BASE_ROLL_RADIANS
- DEFAULT_HIGHLIGHT_RADIUS
Non esitare a modificare queste variabili per ottenere diversi angeli ed esperienze fotografiche.
Conclusione
In questo documento abbiamo fornito una guida per personalizzare l'applicazione Storytelling 3D. Abbiamo esaminato le varie opzioni disponibili nell'app di amministrazione e come possono essere utilizzate per creare storie di geolocalizzazione coinvolgenti e accattivanti. Abbiamo anche parlato della procedura di creazione di una storia personalizzata utilizzando il file config.json. Passaggi successivi
Ora che hai imparato a personalizzare l'applicazione Storytelling 3D, puoi iniziare a creare le tue storie. Ecco alcune idee per 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 la storia di un mondo di fantasia o di un sogno che hai avuto.
Le possibilità sono infinite. Libera l'immaginazione e crea qualcosa di davvero speciale.