Modele

Wybierz platformę: Android iOS JavaScript

Modele to zasoby 3D, które można dodać do sceny, aby przedstawiały obiekty. Interfejs 3D Maps w Maps JavaScript API obsługuje dodawanie modeli gLTF. Te modele można skalować i obracać, aby umożliwić dalsze dostosowywanie.

Modele muszą obsługiwać podstawowe właściwości glTF PBR. Nie są obsługiwane żadne rozszerzenia ani właściwości rozszerzeń.

Dodawanie modelu

Konstruktor Model3DElement przyjmuje zbiór Model3DElementOptions określający LatLng współrzędne modelu oraz zbiór parametrów umożliwiających pozycjonowanie modelu.

Modele obsługują te opcje:

  • position: lokalizacja modelu wyrażona we współrzędnych LatLng.
  • orientation: obrót układu współrzędnych modelu. Rotacje są stosowane w tej kolejności: obrót, pochylenie, a potem kierunek.
  • scale: skaluje model w jego przestrzeni współrzędnych. (wartością domyślną jest 1);
  • altitudeMode: sposób interpretacji wysokości wyrażonej w jednostkach position.
  • src: adres URL modelu.

Poniższy przykład pokazuje, jak dodać model do mapy i zmodyfikować go za pomocą niektórych dostępnych opcji dostosowywania:

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

Dodawanie modelu interaktywnego

Modele obsługują też interakcje. W poniższym przykładzie po kliknięciu zmienia się skala modelu.

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