Narrativa 3D: guia de personalização

Introdução

Este guia vai mostrar como a solução de narrativa em 3D pode ser personalizada, permitindo que você crie histórias cativantes por geolocalização.

Você tem a flexibilidade de configurar a solução de narrativa deles usando dois métodos convenientes. Você pode usar a interface intuitiva disponível no app Admin, que inclui um painel de configuração dedicado. Nesse painel, os usuários podem modificar as propriedades principais, como imageUrl, título, data e muito mais, tanto para a história geral quanto para capítulos individuais.

Em segundo lugar, você pode ajustar as configurações da câmera e as opções de foco para cada capítulo usando a GUI no app Admin. Quando a configuração for satisfatória, os usuários terão a opção de fazer o download do arquivo JSON gerado.

Como alternativa, é possível editar diretamente o arquivo JSON. Você pode 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 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 os
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 página de capa para sua história geral. 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. Para fazer isso no app Admin, use a tela a seguir:

imagem

Usar o arquivo config.json

Além disso, se você tiver o arquivo de configuração, poderá adicionar diretamente estas seções nele:

  • 1. imageUrl: URL do arquivo de mídia principal (imagem, gif ou vídeo) da história inteira.

Pode ser qualquer URL de acesso público que direcione para uma imagem, um gif ou um arquivo de vídeo que você queira usar como a mídia principal 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 criar quantos capítulos quiser. Para começar, selecione um endereço e adicione os seguintes detalhes ao capítulo.

Usar o app Admin

Pesquisa de local: use a barra de pesquisa integrada de preenchimento automático da Plataforma Google Maps para encontrar o local que você quer mostrar.

Depois de adicionar um local, é possível acrescentar detalhes ao capítulo clicando no botão Editar ao lado do local:

imagem

Adicione detalhes sobre o local:

Quando estiver satisfeito com a configuração geral, faça o download do arquivo json para usá-lo no app de demonstração.

Configurar usando config.json

Você pode editar as seguintes variáveis diretamente no arquivo config.json baixado 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 apresenta as diferentes configurações da câmera e como personalizá-las.

imagem

(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 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 no 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 área geral.

imagem

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 usando o arquivo de configuração json:

  • cameraOptions: configurações da câmera para o capítulo. (saiba mais sobre ângulos da câmera)

    • position: o parâmetro de posição determina as coordenadas espaciais da 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 o local da câmera.

    • heading: o parâmetro "heading" se refere à direção horizontal em que a câmera está apontada. Em termos geográficos, ele representa o ângulo entre a visão da câmera e a direção norte. Um cabeçalho de 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 a inclinação da visão da câmera. Um tom positivo aponta para baixo, enquanto um negativo aponta para cima.

    • roll: o parâmetro "roll" define a rotação em torno do eixo da câmera. Ele representa o movimento de giro da câmera. Uma jogada 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 do 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.

imagem

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 sua experiência de narrativa personalizada. Ela 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 que ela tenha a aparência e o funcionamento esperados.

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" é uma matriz e pode receber muitos 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 pronta para uso carrega a configuração da narrativa de 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

É possível personalizar ainda mais a câmera usando o arquivo /utils/cesium.js. Ele 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 da câmera e experiências.

Conclusão

Nestes documentos, fornecemos um guia para personalizar o aplicativo de narrativa em 3D. Conhecemos 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 3D Storytelling, pode começar a criar suas próprias histórias. Veja a seguir 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. Deixe sua imaginação fluir e crie algo realmente especial.