মডেল হল 3D অ্যাসেট যা অবজেক্ট দেখানোর জন্য দৃশ্যে যোগ করা যেতে পারে। Maps JavaScript API-তে 3D Maps, gLTF মডেল অন্তর্ভুক্ত করার সুবিধা প্রদান করে। আরও কাস্টমাইজ করার জন্য এইসব মডেলকে স্কেল ও রোটেট করা যেতে পারে।
মডেলগুলিতে অবশ্যই glTF PBR-এর মূল প্রপার্টি কাজ করতে হবে। কোনও এক্সটেনশন বা এক্সটেনশন প্রপার্টি কাজ করে না।
মডেল যোগ করুন
Model3DElement
কনস্ট্রাক্টর Model3DElementOptions-এর একটি সেট নেয় যা মডেলের LatLng
স্থানাঙ্ক এবং মডেলের পজিশনিংয়ে সাহায্য করার জন্য প্যারামিটারের একটি সেট নির্দিষ্ট করে।
মডেলগুলি নিম্নলিখিত বিকল্পে কাজ করে:
position:LatLngকোঅর্ডিনেটে মডেলের লোকেশন দেখানো হয়েছে।orientation: মডেলের কোঅর্ডিনেট সিস্টেমের রোটেশন। ঘোরানোর প্রক্রিয়া নিম্নলিখিত ক্রমে প্রয়োগ করা হয়: রোল, টিল্ট এবং তারপর হেডিং।scale: মডেলের কোঅর্ডিনেট স্পেসে স্কেল করে। ডিফল্ট মান হল1।altitudeMode:position-এ উল্লিখিত উচ্চতা কীভাবে ব্যাখ্যা করা হয়।src: মডেলের URL।
নিম্নলিখিত উদাহরণে ম্যাপে একটি মডেল যোগ করা এবং উপলভ্য কিছু কাস্টমাইজেশন বিকল্প ব্যবহার করে সেটি পরিবর্তন করার পদ্ধতি দেখানো হয়েছে:
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', }); 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', }); 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();