モデル

プラットフォームを選択: Android iOS JavaScript

モデルは、オブジェクトを表すためにシーンに追加できる 3D アセットです。Maps JavaScript API の 3D 地図では、gLTF モデルの組み込みがサポートされています。これらのモデルは、スケーリングや回転が可能で、さらにカスタマイズできます。

このモデルは、glTF PBR の主要プロパティに対応させる必要があります。拡張機能や拡張プロパティは利用できません。

モデルの追加

Model3DElement コンストラクタは、モデルの LatLng 座標を指定する一連の Model3DElementOptions と、モデルの配置をサポートする一連のパラメータを受け取ります。

モデルは次のオプションをサポートしています。

  • position: LatLng 座標で表されるモデルのロケーション。
  • orientation: モデルの座標系の回転。回転は、ロール、チルト、見出しの順に適用されます。
  • scale: 座標空間でモデルをスケーリングします。デフォルト値は 1 です。
  • altitudeMode: position で表される高度の解釈方法。
  • src: モデルの URL。

次の例は、モデルを地図に追加し、利用可能なカスタマイズ オプションを使用して変更する方法を示しています。

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