Narrativa em 3D: use o editor para criar uma história
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Pronto para criar histórias 3D cativantes que levam os espectadores a uma jornada por locais do mundo real? Este guia mostra como criar uma nova matéria usando
o editor integrado.
Use nossa interface intuitiva para ajustar títulos, descrições, imagens e ângulos de câmera. É perfeito para iniciantes!
Abrir o Editor de matéria
A solução 3D Storytelling vem com um editor integrado que permite
criar a história na interface
O editor fica no lado esquerdo da página. Clique neste ícone pequeno para abrir:
Para acessar o editor, acesse a versão hospedada do app 3D Storytelling Admin ou faça o download e instale sua própria instância do Storytelling no GitHub.
Criar a página de capa
Use a seção "Detalhes da matéria" para definir um título, uma imagem, uma descrição e outros detalhes. Isso apresenta sua história ao espectador.
Adicionar capítulos
Cada capítulo é como uma parada na sua jornada. Veja como adicionar:
Pesquise um local usando a barra de pesquisa de preenchimento automático integrada.
Depois de adicionar um local, clique no botão Editar ao lado dele para adicionar detalhes ao capítulo:
Clique em Editar para inserir o título, a descrição, a imagem e a data do capítulo.
Se quiser excluir um capítulo específico, há um botão Excluir logo abaixo do botão "Editar".
É possível reordenar os capítulos arrastando e movendo os ícones pontilhados à esquerda:
Salve o capítulo.
Para salvar um capítulo específico, clique no botão Sair do modo de edição.
O botão "Sair do modo de edição" funciona como um botão de salvar.
Personalizar as configurações da câmera
É possível personalizar diferentes configurações da câmera:
Mostrar/ocultar o marcador de local: talvez você não queira mostrar o alfinete em um local específico, mas sim destacar uma área geral.
Marque/desmarque a caixa "Mostrar marcador de local" para mostrar ou ocultar um alfinete.
Mostrar um raio ao redor de uma área: é possível mostrar uma área ao redor de um local específico usando o recurso "Mostrar foco de raio". Quando marcada, ela abre um controle deslizante de raio que permite controlar o raio do limite do foco da câmera.
Isso mostra como as opções avançadas de câmera ajudam a criar uma experiência personalizada.
Personalize a localização da câmera: ajuste o ângulo específico que você quer mostrar com controles fáceis:
Inclinar:veja o mapa de cima ou no nível do solo. Mantenha pressionada a tecla Control (ou Cmd em alguns computadores) enquanto clica e arrasta para cima ou para baixo com o mouse.
Girar:gire o mapa para ter uma visualização de 360 graus. Mantenha pressionada a tecla Control (ou Cmd em alguns computadores) enquanto clica e arrasta para a esquerda ou para a direita com o mouse.
Zoom:veja de perto ou em grande angular. Use a roda de rolagem do mouse
ou os gestos de zoom in/out que você já conhece.
Teste a combinação de inclinação, rotação e zoom para encontrar o ângulo perfeito para cada local. Os controles podem variar um pouco dependendo da configuração do computador.
Confira como controlar a tela 3D para conseguir o ângulo de câmera perfeito.
Finalizar e baixar
Depois que a história e os capítulos forem criados, faça o download da configuração.
Clique em Download para receber sua configuração personalizada no formato JSON.
Essa configuração pode ser usada para criar sua própria narrativa 3D bifurcando o código do GitHub.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2025-09-05 UTC."],[[["\u003cp\u003eCreate immersive 3D stories with real-world locations using the built-in editor to customize titles, descriptions, images, and camera angles for a captivating user journey.\u003c/p\u003e\n"],["\u003cp\u003eEasily add chapters to your story by searching for locations, providing details such as titles, descriptions, and images, and reordering them as needed.\u003c/p\u003e\n"],["\u003cp\u003eFine-tune the camera settings for each chapter by controlling the tilt, rotate, and zoom to achieve the perfect perspective and enhance the visual experience.\u003c/p\u003e\n"],["\u003cp\u003eDownload the story configuration in JSON format once finalized to integrate it with the 3D Storytelling solution and share it with your audience.\u003c/p\u003e\n"],["\u003cp\u003eAccess the 3D Storytelling Admin app either through the hosted version or by downloading the code from GitHub to get started building your stories.\u003c/p\u003e\n"]]],["The core process involves creating a 3D story using the built-in editor, accessible via a hosted app or downloaded code. Users set story details, add chapters by searching locations, and customize chapter elements like titles, descriptions, images, and dates. Chapters can be reordered and deleted. Camera settings are adjustable, including showing/hiding markers, displaying a radius, and fine-tuning the view via tilt, rotate, and zoom. Finally, the complete story configuration is downloadable as a JSON file.\n"],null,["Ready to create captivating 3D stories that take viewers on a journey through\nreal-world locations? This guide will show you how to build a new story using\nthe built-in editor.\n\nUse our intuitive interface to adjust titles, descriptions, images, and camera\nangles. It's perfect for beginners!\n| **Use the hosted** [3D Storytelling Admin app](https://js-3d-storytelling-admin-t6a6o7lkja-uc.a.run.app/)\n|\n| Or\n| [Get an API Key](https://console.cloud.google.com/google/maps-apis/credentials?utm_source=3d_solutions_storytelling). and **download** the code from [GitHub](https://github.com/googlemaps-samples/js-3d-storytelling).\n\nOpen the story editor\n\nThe 3D Storytelling solution comes with a built-in Editor which lets you to\nbuild the story from the UI\n\nThe editor is on the left side of the page. Open by clicking this small icon:\n\nYou can access the editor by visiting the hosted version\n[3D Storytelling Admin app](https://goo.gle/3d-storytelling-admin) or by\ndownloading and installing your own Storytelling instance from [GitHub](https://github.com/googlemaps-samples/js-3d-storytelling)\n\nCreate the cover page\n\nUse the \"Story details\" section to set a title, image, description, and other\ndetails. This introduces your story to the viewer.\n\nAdd chapters\n\nEach chapter is like a stop on your journey. Here's how to add them:\n\n1. Search for a location using the built-in Autocomplete search bar.\n\n2. Once a location is added you can add details to the chapter by clicking on the\n **Edit** button next to the location:\n\n3. Click \"**Edit**\" to enter the title, description, image, and date for your\n chapter.\n\n4. If you want to delete a particular chapter, there is a **delete** button right\n below the Edit button.\n\n5. You can **reorder** the chapters by dragging and moving using the left hand\n dotted icons:\n\nSave the chapter\n\nTo save a specific chapter just click the \"**Leave Edit mode**\" button.\nThe Leave Edit mode button acts as a save button.\n\nCustomize camera settings\n\nYou can customize different camera settings:\n\n- **Show/hide the location marker** You may not want\n to show the pin on a specific location rather want to showcase a general area.\n Check/uncheck the \"Display location marker\" box to show or hide a pin.\n\n- **Show a radius around an area** You can choose to show an area around a\n specific location using the \"Display Radius Focus\" feature. When checked\n it will open up a radius slider that will allow you to control the boundary\n radius of the camera focus.\n\n | **Note:** Make sure to click \"Save camera position\" to save the above settings before exiting.\n\nThis shows how advanced camera options help create a customized experience.\n\n- **Customize the camera location** Fine tune the specific camera angle you\n want to show with easy camera controls:\n\n- **Tilt:** See the map from above or at ground level. Hold down the Control\n key (or Cmd on some computers) while clicking and dragging up or down with\n your mouse.\n\n- **Rotate:** Spin the map for a 360-degree view. Hold down the Control key\n (or Cmd on some computers) while clicking and dragging left or right with your\n mouse.\n\n- **Zoom:** Get a close-up or a wide-angle view. Use scroll wheel of your mouse\n or familiar zoom in/out gestures.\n\nExperiment with combining tilt, rotate, and zoom to find the perfect angle for\neach location. The controls may vary slightly depending on your computer's\nsetup.\n\nCheck how to control the 3D canvas to get your perfect camera angle.\n\nFinalize and download\n\nOnce the story and the chapters are built, download the configuration.\n\nClick \"**Download**\" to get your customized config in JSON format.\n\nThis configuration can be used to create your own 3D Storytelling by forking the\ncode from [GitHub](https://github.com/googlemaps-samples/js-3d-storytelling)."]]
