মডেল হল 3D অ্যাসেট যা অবজেক্ট দেখানোর জন্য দৃশ্যে যোগ করা যেতে পারে। Maps JavaScript API-তে 3D Maps, gLTF মডেল অন্তর্ভুক্ত করার সুবিধা প্রদান করে। আরও কাস্টমাইজ করার জন্য এইসব মডেল স্কেল ও রোটেট করা যেতে পারে।
মডেলগুলিতে অবশ্যই glTF PBR-এর মূল প্রপার্টি কাজ করতে হবে। কোনও এক্সটেনশন বা এক্সটেনশন প্রপার্টি কাজ করে না।
মডেল যোগ করুন
Model3DElement
কনস্ট্রাক্টর, মডেলের LatLng
স্থানাঙ্ক নির্দিষ্ট করে Model3DElementOptions-এর একটি সেট এবং মডেলের পজিশনিংয়ে সাহায্য করার জন্য প্যারামিটারের একটি সেট নেয়।
মডেলগুলি নিম্নলিখিত বিকল্পগুলি সমর্থন করে:
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();