Storytelling 3D: guide de personnalisation

Introduction

Ce guide vous présente les différentes façons de personnaliser la solution de narration en 3D, afin de créer des histoires de géolocalisation captivantes.

Vous avez la possibilité de configurer leur solution de narration grâce à deux méthodes pratiques. Tout d'abord, vous pouvez utiliser l'interface utilisateur intuitive disponible dans l'application Admin, qui comporte un panneau de configuration dédié. Dans ce panneau, les utilisateurs peuvent modifier les propriétés principales telles que imageUrl, titre, date et plus encore, à la fois pour l'histoire globale et les chapitres individuels.

Ensuite, vous pouvez ajuster les paramètres de l'appareil photo et les options de mise au point pour chaque chapitre à l'aide de l'IUG de l'application d'administration. Une fois satisfaits de leur configuration, les utilisateurs ont la possibilité de télécharger le fichier JSON généré.

Vous pouvez également modifier directement le fichier JSON. Vous pouvez ajuster la structure JSON, charger la solution de storytelling configurée et contourner le panneau de configuration de l'administrateur. Cette double approche offre à la fois une interface conviviale et une manipulation JSON avancée.

Premiers pas :

Activer

Créez votre propre histoire

L'histoire se compose d'une couverture, suivie de chapitres. La couverture et les chapitres peuvent être personnalisés individuellement. Découvrez
en détail comment créer et personnaliser ces histoires à l'aide de l'application Admin et du fichier de configuration.

Page de couverture

La première chose à faire est de créer une page de couverture pour l'ensemble de l'histoire. La présentation, une photo de couverture et une description sont alors ajoutées à votre article.

Utiliser l'application d'administration

Commencez par ajouter une page de couverture pour votre article. Pour ce faire, utilisez l'écran suivant dans l'application Admin:

Image

Utiliser config.json

De plus, si vous disposez du fichier de configuration, vous pouvez y ajouter directement les sections suivantes:

  • 1. imageUrl: URL du fichier multimédia principal (image, GIF ou vidéo) de l'article complet.

Il peut s'agir de n'importe quelle URL accessible au public pointant vers une image, un GIF ou un fichier vidéo que vous souhaitez utiliser comme support principal pour l'ensemble de l'article.

  • 2. title: titre de toute l'actualité.
  • 3. date: date ou période associée à la story.
  • 4. description: brève description de l'actualité
  • 5. createdBy: créateur ou auteur de l'histoire.
  • 6. imageCredit: crédit attribué à l'image principale.
  • 7. cameraOptions: paramètres initiaux de l'appareil photo pour l'ensemble de la story.

Chapitres

L'histoire est divisée en chapitres, chacun avec son propre ensemble de variables. Vous pouvez créer autant de chapitres que vous le souhaitez. Commencez par sélectionner une adresse, puis ajoutez les informations suivantes au chapitre.

Utiliser l'application d'administration

Recherche de lieu: utilisez la barre de recherche de saisie semi-automatique intégrée de Google Maps Platform pour trouver le lieu que vous souhaitez afficher.

Une fois qu'un lieu est ajouté, vous pouvez ajouter des détails au chapitre en cliquant sur le bouton Edit (Modifier) à côté du lieu:

Image

Ajoutez des informations sur le lieu:

Une fois que vous êtes satisfait de la configuration globale, téléchargez le fichier JSON pour l'utiliser dans l'application de démonstration.

Configurer à l'aide de config.json

Vous pouvez modifier les variables suivantes directement dans le fichier config.json téléchargé pour personnaliser chaque chapitre:

  • title: titre du chapitre.
  • id: identifiant unique du chapitre.
  • imageUrl: URL de l'image du chapitre.
  • imageCredit: crédit accordé à l'image du chapitre.
  • content: contenu textuel du chapitre.
  • dateTime: date ou période spécifique au chapitre.
  • coords: coordonnées du lieu associé au chapitre.
    • lat: latitude.
    • lng: longitude.
  • address: adresse liée au chapitre.

Paramètres de la caméra

L'application offre de nombreuses commandes différentes sur la caméra. Cette section vous présente les différents paramètres de la caméra et comment les personnaliser.

Image

(Panoramique,zoom, inclinez la caméra pour obtenir l'angle de vue parfait)

Utiliser l'application Console d'administration

Caméra:ajustez la vitesse de mouvement de la caméra et le type d'orbite pour créer l'expérience de visionnage choisie.

  • Le repère de position vous permet d'afficher ou de masquer le repère d'un lieu spécifique.

  • Le ciblage par rayon crée une ombre de vignetage autour d'une zone spécifique sans indiquer de lieu spécifique. C'est idéal pour montrer un quartier ou une zone générale.

Image

Montre comment modifier la mise au point de la caméra pour mettre en valeur une zone plutôt qu'un point spécifique.

Utiliser config.json

Vous pouvez également personnaliser tous les paramètres de l'appareil photo directement à l'aide du fichier de configuration JSON:

  • cameraOptions: paramètres de l'appareil photo pour le chapitre. En savoir plus sur les angles de caméra

    • position: le paramètre de position détermine les coordonnées spatiales de la caméra dans l'environnement 3D. Elle comporte trois valeurs: x, y et z. Chaque coordonnée représente un point sur les axes x, y et z, définissant l'emplacement de la caméra.

    • heading: le paramètre de cap fait référence à la direction horizontale vers laquelle la caméra est dirigée. En termes géographiques, il représente l'angle entre la vue de la caméra et la direction vers le nord. Un cap de 0 indique que la caméra pointe vers le nord.

    • pitch: le paramètre d'inclinaison détermine l'angle vertical de la caméra. Indique l'inclinaison ou l'inclinaison de la vue de la caméra. Un argumentaire positif montre vers le bas, tandis qu'un argumentaire négatif pointe vers le haut.

    • roll: le paramètre de roulis définit la rotation autour de l'axe de la caméra. Elle représente le mouvement de rotation de la caméra. Un rouleau de 0 indique qu'il n'y a pas de rotation, tandis que les valeurs positives ou négatives indiquent une rotation vers la droite ou vers la gauche, respectivement.

  • focusOptions: options permettant de se concentrer sur un point spécifique.

  • focusRadius: rayon de mise au point.

  • showFocus: booléen pour afficher ou masquer le focus.

  • showLocationMarker: valeur booléenne permettant d'afficher ou de masquer le repère de position.

Enregistrer votre configuration

Enfin, cliquez sur Enregistrer la position de la caméra pour enregistrer la position de votre caméra, puis sur Quitter le mode Édition pour enregistrer votre travail.

Image

Cette application fournit une interface conviviale qui vous permet de personnaliser l'expérience 3D. Il s'agit de l'application Admin.

Le fichier config.json final

Le fichier config.json final contient toutes les informations nécessaires pour générer votre expérience de storytelling personnalisée. Elle comprend les détails de la page de couverture, les chapitres et les paramètres de l'appareil photo. Vous pouvez utiliser ce fichier pour peaufiner votre histoire et vous assurer qu'elle se présente exactement comme vous le souhaitez.

Pour commencer,téléchargez le fichier config.json à partir de l'application Admin ou créez-en un nouveau. Ensuite, ouvrez le fichier dans un éditeur de texte et commencez à modifier les valeurs. Vous pouvez modifier le texte, les images et même les paramètres de la caméra pour créer une expérience unique et immersive pour votre audience.

Le fichier JSON de présentation d'un article peut se présenter comme suit:

{
  "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
    }
  }

Voici ce à quoi ressemble un chapitre spécifique. Les chapitres sont un tableau qui peuvent comporter de nombreux chapitres individuels.

"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
      }
    },

Personnalisations avancées

Vous pouvez plonger dans le code et effectuer plusieurs autres personnalisations:

Charger le fichier de configuration depuis un autre emplacement

La solution prête à l'emploi charge la configuration de storytelling à partir d'un fichier local . Toutefois, vous pouvez facilement modifier ce paramètre dans config.js:

export async function loadConfig(configUrl) {
  try {
    // Fetch the configuration data from the specified URL.
    const configResponse = await fetch(configUrl);

Configurations de la caméra

Vous pouvez personnaliser davantage l'appareil photo à partir du fichier /utils/cesium.js. Il définit un certain nombre de variables importantes, telles que:

  • RADIUS
  • BASE_PITCH_RADIANS
  • BASE_HEADING_RADIANS
  • BASE_ROLL_RADIANS
  • DEFAULT_HIGHLIGHT_RADIUS

N'hésitez pas à modifier ces variables pour obtenir différentes facettes de la caméra et des expériences.

Conclusion

Dans ce document, nous proposons un guide de personnalisation de l'application de narration en 3D. Nous avons exploré les différentes options disponibles dans l'application Admin et exploré comment les utiliser pour créer des histoires de géolocalisation immersives et engageantes. Nous avons également abordé le processus de création d'une story personnalisée à l'aide du fichier config.json. Étapes suivantes

Maintenant que vous savez comment personnaliser l'application de narration en 3D, vous pouvez commencer à créer vos propres histoires. Voici quelques conseils pour commencer :

  • Créez une histoire sur votre ville natale ou un lieu que vous avez visité.
  • Racontez l'histoire d'un événement historique ou racontez une histoire qui vous a inspirée.
  • Racontez l'histoire d'un rêve ou d'un monde fictif.

Les possibilités sont infinies ! Laissez libre cours à votre imagination et créez quelque chose de vraiment spécial.