Modele

Wybierz platformę: Android iOS JavaScript

Modele to zasoby 3D, które można dodać do sceny, aby reprezentowały obiekty. Mapy 3D w interfejsie Maps JavaScript API obsługują dodawanie modeli gLTF. Modele te można skalować i obracać, aby je dodatkowo dostosować.

Modele muszą obsługiwać podstawowe właściwości glTF PBR. Rozszerzenia ani właściwości rozszerzeń nie są obsługiwane.

Dodawanie modelu

Konstruktor Model3DElement przyjmuje zestaw Model3DElementOptions określający współrzędne LatLng modelu oraz zestaw 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. Obrót jest stosowany w tej kolejności: obrót wzdłużny, obrót poprzeczny i obrót wokół osi pionowej.
  • scale: skaluje model w jego układzie współrzędnych. Wartością domyślną jest 1.
  • altitudeMode: sposób interpretowania wysokości wyrażonej w position.
  • src: adres URL modelu.

Ten 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. Ten przykład zmienia 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();