মডেল

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

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

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

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

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

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

• position : মডেলটির অবস্থান, যা LatLng স্থানাঙ্কে প্রকাশ করা হয়।
• orientation : মডেলের স্থানাঙ্ক ব্যবস্থার ঘূর্ণন। ঘূর্ণনগুলো নিম্নলিখিত ক্রমে প্রয়োগ করা হয়: রোল, টিল্ট এবং তারপর হেডিং।
• scale : মডেলটিকে তার স্থানাঙ্ক পরিসরে স্কেল করে। এর ডিফল্ট মান হলো 1 ।
• altitudeMode : position প্রকাশিত উচ্চতাকে কীভাবে ব্যাখ্যা করা হয়।
• src : মডেলটির ইউআরএল।

গুরুত্বপূর্ণ: সিন-এ মডেল রেন্ডার করার জন্য আপনাকে অবশ্যই position এবং src উভয় অপশন উল্লেখ করতে হবে।

দ্রষ্টব্য: আপনি যদি আপনার মূল অ্যাপ্লিকেশন থেকে ভিন্ন কোনো ওয়েবসাইট বা সার্ভারে আপনার মডেল ফাইলগুলো হোস্ট করেন, তাহলে আপনাকে অবশ্যই নিশ্চিত করতে হবে যে আপনার অ্যাপ্লিকেশনটি সঠিক CORS HTTP হেডার সেট করেছে।

নিম্নলিখিত উদাহরণটি মানচিত্রে মডেল যুক্ত করা এবং উপলব্ধ কাস্টমাইজেশন বিকল্পগুলি ব্যবহার করে সেগুলিকে পরিবর্তন করার পদ্ধতি প্রদর্শন করে:

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