模型

请选择平台： Android iOS JavaScript

模型是可添加到场景中以表示对象的 3D 资源。Maps JavaScript API 中的 3D 地图支持包含 gLTF 模型。这些模型可以缩放和旋转，以便进行进一步自定义。

模型必须支持 glTF PBR 的核心属性。不支持任何扩展程序或扩展程序属性。

添加模型

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