Introdução
Neste guia, mostramos diferentes maneiras de personalizar a solução de narrativa 3D para criar histórias de geolocalização fascinantes.
Você tem a flexibilidade de configurar a solução de storytelling usando dois métodos convenientes. Primeiro, você pode usar a interface intuitiva disponível no app Admin, que tem um painel de configuração dedicado. Nesse painel, os usuários podem modificar as principais propriedades, como imageUrl, título, data e muito mais, tanto para a história geral quanto para capítulos individuais.
Em segundo lugar, é possível ajustar as configurações da câmera e as opções de foco para cada capítulo usando a GUI no app Admin. Quando satisfeitos com a configuração, os usuários têm a opção de fazer o download do arquivo JSON gerado.
Você também pode editar o arquivo JSON diretamente. É possível ajustar a estrutura JSON, carregar a solução de storytelling configurada e ignorar o painel de controle do administrador. Essa abordagem dupla oferece uma interface fácil de usar e uma manipulação JSON avançada.
Primeiros passos:
Ativar
Crie sua própria história
O layout geral da história é dividido em uma matéria de capa seguida por capítulos.
A capa e um capítulo podem ser personalizados individualmente. Confira
detalhes sobre como criar e personalizar as histórias usando o app Admin
e o arquivo de configuração.
Capa
A primeira coisa que você precisa fazer é criar uma página de abertura para sua história geral. Isso adiciona a visão geral, uma foto de capa e uma descrição à sua história.
Usar o app Admin
Comece adicionando uma página de capa para sua história. Para fazer isso, use o app Admin com a seguinte tela:
Usar o config.json
Além disso, se você tiver o arquivo de configuração, poderá adicionar diretamente estas seções ao arquivo:
- 1.
imageUrl
: URL do arquivo de mídia principal (imagem, GIF ou vídeo) de toda a história.
Pode ser qualquer URL acessível publicamente que aponte para um arquivo de imagem, GIF ou vídeo que você quer usar como mídia principal para toda a história.
- 2.
title
: título de toda a história. - 3.
date
: a data ou o período associado à história. - 4.
description
: uma breve descrição da história. - 5.
createdBy
: o criador ou autor da história. - 6.
imageCredit
: crédito da imagem principal. - 7.
cameraOptions
: configurações iniciais da câmera para toda a história.
Capítulos
A história é dividida em capítulos, cada um com um conjunto de variáveis. Você pode criar quantos capítulos quiser. Comece selecionando um endereço e adicione os seguintes detalhes ao capítulo.
Usar o app Admin
Pesquisa de local: use a barra de pesquisa de preenchimento automático integrada da Plataforma Google Maps para encontrar o local que você quer mostrar.
Depois de adicionar um local, você pode adicionar detalhes ao capítulo clicando no botão Editar ao lado dele:
Adicione detalhes sobre o local:
Quando estiver satisfeito com a configuração geral, faça o download do arquivo JSON e use-o no app de demonstração.
Configurar usando config.json
É possível editar as seguintes variáveis diretamente no arquivo config.json para personalizar cada capítulo:
title
: título do capítulo.id
: identificador exclusivo do capítulo.imageUrl
: URL da imagem do capítulo.imageCredit
: crédito pela imagem do capítulo.content
: conteúdo de texto do capítulo.dateTime
: data ou período específico do capítulo.coords
: coordenadas do local associado ao capítulo.lat
: latitude.lng
: longitude.
address
: endereço relacionado ao capítulo.
Configurações da câmera
O aplicativo oferece vários controles diferentes na câmera. Esta seção explica as diferentes configurações da câmera e como personalizá-las.
(Panorâmica,zoom, incline a câmera para ter o ângulo de visualização perfeito)
Usar o app Admin
Câmera:ajuste a velocidade de movimento da câmera e o tipo de órbita para criar a experiência de visualização escolhida.
O marcador de local permite mostrar ou ocultar um alfinete em um local específico.
O foco de raio cria uma sombra de vinheta em torno de uma área específica sem indicar o local exato. Isso é ótimo para mostrar um bairro ou uma área geral.
Isso mostra como mudar o foco da câmera para mostrar uma área em vez de um ponto específico.
Usar o config.json
Você também pode personalizar todos os parâmetros da câmera diretamente usando o arquivo de configuração JSON:
cameraOptions
: configurações da câmera para o capítulo. Saiba mais sobre ângulos de câmera.position
: o parâmetro de posição determina as coordenadas espaciais da câmera no ambiente 3D. Ele consiste em três valores: x, y e z. Cada coordenada representa um ponto nos eixos x, y e z, definindo a localização da câmera.heading
: o parâmetro de direção se refere à direção horizontal em que a câmera está apontada. Em termos geográficos, ele representa o ângulo entre a vista da câmera e a direção norte. Uma direção de 0 indica que a câmera está apontada para o norte.pitch
: o parâmetro de inclinação determina o ângulo vertical da câmera. Ele indica a inclinação da vista da câmera. Um tom positivo é voltado para baixo, enquanto um tom negativo é voltado para cima.roll
: o parâmetro de inclinação define a rotação em torno do eixo da câmera. Ele representa o movimento de torção da câmera. Um valor de 0 indica que não há rotação, enquanto valores positivos ou negativos indicam uma rotação para a direita ou esquerda, respectivamente.
focusOptions
: opções para focar em um ponto específico.focusRadius
: raio de foco.showFocus
: booleano para mostrar ou ocultar o foco.showLocationMarker
: booleano para mostrar ou ocultar o marcador de local.
Salvar a configuração
Por fim, clique em Salvar posição da câmera para salvar a posição da câmera e, em seguida, clique em Sair do modo de edição para salvar seu trabalho.
Esse aplicativo oferece uma interface fácil de usar que permite personalizar a experiência 3D. Este é o app de administrador.
O config.json final
O arquivo config.json final contém todas as informações necessárias para gerar sua experiência de narrativa personalizada. Ele inclui detalhes da página de rosto, capítulos e configurações da câmera. Você pode usar esse arquivo para ajustar sua história e garantir que ela tenha a aparência e a sensação que você quer.
Para começar,faça o download do arquivo config.json no app Admin ou crie um novo do zero. Em seguida, abra o arquivo em um editor de texto e comece a editar os valores. Você pode mudar o texto, as imagens e até as configurações da câmera para criar uma experiência única e imersiva para seu público.
Um arquivo JSON de visão geral da história pode ser assim:
{
"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 um capítulo específico pode ter esta aparência. O chapters é uma matriz e pode receber vários capítulos individuais dentro dela.
"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
}
},
Personalizações avançadas
Você pode mergulhar no código e fazer várias outras personalizações:
Carregar o arquivo de configuração de outro local
A solução carrega a configuração de storytelling de um arquivo local . No entanto, isso pode ser facilmente alterado em config.js:
export async function loadConfig(configUrl) {
try {
// Fetch the configuration data from the specified URL.
const configResponse = await fetch(configUrl);
Configurações da câmera
A câmera pode ser personalizada no arquivo /utils/cesium.js
.
Ele define várias variáveis importantes, como:
- RADIUS
- BASE_PITCH_RADIANS
- BASE_HEADING_RADIANS
- BASE_ROLL_RADIANS
- DEFAULT_HIGHLIGHT_RADIUS
Sinta-se à vontade para ajustar essas variáveis e ter diferentes ângulos e experiências de câmera.
Conclusão
Neste documento, fornecemos um guia para personalizar o aplicativo de contação de histórias em 3D. Analisamos as várias opções disponíveis no app Admin e como elas podem ser usadas para criar histórias de geolocalização imersivas e envolventes. Também discutimos o processo de criação de uma história personalizada usando o arquivo config.json. Próximas etapas
Agora que você aprendeu a personalizar o aplicativo de narração de histórias em 3D, é hora de começar a criar suas próprias histórias. Confira algumas ideias para começar:
- Crie uma história sobre sua cidade natal ou um lugar que você visitou.
- Crie uma história sobre um evento histórico ou uma pessoa que inspirou você.
- Crie uma história sobre um mundo fictício ou um sonho que você teve.
As possibilidades são infinitas. Então solte a imaginação e crie algo realmente especial.