مدل ها

مدل ها دارایی های سه بعدی هستند که می توانند برای نمایش اشیا به صحنه اضافه شوند. Maps 3D Photorealistic در Maps JavaScript API از گنجاندن مدل‌های gLTF پشتیبانی می‌کند. این مدل ها را می توان مقیاس و چرخش کرد تا امکان سفارشی سازی بیشتر فراهم شود.

مدل ها باید از ویژگی های اصلی glTF PBR پشتیبانی کنند. هیچ برنامه افزودنی یا ویژگی برنامه افزودنی پشتیبانی نمی شود.

یک مدل اضافه کنید

سازنده Model3DElement مجموعه‌ای از Model3DElementOptions را می‌گیرد که مختصات LatLng مدل و مجموعه‌ای از پارامترها را برای پشتیبانی از موقعیت‌یابی مدل مشخص می‌کند.

مدل ها از گزینه های زیر پشتیبانی می کنند:

  • position : مکان مدل با مختصات LatLng بیان شده است.
  • orientation : چرخش سیستم مختصات مدل. چرخش ها به ترتیب زیر اعمال می شوند: رول، شیب و سپس سرفصل.
  • scale : مدل را در فضای مختصات آن مقیاس می کند. مقدار پیش فرض 1 است.
  • altitudeMode : ارتفاع بیان شده در position چگونه تفسیر می شود.
  • src : URL مدل.

مثال زیر اضافه کردن مدل ها به نقشه و اصلاح آنها با استفاده از گزینه های سفارشی سازی موجود را نشان می دهد:

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

یک مدل تعاملی اضافه کنید

مدل ها از تعامل نیز پشتیبانی می کنند. مثال زیر با کلیک کردن، مقیاس مدل را تغییر می دهد.

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