Model

Pilih platform: Android iOS JavaScript

Model adalah aset 3D yang dapat ditambahkan ke adegan untuk merepresentasikan objek. Peta 3D Fotorealistik di Maps JavaScript API mendukung penyertaan model gLTF. Model ini dapat diskalakan dan diputar untuk memungkinkan penyesuaian lebih lanjut.

Model harus mendukung properti inti PBR glTF. Tidak ada ekstensi atau properti ekstensi yang didukung.

Menambahkan model

Konstruktor Model3DElement menggunakan sekumpulan Model3DElementOptions yang menentukan koordinat LatLng model dan sekumpulan parameter untuk mendukung penempatan model.

Model mendukung opsi berikut:

  • position: Lokasi model yang dinyatakan dalam koordinat LatLng.
  • orientation: Rotasi sistem koordinat model. Rotasi diterapkan dalam urutan berikut: putar, miringkan, lalu arah.
  • scale: Menskalakan model dalam ruang koordinatnya. Nilai defaultnya adalah 1.
  • altitudeMode: Cara menafsirkan ketinggian yang dinyatakan dalam position.
  • src: URL model.

Contoh berikut menunjukkan penambahan model ke peta dan pengubahannya menggunakan opsi penyesuaian yang tersedia:

async function init() {
  const { Map3DElement, MapMode, Model3DElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 37.7438, lng: -121.5088, altitude: 1800},
    heading: -90,
    tilt: 90,
    mode: MapMode.SATELLITE,
  });

  document.body.append(map);
  
  const models = [
    // A model with regular settings.
    {
      position: {lat: 37.76, lng: -121.63, altitude: 0},
      orientation: {tilt: 270},
    },
    // Scaled down model.
    {
      position: {lat: 37.75, lng: -121.63, altitude: 0},
      orientation: {tilt: 270},
      scale: 0.8,
    },
    // Scaled up model.
    {
      position: {lat: 37.735, lng: -121.63, altitude: 0},
      orientation: {tilt: 270},
      scale: 1.2,
    },
    // A model with an additional transformation applied.
    {
      position: {lat: 37.72, lng: -121.63, altitude: 0},
      orientation: {tilt: 270, roll: 90},
    },
    // Non-clamped to the ground model.
    {
      position: {lat: 37.71, lng: -121.63, altitude: 1000},
      altitudeMode: 'RELATIVE_TO_GROUND',
      orientation: {tilt: 270},
    },
  ];

  for (const {position, altitudeMode, orientation, scale} of models) {
    const model = new Model3DElement({
      src: 'https://storage.googleapis.com/maps-web-api.appspot.com/gltf/windmill.glb',
      position,
      altitudeMode,
      orientation,
      scale,
    });

    map.append(model);
  }
}

init();

Menambahkan model interaktif

Model juga mendukung interaksi. Contoh berikut mengubah skala model saat diklik.

async function init() {
  const { Map3DElement, MapMode, Model3DInteractiveElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 37.7438, lng: -121.5088, altitude: 1800},
    heading: -90,
    tilt: 90,
    mode: MapMode.SATELLITE,
  });

  document.body.append(map);

  const model = new Model3DInteractiveElement({
    src: 'https://storage.googleapis.com/maps-web-api.appspot.com/gltf/windmill.glb',
    position: {lat: 37.76, lng: -121.63, altitude: 0},
    scale: 1.0,
  });

  model.addEventListener('gmp-click', (event) => {
    model.scale = (Math.random() * (1 - 2)).toFixed(2);

  });

  map.append(model);
}

init();