Introdução
Este guia mostra diferentes maneiras de personalizar a solução de narrativa em 3D, permitindo que você crie histórias de geolocalização cativantes.
Você tem a flexibilidade de configurar a solução de narrativa com dois métodos convenientes. Primeiro, você pode usar a interface intuitiva disponível no app Admin, com 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. Depois de satisfeito com a configuração, os usuários têm a opção de fazer o download do arquivo JSON gerado.
Outra opção é editar diretamente o arquivo JSON. É possível ajustar a estrutura JSON, carregar a solução de narrativa configurada e ignorar o painel de controle do administrador. Essa abordagem dupla oferece uma interface fácil de usar e manipulação JSON avançada.
Primeiros passos:
Ativar
Crie sua história
O layout geral da história é dividido em uma história de capa, seguida por capítulos.
É possível personalizar a capa e o capítulo individualmente. Confira
detalhes sobre como as histórias podem ser criadas e personalizadas usando o app Admin
e o arquivo de configuração.
Capa
A primeira coisa que você precisa fazer é criar uma capa 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 capa para sua matéria. Para fazer isso no app Admin, use a seguinte tela:
Usar config.json
Além disso, se você tiver o arquivo de configuração, poderá adicionar diretamente estas seções nele:
- 1.
imageUrl
: é o URL do arquivo de mídia principal (imagem, GIF ou vídeo) de toda a história.
Qualquer URL acessível publicamente que aponte para um arquivo de imagem, GIF ou vídeo que você queira usar como a mídia principal de toda a história.
- 2.
title
: título da história inteira. - 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 para a 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 o próprio conjunto de variáveis. Você pode criar quantos capítulos quiser. Você começa selecionando um endereço e, em seguida, adiciona os seguintes detalhes ao capítulo.
Usar o app Admin
Pesquisa de local: use a barra de pesquisa integrada do Autocomplete da Plataforma Google Maps para encontrar o local que você quer mostrar.
Depois de adicionar um local, é possível adicionar detalhes a ele clicando no botão Edit ao lado do local:
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 transferido por download 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 para a imagem do capítulo.content
: conteúdo de texto do capítulo.dateTime
: data ou período específico do capítulo.coords
: coordenadas para o local associado ao capítulo.lat
: latitude.lng
: longitude.
address
: endereço relacionado ao capítulo.
Configurações da câmera
O aplicativo oferece muitos controles diferentes na câmera. Esta seção mostra as diferentes configurações da câmera e como personalizá-las.
(Panorâmica,zoom, incline a câmera para obter o ângulo de visã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.
Com o marcador de local, você pode exibir um alfinete em um local específico ou ocultá-lo.
O foco do raio cria uma sombra de vinheta em torno de uma área específica sem definir um local específico. 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 config.json
Também é possível 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 refere-se à direção horizontal para a qual a câmera está apontada. Em termos geográficos, ela representa o ângulo entre a visão da câmera e a direção norte. Um valor 0 indica que a câmera está apontando para o norte.pitch
: o parâmetro de inclinação determina o ângulo vertical da câmera. Significa a inclinação ou inclinação da visão da câmera. Um valor positivo aponta para baixo, enquanto que um negativo aponta para cima.roll
: o parâmetro de rolagem define a rotação em torno do eixo da câmera. Ele representa o movimento de torção da câmera. Um valor 0 indica que não há rotação, enquanto valores positivos ou negativos indicam uma rotação para a direita ou para a esquerda, respectivamente.
focusOptions
: opções para focar em um ponto específico.focusRadius
: raio para 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 Sair do modo de edição para salvar seu trabalho.
Este app oferece uma interface fácil de usar que permite personalizar a experiência 3D. Este é o app Admin.
O config.json final
O arquivo config.json final contém todas as informações necessárias para gerar sua experiência personalizada de narrativa. Ele inclui os detalhes da página da capa, os capítulos e as configurações da câmera. Você pode usar esse arquivo para ajustar sua história e garantir que ela tenha a aparência exata da maneira 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. É possível mudar o texto, as imagens e até mesmo as configurações da câmera para criar uma experiência única e imersiva para o público.
Um arquivo JSON de visão geral da história pode ter esta aparência:
{
"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 essa aparência. Capítulos são uma matriz e podem ter 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
Pronto para uso, a solução carrega a configuração da narrativa a partir 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 ainda mais personalizada no arquivo /utils/cesium.js
.
Ela define uma série de variáveis importantes, como:
- serviço de autenticação RADIUS
- BASE_PITCH_RADIANS
- BASE_HEADING_RADIANS
- BASE_ROLL_RADIANS
- DEFAULT_HIGHLIGHT_RADIUS
Sinta-se à vontade para ajustar essas variáveis para obter vários anjos de câmera e experiências.
Conclusão
Neste documento, oferecemos um guia para personalizar o aplicativo de narrativa em 3D. Exploramos as várias opções disponíveis no app Admin e como elas podem ser usadas para criar histórias imersivas e envolventes de geolocalização. 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 narrativa em 3D, pode começar a criar suas próprias histórias. Veja a seguir algumas ideias para começar:
- Escreva uma história sobre sua cidade natal ou um lugar que você visitou.
- Escreva 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. Dê asas à sua imaginação e crie algo realmente especial.