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. Dans l'API Maps JavaScript, les cartes 3D photoréalistes 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 PBR glTF. Aucune extension ni propriété d'extension n'est acceptée.

Ajouter un modèle

Le constructeur Model3DElement utilise un ensemble de Model3DElementOptions qui spécifient les coordonnées LatLng du modèle et un ensemble de paramètres pour permettre le positionnement du 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, inclinaison, 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 en position.
  • src : URL du modèle.

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();