মডেল

মডেলগুলি হল 3D সম্পদ যা বস্তুর প্রতিনিধিত্ব করতে দৃশ্যে যোগ করা যেতে পারে। ম্যাপ জাভাস্ক্রিপ্ট এপিআই-এ ফটোরিয়ালিস্টিক 3D মানচিত্র gLTF মডেলের অন্তর্ভুক্তি সমর্থন করে। এই মডেলগুলি আরও কাস্টমাইজেশনের জন্য স্কেল এবং ঘোরানো যেতে পারে।

মডেলগুলি অবশ্যই glTF PBR এর মূল বৈশিষ্ট্যগুলিকে সমর্থন করবে৷ কোন এক্সটেনশন বা এক্সটেনশন বৈশিষ্ট্য সমর্থিত.

একটি মডেল যোগ করুন

Model3DElement কন্সট্রাক্টর মডেলের LatLng স্থানাঙ্ক এবং মডেলের অবস্থান সমর্থন করার জন্য প্যারামিটারের একটি সেট নির্দিষ্ট করে Model3DElementOptions এর একটি সেট নেয়।

মডেলগুলি নিম্নলিখিত বিকল্পগুলিকে সমর্থন করে:

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