Modele

Wybierz platformę: Android iOS JavaScript

Modele to zasoby 3D, które można dodać do sceny, aby przedstawiały obiekty. Mapy 3D w interfejsie Maps JavaScript API obsługują modele 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: rotacja układu współrzędnych modelu. Rotacje są stosowane w tej kolejności: obrót, pochylenie, a następnie 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 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',
        gestureHandling: 'COOPERATIVE',
    });

    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 przykładzie poniżej zmieniamy skalę modelu po kliknięciu.

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',
        gestureHandling: 'COOPERATIVE',
    });

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