Modele

Modele to zasoby 3D, które można dodawać do sceny, aby reprezentowały obiekty. Mapy 3D w interfejsie Maps JavaScript API obsługują modele gLTF. Te modele można skalować i obracać, aby jeszcze bardziej je dostosować.

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 współrzędne LatLng modelu oraz zbiór parametrów ułatwiają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 następującej kolejności: przechył, nachylenie, 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 jednostce 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',
    });

    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();
index.js

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();
index.js