מודלים

בחירת פלטפורמה: Android iOS JavaScript

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

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

הוספת מודל

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

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

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

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

async function init() {
    // Import the needed libraries.
    const { Map3DElement, Model3DElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 },
        range: 1500,
        tilt: 74,
        heading: 0,
        mode: 'HYBRID',
    });

    const model = new Model3DElement({
        src: 'https://maps-docs-team.web.app/assets/windmill.glb',
        position: { lat: 39.1178, lng: -106.4452, altitude: 4495.4952 },
        orientation: { heading: 0, tilt: 270, roll: 90 },
        scale: 0.15,
        altitudeMode: 'CLAMP_TO_GROUND',
    });

    document.body.append(map);
    map.append(model);
}

void init();

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

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

async function init() {
    // Import the needed libraries.
    const { Map3DElement, Model3DInteractiveElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 },
        range: 1500,
        tilt: 74,
        heading: 0,
        mode: 'HYBRID',
    });

    const model = new Model3DInteractiveElement({
        src: 'https://maps-docs-team.web.app/assets/windmill.glb',
        position: { lat: 39.1178, lng: -106.4452, altitude: 4495.4952 },
        orientation: { heading: 0, tilt: 270, roll: 90 },
        scale: 0.15,
        altitudeMode: 'CLAMP_TO_GROUND',
    });

    model.addEventListener('gmp-click', function () {
        this.scale = Math.random() * (0.5 - 0.1) + 0.1;
    });

    document.body.append(map);
    map.append(model);
}

void init();