Storytelling en 3D: créez une histoire à l'aide de l'éditeur
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Prêt à créer des histoires 3D captivantes qui emmènent les spectateurs en voyage dans des lieux réels ? Ce guide vous explique comment créer une histoire à l'aide de l'éditeur intégré.
Utilisez notre interface intuitive pour ajuster les titres, les descriptions, les images et les angles de caméra. C'est parfait pour les débutants !
Ouvrir l'éditeur d'histoire
La solution 3D Storytelling est fournie avec un éditeur intégré qui vous permet de créer l'histoire à partir de l'UI.
L'éditeur se trouve sur la gauche de la page. Ouvrez-le en cliquant sur cette petite icône :
Utilisez la section "Détails de l'article" pour définir un titre, une image, une description et d'autres informations. Elle présente votre histoire au spectateur.
Ajouter des chapitres
Chaque chapitre est comme une étape de votre parcours. Voici comment les ajouter :
Recherchez un lieu à l'aide de la barre de recherche Autocomplete intégrée.
Une fois un lieu ajouté, vous pouvez ajouter des détails au chapitre en cliquant sur le bouton Modifier à côté du lieu :
Cliquez sur Modifier pour saisir le titre, la description, l'image et la date de votre chapitre.
Si vous souhaitez supprimer un chapitre spécifique, un bouton Supprimer se trouve juste en dessous du bouton "Modifier".
Vous pouvez réorganiser les chapitres en les faisant glisser à l'aide des icônes en forme de points sur la gauche :
Enregistrer le chapitre
Pour enregistrer un chapitre spécifique, il vous suffit de cliquer sur le bouton Quitter le mode Édition.
Le bouton "Quitter le mode Édition" sert de bouton d'enregistrement.
Personnaliser les paramètres de la caméra
Vous pouvez personnaliser différents paramètres de la caméra :
Afficher/masquer le repère de localisation : vous pouvez choisir de ne pas afficher l'épingle à un endroit précis et de présenter plutôt une zone générale.
Cochez ou décochez la case "Afficher le repère de localisation" pour afficher ou masquer un repère.
Afficher un rayon autour d'une zone : vous pouvez choisir d'afficher une zone autour d'un lieu spécifique à l'aide de la fonctionnalité "Afficher le rayon". Si cette option est cochée, un curseur de rayon s'ouvre, ce qui vous permet de contrôler le rayon de la limite de la mise au point de la caméra.
Cette vidéo montre comment les options avancées de l'appareil photo permettent de créer une expérience personnalisée.
Personnaliser l'emplacement de la caméra : affinez l'angle de caméra spécifique que vous souhaitez afficher grâce à des commandes simples :
Inclinaison : affichez la carte d'en haut ou au niveau du sol. Maintenez la touche Ctrl (ou Cmd sur certains ordinateurs) enfoncée tout en cliquant et en faisant glisser la souris vers le haut ou vers le bas.
Faire pivoter : faites pivoter la carte pour obtenir une vue à 360 degrés. Maintenez la touche Ctrl (ou Cmd sur certains ordinateurs) enfoncée tout en cliquant et en faisant glisser la souris vers la gauche ou la droite.
Zoom : obtenez un gros plan ou une vue grand-angle. Utilisez la molette de votre souris ou les gestes de zoom avant/arrière habituels.
Testez différentes combinaisons d'inclinaison, de rotation et de zoom pour trouver l'angle idéal pour chaque emplacement. Les commandes peuvent varier légèrement en fonction de la configuration de votre ordinateur.
Découvrez comment contrôler le canevas 3D pour obtenir l'angle de caméra idéal.
Finaliser et télécharger
Une fois l'histoire et les chapitres créés, téléchargez la configuration.
Cliquez sur Télécharger pour obtenir votre configuration personnalisée au format JSON.
Vous pouvez utiliser cette configuration pour créer votre propre storytelling 3D en forçant le code depuis GitHub.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/09/05 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 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)."]]
