Modelos

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Los modelos son recursos 3D que se pueden agregar a una escena para representar objetos. Los mapas en 3D fotorrealistas de la API de Maps JavaScript admiten la inclusión de modelos glTF. Estos modelos se pueden escalar y rotar para permitir una mayor personalización.

Los modelos deben admitir las propiedades principales del PBR de glTF. No se admiten extensiones ni propiedades de extensión.

Agregar un modelo

El constructor Model3DElement toma un conjunto de Model3DElementOptions que especifica las coordenadas LatLng del modelo y un conjunto de parámetros para admitir el posicionamiento del modelo.

Los modelos admiten las siguientes opciones:

• position: Es la ubicación del modelo expresada en coordenadas LatLng.
• orientation: Es la rotación del sistema de coordenadas del modelo. Las rotaciones se aplican en el siguiente orden: giro, inclinación y, luego, orientación.
• scale: Escala el modelo en su espacio de coordenadas. El valor predeterminado es 1.
• altitudeMode: Cómo se interpreta la altitud expresada en position.
• src: Es la URL del modelo.

En el siguiente ejemplo, se muestra cómo agregar modelos al mapa y modificarlos con las opciones de personalización 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();

Agrega un modelo interactivo

Los modelos también admiten interacción. En el siguiente ejemplo, se cambia la escala del modelo cuando se hace clic en él.

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