মডেল

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

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

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

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

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

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

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

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

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