Introduzione
Questa guida ti illustrerà diversi modi in cui la soluzione di storytelling 3D può essere personalizzata, consentendoti di creare storie di geolocalizzazione accattivanti.
Hai la flessibilità di configurare la soluzione di storytelling tramite due pratici metodi. Come prima cosa, puoi utilizzare l'intuitiva UI disponibile nell'app di amministrazione, che include 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 generale che per i singoli capitoli.
In secondo luogo, puoi ottimizzare le impostazioni della fotocamera e le opzioni di messa a fuoco per ogni capitolo utilizzando la GUI nell'app di amministrazione. 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 e ignorare il pannello di controllo dell'amministratore. Questo duplice approccio offre un'interfaccia facile da usare e una manipolazione JSON avanzata.
Guida introduttiva:
Attiva
Crea la tua storia
Il layout generale della storia è suddiviso in una storia di copertina seguita da capitoli.
Sia la copertina che un capitolo possono essere personalizzati singolarmente. Dai un'occhiata
ai 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 generale. In questo modo aggiungerai una panoramica, una foto di copertina e una descrizione alla tua storia.
Utilizza l'app di amministrazione
Per iniziare, aggiungi una pagina di copertina per la tua storia. Per farlo, vai all'app Amministratore utilizzando la seguente schermata:
Utilizza config.json
Inoltre, se disponi del file di configurazione, puoi aggiungere direttamente queste sezioni:
- 1.
imageUrl: URL del file multimediale principale (immagine, GIF o video) per l'intera storia.
Può trattarsi di qualsiasi URL pubblicamente accessibile che rimanda a un'immagine, una GIF o un file 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 associato alla notizia. - 4.
description: una breve descrizione della storia. - 5.
createdBy: il creatore o l'autore della storia. - 6.
imageCredit: merito per l'immagine principale. - 7.
cameraOptions: impostazioni iniziali della videocamera per l'intera storia.
Capitoli
La storia è divisa in capitoli, ciascuno con il proprio insieme di variabili. Puoi creare tutti i capitoli che vuoi. Per iniziare, seleziona un indirizzo, quindi aggiungi i seguenti dettagli al capitolo.
Utilizza l'app di amministrazione
Ricerca della posizione: utilizza la barra di ricerca con completamento automatico di Google Maps Platform integrata per trovare la località da mostrare.
Una volta aggiunta una località, puoi aggiungere dettagli al capitolo facendo clic sul pulsante Modifica accanto alla località:
Aggiungi dettagli sul luogo:
Se la configurazione generale ti soddisfa, scarica il file JSON e puoi utilizzarlo nell'app demo.
Configura con 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: Riconoscimenti per l'immagine del capitolo.content: contenuti di testo del capitolo.dateTime: data o periodo di tempo specifici del capitolo.coords: coordinate per la posizione associata al capitolo.lat: latitudine.lng: longitudine.
address: indirizzo relativo al capitolo.
Impostazioni della fotocamera
L'applicazione offre molti controlli diversi sulla videocamera. In questa sezione vengono illustrate le diverse impostazioni della videocamera e come personalizzarle.
(Panoramica, zoom e inclinazione della videocamera per ottenere l'angolo di visione perfetto)
Utilizzare l'app Console 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 scegliere se mostrare un segnaposto in una posizione specifica o nasconderlo.
Messa a fuoco per raggio crea un'ombra di vignettatura intorno a un'area specifica senza impostare una posizione specifica. È l'ideale per mostrare un quartiere o un'area generale.
Mostra come modificare la messa a fuoco della fotocamera per mostrare un'area anziché un punto specifico.
Utilizza config.json
Puoi anche personalizzare direttamente tutti i parametri della fotocamera utilizzando il file di configurazione JSON:
cameraOptions: impostazioni della fotocamera per il capitolo. (scopri di più sulle angolazioni della videocamera)position: il parametro di posizione determina le coordinate spaziali della fotocamera nell'ambiente 3D. Consiste di tre valori: x, y e z. Ogni coordinata rappresenta un punto sugli assi x, y e z, che definisce la posizione della videocamera.heading: il parametro heading si riferisce alla direzione orizzontale su 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 videocamera è rivolta verso nord.pitch: il parametro tono determina l'angolo verticale della videocamera. Indica l'inclinazione o l'inclinazione del campo visivo della videocamera. Una presentazione positiva guarda verso il basso, mentre una proposta negativa punta verso l'alto.roll: il parametro roll definisce la rotazione intorno all'asse della fotocamera. Rappresenta il movimento rotatorio della videocamera. Un rollio di 0 indica nessuna rotazione, mentre i valori positivi o negativi indicano una rotazione rispettivamente verso destra o verso sinistra.
focusOptions: opzioni per mettere a fuoco un punto specifico.focusRadius: raggio di messa a fuoco.showFocus: booleani per mostrare o nascondere lo stato attivo.showLocationMarker: booleani per mostrare o nascondere l'indicatore di posizione.
Salva la configurazione
Infine, fai clic su Salva posizione fotocamera per salvare la posizione della fotocamera e poi 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. È 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 fotocamera. Puoi usare questo file per perfezionare la tua storia e assicurarti che abbia l'aspetto e il design che vuoi.
Per iniziare,scarica il file config.json dall'app di 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 della 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. I capitoli sono un array e possono includere molti singoli capitoli 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 analizzare il codice ed eseguire molte altre personalizzazioni:
Carica il file di configurazione da un'altra posizione
La soluzione carica subito la configurazione dello 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 a partire dal file /utils/cesium.js.
che definisce una serie di variabili importanti quali:
- RAGGIO
- BASE_PITCH_RADIANS
- BASE_HEADING_RADIANS
- BASE_ROLL_RADIANS
- DEFAULT_HIGHLIGHT_RADIUS
Modifica pure queste variabili per creare esperienze e preferenze di ripresa diverse.
Conclusione
In questi documenti forniamo una guida alla personalizzazione dell'applicazione di storytelling 3D. Abbiamo esaminato le varie opzioni disponibili nell'app Console di amministrazione e il modo in cui possono essere utilizzate per creare storie di geolocalizzazione coinvolgenti e coinvolgenti. Abbiamo anche parlato del processo di creazione di 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 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 di fantasia o su un sogno che hai avuto.
Le possibilità sono infinite. Dai libero sfogo alla tua immaginazione e crea qualcosa di davvero speciale.