Introdução
Este guia vai mostrar como a solução de narrativa em 3D pode ser personalizados, permitindo que você crie histórias cativantes por geolocalização.
Você tem flexibilidade para configurar a solução narrativa usando duas métodos convenientes. 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 propriedades principais, como imageUrl, título, data, entre outras; tanto para a história geral quanto para capítulos individuais.
Segundo, é possível ajustar as configurações da câmera e as opções de foco para cada capítulo usando a GUI no aplicativo Admin. Quando estiver satisfeito com a configuração, os usuários têm a opção de fazer o download do arquivo JSON gerado.
Como alternativa, é possível 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 fácil de usar e manipulação avançada de JSON.
Primeiros passos:
Ativar
Crie sua história
O layout geral da história é dividido em uma história de capa seguida por capítulos.
A capa e o capítulo podem ser personalizados individualmente. Confira
detalhes sobre como as histórias podem ser criadas e personalizadas usando o aplicativo Admin
e o arquivo de configuração.
Capa
A primeira coisa que você precisa fazer é criar uma página de capa para seu site história. Essa ação adiciona a visão geral, uma foto de capa e uma descrição à história.
Usar o app Admin
Comece adicionando uma página de capa para a matéria. Você pode fazer isso no app Admin usando a seguinte tela:
Usar o arquivo config.json
Além disso, se você tiver o arquivo de configuração, poderá adicionar essas seções diretamente no o arquivo:
- 1.
imageUrl
: URL do arquivo de mídia principal (imagem, gif ou vídeo) da toda a história.
Pode ser qualquer URL acessível publicamente que aponte para uma imagem, gif ou vídeo que você quer usar como a principal mídia de toda a maté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 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 seu próprio conjunto de variáveis. Você pode crie 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 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 acrescentar detalhes ao capítulo clicando no Editar ao lado do local:
Adicione detalhes sobre o local:
Quando estiver tudo certo com a configuração geral, faça o download do arquivo JSON e poderá usá-lo 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 da 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 para a câmera. Esta seção mostra as diferentes configurações da câmera e como personalizá-las.
(Movimente,aplique zoom, incline a câmera para conseguir 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 o experiência de visualização escolhida.
Marcador de local: permite alternar entre mostrar um alfinete em um local específico ou ocultá-lo.
O foco no raio cria uma sombra de vinheta ao redor de uma área específica sem indicar um local específico. Isso é ótimo para mostrar uma vizinhança ou área geral.
Isso mostra como mudar o foco da câmera para mostrar uma área em vez de um ponto específico.
Usar o arquivo config.json
Também é possível personalizar todos os parâmetros da câmera diretamente com a configuração JSON arquivo:
cameraOptions
: configurações da câmera para o capítulo. (saiba mais sobre câmera ângulos)position
: o parâmetro de posição determina as coordenadas espaciais de a câmera no ambiente 3D. Ela consiste em três valores: x, y e z. Cada coordenada representa um ponto nos eixos x, y e z, definindo a a localização da câmera.heading
: o parâmetro "heading" se refere à direção horizontal na para a qual a câmera está apontada. Em termos geográficos, ângulo entre a visão da câmera e a direção norte. Um cabeçalho com valor 0 indica que a câmera está apontando para o norte.pitch
: o parâmetro de inclinação determina o ângulo vertical do câmera. Significa a inclinação ou a inclinação da visão da câmera. Um Um tom positivo aponta para baixo, enquanto um negativo aponta para cima.roll
: o parâmetro "roll" define a rotação em torno do . Ele representa o movimento de giro da câmera. Um resultado de 0 indica que não há rotação, enquanto valores positivos ou negativos indicam rotação para a direita ou esquerda, respectivamente.
focusOptions
: opções para focar em um ponto específico.focusRadius
: raio do foco.showFocus
: booleano para mostrar ou ocultar o foco.showLocationMarker
: booleano para mostrar ou ocultar o marcador de local.
Salvar a configuração
Clique em Salvar posição da câmera para salvar a posição da câmera. 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 aplicativo Admin.
O arquivo config.json final
O arquivo config.json final contém todas as informações necessárias para gerar o experiência de narrativa personalizada. Ele inclui os detalhes da capa, os capítulos, e as configurações da câmera. Use esse arquivo para ajustar sua história e garantir tem a aparência e o comportamento que você quer.
Para começar,faça o download do arquivo config.json no app Admin ou criar um novo a partir do zero. Em seguida, abra o arquivo em um editor de texto e comece editar os valores. Você pode mudar o texto, as imagens e até mesmo a câmera para criar uma experiência única e imersiva para seu público-alvo.
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 é uma matriz e pode usar capítulos individuais dentro da matriz.
"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 pronta para uso carrega a configuração da narrativa do em um arquivo local . No entanto, isso pode ser alterado facilmente 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 usando o arquivo /utils/cesium.js
.
Ele define uma série de 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 para obter vários anjos da câmera e experiências.
Conclusão
Nestes documentos, fornecemos um guia para personalizar a narrativa em 3D para o aplicativo. Conhecemos as várias opções disponíveis no app Admin e como elas podem ser usadas para criar histórias imersivas e envolventes por geolocalização. Qa também discutimos o processo de criação de histórias personalizadas usando o arquivo config.json . Próximas etapas
Agora que aprendeu a personalizar o aplicativo de narrativa em 3D, pode 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. Dê asas à sua imaginação e crie algo realmente especial.