模型

選取平台： Android iOS JavaScript

模型是可新增至場景的 3D 素材資源，代表物件。Maps JavaScript API 中的 3D 地圖支援納入 gLTF 模型。這些模型可以縮放及旋轉，進一步自訂。

模型必須支援 glTF PBR 的核心屬性。不支援擴充功能或擴充功能屬性。

新增模型

Model3DElement 建構函式會採用一組 Model3DElementOptions 來指定模型的 LatLng 座標，並採用一組參數來支援模型定位。

模型支援下列選項：

  • position：以 LatLng 座標表示的模型位置。
  • orientation：模型座標系統的旋轉角度。系統會依下列順序套用旋轉效果：側傾、傾斜，然後是航向。
  • scale：在模型的座標空間中縮放模型。預設值為 1。
  • altitudeMode：如何解讀以 position 表示的海拔高度。
  • src：模型的網址。

以下範例說明如何將模型新增至地圖，並使用部分可用的自訂選項修改模型：

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

新增互動式模型

模型也支援互動。以下範例會在點選模型時變更模型比例。

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