דגמים

מודלים הם נכסי תלת-ממד שאפשר להוסיף לסצנה כדי לייצג אובייקטים. הכלי הפוטוריאליסטי מפות תלת-ממדיות ב-Maps JavaScript API תומך בהכללת מודלים של gLTF. ניתן להתאים אישית את המודלים האלה ולסובב אותם כדי לאפשר התאמה אישית נוספת.

המודלים חייבים לתמוך במאפייני הליבה של glTF PBR. אין תמיכה בתוספים או במאפייני תוספים.

הוספת מודל

ה-constructor Model3DElement משתמש בקבוצה של Model3DElementOptions לציון הקואורדינטות LatLng של המודל, ובקבוצת פרמטרים שתומכים במיקום המודל.

מודלים תומכים באפשרויות הבאות:

  • position: מיקום המודל מבוטא בקואורדינטות LatLng.
  • orientation: הסיבוב של מערכת הקואורדינטות של המודל. הסיבובים מתבצעים בסדר הבא: גלילה, הטיה ואז כותרת.
  • scale: שינוי גודל המודל במרחב הקואורדינטות שלו. ערך ברירת המחדל הוא 1.
  • altitudeMode: איך הגובה מבוטא ב-position מתפרש.
  • src: כתובת ה-URL של המודל.

הדוגמה הבאה ממחישה איך להוסיף מודלים למפה ולשנות אותם באמצעות האפשרויות הזמינות להתאמה אישית:

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

הוספת מודל אינטראקטיבי

מודלים גם תומכים באינטראקציה. הדוגמה הבאה משנה את קנה המידה של המודל כשלוחצים עליו.

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