Storytelling 3D: guide de personnalisation

Introduction

Ce guide vous présente les différentes façons dont la solution de storytelling en 3D peut être personnalisé, ce qui vous permet de créer des histoires de géolocalisation captivantes.

Vous avez la possibilité de configurer sa solution de storytelling via deux méthodes pratiques. Tout d'abord, vous pouvez utiliser l'interface utilisateur intuitive disponible dans Application d'administration dotée d'un panneau de configuration dédié Dans ce panneau, les utilisateurs peuvent modifier les propriétés principales telles que imageUrl, title, date, etc. ; à la fois pour l'histoire dans son ensemble et pour chaque chapitre.

Vous pouvez ensuite ajuster les paramètres de l'appareil photo et les options de mise au point pour chaque à l'aide de l'IUG de l'application Admin. Une fois satisfait de sa 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 ignorer le panneau de configuration de l'administrateur. Cette double approche offre facile à utiliser et une manipulation JSON avancée.

Mise en route :

<ph type="x-smartling-placeholder">

Activer

Créez votre propre histoire

La mise en page générale de l'histoire est divisée en une couverture suivie de chapitres. Vous pouvez personnaliser la couverture et un chapitre individuellement. Découvrez
explique comment les témoignages peuvent être créés et personnalisés à l'aide de l'application Admin. ainsi que le fichier de configuration.

Page de couverture

La première chose à faire est de créer une page de couverture pour l'ensemble histoire. Cela permet d'ajouter un aperçu, une photo de couverture et une description à votre histoire.

Utiliser l'application d'administration

Commencez par ajouter une page de couverture pour votre article. Pour ce faire, accédez à l'application Admin à l'aide de l'écran suivant:

image

Utiliser config.json

De plus, si vous disposez du fichier de configuration, vous pouvez ajouter ces sections directement le fichier:

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

Il peut s'agir de n'importe quelle URL accessible publiquement qui redirige vers une image, un GIF ou une vidéo. que vous voulez utiliser comme média principal pour toute l'histoire.

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

Chapitres

L'histoire est divisée en chapitres, chacun présentant des variables spécifiques. Vous pouvez Vous pouvez créer autant de chapitres que vous le souhaitez. Pour commencer, sélectionnez une adresse, puis ajoutez les informations suivantes à la chapitre.

Utiliser l'application d'administration

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

Une fois le lieu ajouté, vous pouvez ajouter des détails au chapitre en cliquant sur 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 et vous pouvez 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: nom de 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 associée au chapitre.

Paramètres de la caméra

L'application propose de nombreuses commandes différentes pour l'appareil photo. Cette section présente les différents paramètres de la caméra et comment les personnaliser.

image

(Panoramique,zoom, inclinaison de la caméra pour obtenir l'angle de vue idéal)

Utiliser l'application d'administration

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

  • Le repère de position vous permet d'afficher ou de masquer un repère dans une zone spécifique. sa position géographique ou son masquage.

  • La mise au point du rayon crée une ombre vignetage autour d'une zone spécifique sans en mettant en évidence un lieu spécifique. C'est idéal pour présenter un quartier ou une zone géographique générale.

image

Cela montre comment modifier la mise au point de la caméra pour mettre en valeur une zone au lieu à un moment précis.

Utiliser config.json

Vous pouvez aussi personnaliser tous les paramètres de l'appareil photo directement à l'aide de la configuration JSON. :

  • cameraOptions: paramètres de l'appareil photo pour le chapitre. (en savoir plus sur les d'angles)

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

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

    • pitch: le paramètre d'inclinaison détermine l'angle vertical du caméra. Elle correspond à l'inclinaison ou à l'inclinaison du champ de vision de la caméra. A une hauteur positive pointe vers le bas, tandis qu'une hauteur négative pointe vers le haut.

    • roll: le paramètre de roulis définit la rotation autour du axe vertical. Il représente le mouvement de torsion de la caméra. Un lancer de 0 indique l'absence de rotation, tandis que les valeurs positives ou négatives indiquent une vers la droite ou vers la gauche, respectivement.

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

  • focusRadius: rayon de la mise au point.

  • showFocus: booléen permettant d'afficher ou de masquer le curseur.

  • showLocationMarker: booléen 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 la caméra, puis cliquez 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 d'administration.

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 la caméra. Vous pouvez utiliser ce fichier pour peaufiner votre histoire et vous assurer l'apparence et la sensation exactement comme vous le souhaitez.

Pour commencer,téléchargez le fichier config.json depuis l'application Admin ou en créer un nouveau à partir de zéro. Ensuite, ouvrez le fichier dans un éditeur de texte et commencez en modifiant les valeurs. Vous pouvez modifier le texte, les images afin de créer une expérience unique et immersive pour votre audience.

Un fichier JSON de présentation de l'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
    }
  }

Et un chapitre spécifique peut ressembler à ceci. Les chapitres sont un tableau de nombreux chapitres individuels dans le tableau.

"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 explorer le code et effectuer plusieurs autres personnalisations:

Charger le fichier de configuration depuis un autre emplacement

Prête à l'emploi, la solution charge la configuration de storytelling un fichier local . Toutefois, vous pouvez facilement le modifier dans config.js:

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

Configurations des caméras

Vous pouvez personnaliser davantage la caméra à partir du fichier /utils/cesium.js. Elle définit un certain nombre de variables importantes, telles que:

  • RAYON
  • BASE_PITCH_RADIANS
  • BASE_HEADING_RADIANS
  • BASE_ROLL_RADIANS
  • DEFAULT_HIGHLIGHT_RADIUS

N'hésitez pas à modifier ces variables pour obtenir différents angles de caméra et expériences.

Conclusion

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

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

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

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