Modèles

Sélectionnez une plate-forme : Android iOS JavaScript

Les modèles sont des assets 3D qui peuvent être ajoutés à une scène pour représenter des objets. Les cartes 3D de l'API Maps JavaScript sont compatibles avec l'inclusion de modèles gLTF. Ces modèles peuvent être mis à l'échelle et pivotés pour permettre une personnalisation plus poussée.

Les modèles doivent être compatibles avec les propriétés de base du glTF PBR. Aucune extension ni propriété d'extension n'est acceptée.

Ajouter un modèle

Le Model3DElement constructeur utilise un ensemble de Model3DElementOptions qui spécifient les coordonnées LatLng du modèle et un ensemble de paramètres pour positionner le modèle.

Les modèles sont compatibles avec les options suivantes :

• position : emplacement du modèle exprimé en coordonnées LatLng.
• orientation : rotation du système de coordonnées du modèle. Les rotations sont appliquées dans l'ordre suivant : roulis, tangage, puis cap.
• scale : met à l'échelle le modèle dans son espace de coordonnées. La valeur par défaut est 1.
• altitudeMode : interprétation de l'altitude exprimée dans position.
• src : URL du modèle.

Important : Pour que les modèles s’affichent dans la scène, vous devez spécifier les options position et src.

Remarque : Si vous hébergez vos fichiers de modèle sur un site Web ou un serveur autre que votre application principale, vous devez vous assurer que votre application définit les en-têtes HTTP CORS appropriés.

L'exemple suivant montre comment ajouter des modèles à la carte et les modifier à l'aide des options de personnalisation disponibles :

async function init() {
  const { Map3DElement, MapMode, Model3DElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 37.7438, lng: -121.5088, altitude: 1800},
    heading: -90,
    tilt: 90,
    mode: MapMode.SATELLITE,
  });

  document.body.append(map);
  
  const models = [
    // A model with regular settings.
    {
      position: {lat: 37.76, lng: -121.63, altitude: 0},
      orientation: {tilt: 270},
    },
    // Scaled down model.
    {
      position: {lat: 37.75, lng: -121.63, altitude: 0},
      orientation: {tilt: 270},
      scale: 0.8,
    },
    // Scaled up model.
    {
      position: {lat: 37.735, lng: -121.63, altitude: 0},
      orientation: {tilt: 270},
      scale: 1.2,
    },
    // A model with an additional transformation applied.
    {
      position: {lat: 37.72, lng: -121.63, altitude: 0},
      orientation: {tilt: 270, roll: 90},
    },
    // Non-clamped to the ground model.
    {
      position: {lat: 37.71, lng: -121.63, altitude: 1000},
      altitudeMode: 'RELATIVE_TO_GROUND',
      orientation: {tilt: 270},
    },
  ];

  for (const {position, altitudeMode, orientation, scale} of models) {
    const model = new Model3DElement({
      src: 'https://storage.googleapis.com/maps-web-api.appspot.com/gltf/windmill.glb',
      position,
      altitudeMode,
      orientation,
      scale,
    });

    map.append(model);
  }
}

init();

Ajouter un modèle interactif

Les modèles sont également compatibles avec l'interaction. L'exemple suivant modifie l'échelle du modèle lorsque l'utilisateur clique dessus.

async function init() {
  const { Map3DElement, MapMode, Model3DInteractiveElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 37.7438, lng: -121.5088, altitude: 1800},
    heading: -90,
    tilt: 90,
    mode: MapMode.SATELLITE,
  });

  document.body.append(map);

  const model = new Model3DInteractiveElement({
    src: 'https://storage.googleapis.com/maps-web-api.appspot.com/gltf/windmill.glb',
    position: {lat: 37.76, lng: -121.63, altitude: 0},
    scale: 1.0,
  });

  model.addEventListener('gmp-click', (event) => {
    model.scale = (Math.random() * (1 - 2)).toFixed(2);

  });

  map.append(model);
}

init();