Introducción
Esta guía te mostrará las diferentes formas en que la solución de narración en 3D personalizarse, lo que te permite crear historias cautivantes sobre la ubicación geográfica.
Tienes la flexibilidad de configurar su solución narrativa mediante dos métodos convenientes. Puedes usar la IU intuitiva disponible en la App de administración con un panel de configuración dedicado. Dentro de este panel, los usuarios pueden modificar las propiedades principales, como imageUrl, title, date, etc. tanto para la historia como para los capítulos individuales.
En segundo lugar, puedes ajustar la configuración de la cámara y las opciones de enfoque para cada capítulo con la GUI de la app de Administrador. Una vez satisfecho con la configuración, los usuarios tienen la opción de descargar el archivo JSON generado.
Como alternativa, puedes editar directamente el archivo JSON. Puedes ajustar la estructura JSON, cargar la solución de narración configurada y omitir el panel de control del Administrador. Este enfoque doble ofrece fácil de usar y manipulación avanzada de JSON.
Primeros pasos:
Habilitar
Crea tu propia historia
El diseño general de la historia se divide en una historia de portada seguida de capítulos.
Tanto la portada como un capítulo se pueden personalizar por separado. Anunciar
Detalles sobre cómo se pueden crear y personalizar las historias con la app de Administrador
y el archivo de configuración.
Portada
Lo primero que debes hacer es crear una portada historia. Esto le agrega a la historia una descripción general, una foto de portada y una descripción.
Usar la app de Administrador
Empieza por agregar una página de portada para tu historia. Puedes hacerlo desde la app de Administrador en la siguiente pantalla:
Usa config.json
Además, si tienes el archivo de configuración, puedes agregar estas secciones directamente en el archivo:
- 1.
imageUrl: Es la URL del archivo multimedia principal (imagen, GIF o video) del toda la historia.
Puede ser cualquier URL de acceso público que dirija a una imagen, un GIF o un video que quieres usar como medio principal para toda la noticia.
- 2.
title: Es el título de la historia completa. - 3.
date: Es la fecha o el período asociados con la historia. - 4.
description: Una breve descripción de la historia. - 5.
createdBy: Es el creador o autor de la historia. - 6.
imageCredit: Crédito por la imagen principal. - 7.
cameraOptions: Configuración inicial de la cámara para toda la historia.
Capítulos
La historia se divide en capítulos, cada uno con su propio conjunto de variables. Puedes puedes crear todos los capítulos que desees. Primero debes seleccionar una dirección y, luego, agregar los siguientes detalles a la capítulo.
Usar la app de Administrador
Búsqueda de ubicación: Usa la búsqueda integrada de Google Maps Platform con la función Autocomplete para encontrar la ubicación que deseas mostrar.
Luego de agregar una ubicación, puedes agregar detalles al capítulo haciendo clic en el Botón Editar junto a la ubicación:
Agrega detalles sobre la ubicación:
Cuando estés conforme con la configuración general, descarga el archivo JSON y puedes usarlo en la app de demostración.
Configura con config.json
Puedes editar las siguientes variables directamente en el archivo config.json descargado para personalizar cada capítulo:
title: Es el título del capítulo.id: Es el identificador único del capítulo.imageUrl: URL de la imagen del capítulo.imageCredit: Crédito por la imagen del capítulo.content: Contenido de texto del capítulo.dateTime: Es la fecha o el período específicos del capítulo.coords: Coordenadas para la ubicación asociada con el capítulo.lat: Latitud.lng: Longitud.
address: Dirección relacionada con el capítulo.
Configuración de la cámara
La aplicación ofrece muchos controles diferentes en la cámara. Esta sección se explican los diferentes parámetros de configuración de la cámara y cómo personalizarlos.
(Desplazamiento lateral,zoom, inclina la cámara para obtener el ángulo de visión perfecto).
Usa la app de Administrador
Cámara: Ajusta la velocidad de movimiento de la cámara y el tipo de órbita para crear la experiencia de visualización elegida.
El marcador de ubicación te permite alternar entre mostrar un pin en una ubicación su ubicación u ocultarla.
El enfoque de radio crea una sombra de viñeta alrededor de un área específica sin señalando una ubicación específica. Esto es ideal para mostrar un vecindario o en un área general.
Aquí se muestra cómo cambiar el enfoque de la cámara para mostrar un área en lugar de mostrarla. un punto específico.
Usa config.json
También puedes personalizar todos los parámetros de la cámara directamente con la configuración de JSON archivo:
cameraOptions: Configuración de la cámara del capítulo. (obtén más información sobre la cámara angulares)position: El parámetro de posición determina las coordenadas espaciales de la cámara en un entorno 3D. Consta de tres valores: x, y y z. Cada coordenada representa un punto en los ejes x, y, y z, y define la la ubicación de la cámara.heading: El parámetro de orientación hace referencia a la dirección horizontal en hacia donde apunta la cámara. En términos geográficos, representa la de ángulo entre la visión de la cámara y la dirección norte. Un título con 0 indica que la cámara apunta hacia el norte.pitch: el parámetro de tono determina el ángulo vertical de la cámara. Indica la inclinación o inclinación de la visión de la cámara. R La inclinación positiva apunta hacia abajo, mientras que la negativa apunta hacia arriba.roll: El parámetro de rodaje define la rotación alrededor de la cámara eje horizontal. Representa el movimiento de giro de la cámara. Un tirado de 0 indica que no hay rotación, mientras que los valores positivos o negativos denotan una de rotación hacia la derecha o la izquierda, respectivamente.
focusOptions: Opciones para enfocarse en un punto específicofocusRadius: Radio del enfoque.showFocus: Es un valor booleano para mostrar u ocultar el enfoque.showLocationMarker: Es un valor booleano que muestra u oculta el marcador de ubicación.
Guarda tu configuración
Por último, haz clic en Guardar la posición de la cámara para guardar la posición de la cámara y, luego, Haz clic en Salir del modo de edición para guardar tu trabajo.
Esta aplicación ofrece una interfaz fácil de usar que te permite personalizar la experiencia 3D. Esta es la app de Administrador.
El archivo config.json final
El archivo config.json final contiene toda la información necesaria para generar tu experiencia narrativa personalizada. Incluye los detalles de la página de portada, los capítulos y la configuración de la cámara. Puedes usar este archivo para ajustar tu historia y asegurarte de que para que se vea y se sienta exactamente como quieres.
Para comenzar,descarga el archivo config.json desde la app de Administrador o crea una nueva desde cero. Luego, abre el archivo en un editor de texto y comienza editar los valores. Puedes cambiar el texto, las imágenes y hasta la cámara para crear una experiencia envolvente y única para tu público.
Un archivo JSON de descripción general de una historia puede verse de la siguiente manera:
{
"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
}
}
Y un capítulo específico puede verse así. Los capítulos son un array y pueden contener muchos capítulos individuales dentro del 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
}
},
Personalización avanzadas
Puedes sumergirte en el código y realizar muchas otras personalizaciones:
Carga el archivo de configuración desde otra ubicación
De inmediato, la solución carga la configuración de la narración un archivo local . Sin embargo, esto se puede cambiar fácilmente en config.js:
export async function loadConfig(configUrl) {
try {
// Fetch the configuration data from the specified URL.
const configResponse = await fetch(configUrl);
Parámetros de configuración de la cámara
La cámara se puede personalizar aún más a partir del archivo /utils/cesium.js.
Define una cantidad de variables importantes como las siguientes:
- RADIUS
- BASE_PITCH_RADIANS
- BASE_HEADING_RADIANS
- BASE_ROLL_RADIANS
- DEFAULT_HIGHLIGHT_RADIUS
No dudes en modificar estas variables para obtener varios ángeles de cámara y experiencias.
Conclusión
En este documento, proporcionamos una guía para personalizar la narración en 3D. y mantener la integridad de su aplicación. Ya exploramos las diversas opciones disponibles en la app de Administrador cómo pueden utilizarse para crear historias de ubicación geográfica envolventes y atractivas. Mié también analizaron el proceso de creación de una historia personalizada con el archivo config.json . Próximos pasos
Ahora que aprendiste a personalizar la aplicación Narración en 3D, puedes puedes empezar a crear tus propias historias. A continuación, te presentamos algunas ideas para comenzar:
- Crea una historia sobre tu ciudad natal o un lugar que hayas visitado.
- Crea una historia sobre un acontecimiento histórico o una persona que te haya inspirado.
- Crea una historia sobre un mundo ficticio o un sueño que hayas tenido.
Las posibilidades son infinitas. Así que deja volar tu imaginación y crea algo realmente especial.