WebGL ওভারলে ভিউ দিয়ে 3D মানচিত্রের অভিজ্ঞতা তৈরি করুন

1. আপনি শুরু করার আগে

এই কোডল্যাব আপনাকে শেখায় কিভাবে মানচিত্র জাভাস্ক্রিপ্ট API-এর WebGL-চালিত বৈশিষ্ট্যগুলিকে তিন মাত্রায় ভেক্টর মানচিত্রে নিয়ন্ত্রণ ও রেন্ডার করতে ব্যবহার করতে হয়।

পূর্বশর্ত

এই কোডল্যাব ধরে নেয় আপনার জাভাস্ক্রিপ্ট এবং ম্যাপ জাভাস্ক্রিপ্ট API এর মধ্যবর্তী জ্ঞান আছে। মানচিত্র JS API ব্যবহার করার মূল বিষয়গুলি শিখতে, আপনার ওয়েবসাইটে (JavaScript) কোডল্যাবে একটি মানচিত্র যুক্ত করার চেষ্টা করুন ।

আপনি কি শিখবেন

• জাভাস্ক্রিপ্ট সক্ষম করার জন্য ভেক্টর মানচিত্রের সাথে একটি মানচিত্র আইডি তৈরি করা হচ্ছে।
• প্রোগ্রামেটিক কাত এবং ঘূর্ণন সহ মানচিত্র নিয়ন্ত্রণ করা।
• WebGLOverlayView এবং Three.js এর মাধ্যমে মানচিত্রে 3D অবজেক্ট রেন্ডার করা হচ্ছে।
• moveCamera সাথে ক্যামেরার গতিবিধি অ্যানিমেটিং।

আপনি কি প্রয়োজন হবে

• বিলিং সক্ষম সহ একটি Google ক্লাউড প্ল্যাটফর্ম অ্যাকাউন্ট৷
• Maps JavaScript API সক্ষম সহ একটি Google মানচিত্র প্ল্যাটফর্ম API কী
• জাভাস্ক্রিপ্ট, এইচটিএমএল এবং সিএসএস এর মধ্যবর্তী জ্ঞান
• আপনার পছন্দের একটি পাঠ্য সম্পাদক বা IDE
• Node.js

2. সেট আপ করুন

নীচের সক্রিয়করণ পদক্ষেপের জন্য, আপনাকে মানচিত্র জাভাস্ক্রিপ্ট API সক্ষম করতে হবে।

Google Maps প্ল্যাটফর্ম সেট আপ করুন

আপনার যদি ইতিমধ্যেই একটি Google ক্লাউড প্ল্যাটফর্ম অ্যাকাউন্ট না থাকে এবং বিলিং সক্ষম করা একটি প্রকল্প থাকে, তাহলে অনুগ্রহ করে একটি বিলিং অ্যাকাউন্ট এবং একটি প্রকল্প তৈরি করতে Google মানচিত্র প্ল্যাটফর্মের সাথে শুরু করা নির্দেশিকাটি দেখুন৷

1. ক্লাউড কনসোলে , প্রকল্পের ড্রপ-ডাউন মেনুতে ক্লিক করুন এবং এই কোডল্যাবের জন্য আপনি যে প্রকল্পটি ব্যবহার করতে চান সেটি নির্বাচন করুন।

2. Google ক্লাউড মার্কেটপ্লেসে এই কোডল্যাবের জন্য প্রয়োজনীয় Google মানচিত্র প্ল্যাটফর্ম API এবং SDK সক্ষম করুন৷ এটি করতে, এই ভিডিও বা এই ডকুমেন্টেশনের ধাপগুলি অনুসরণ করুন৷
3. ক্লাউড কনসোলের শংসাপত্র পৃষ্ঠায় একটি API কী তৈরি করুন। আপনি এই ভিডিও বা এই ডকুমেন্টেশনের ধাপগুলি অনুসরণ করতে পারেন। Google মানচিত্র প্ল্যাটফর্মের সমস্ত অনুরোধের জন্য একটি API কী প্রয়োজন৷

Node.js সেটআপ

যদি আপনার কাছে এটি ইতিমধ্যে না থাকে, তাহলে আপনার কম্পিউটারে Node.js রানটাইম ডাউনলোড এবং ইনস্টল করতে https://nodejs.org/ এ যান৷

Node.js npm প্যাকেজ ম্যানেজার সহ আসে, যা আপনাকে এই কোডল্যাবের জন্য নির্ভরতা ইনস্টল করতে হবে।

প্রজেক্ট স্টার্টার টেমপ্লেট ডাউনলোড করুন

আপনি এই কোডল্যাবটি শুরু করার আগে, স্টার্টার প্রজেক্ট টেমপ্লেট, সেইসাথে সম্পূর্ণ সমাধান কোড ডাউনলোড করতে নিম্নলিখিতগুলি করুন:

1. https://github.com/googlecodelabs/maps-platform-101-webgl/ থেকে এই কোডল্যাবের জন্য গিটহাব রেপো ডাউনলোড বা ফর্ক করুন। স্টার্টার প্রকল্পটি /starter ডিরেক্টরিতে অবস্থিত এবং কোডল্যাবটি সম্পূর্ণ করার জন্য আপনার প্রয়োজনীয় মৌলিক ফাইল কাঠামো অন্তর্ভুক্ত করে। আপনার যা কিছুর সাথে কাজ করতে হবে তা /starter/src ডিরেক্টরিতে অবস্থিত।
2. একবার আপনি স্টার্টার প্রজেক্ট ডাউনলোড করলে, /starter ডিরেক্টরিতে npm install চালান। এটি package.json এ তালিকাভুক্ত সমস্ত প্রয়োজনীয় নির্ভরতা ইনস্টল করে।
3. আপনার নির্ভরতা ইনস্টল হয়ে গেলে, ডিরেক্টরিতে npm start চালান।

ওয়েবপ্যাক-ডেভ-সার্ভার ব্যবহার করার জন্য আপনার জন্য স্টার্টার প্রজেক্ট সেট আপ করা হয়েছে, যা স্থানীয়ভাবে আপনার লেখা কোড কম্পাইল ও রান করে। webpack-dev-server এছাড়াও আপনি কোড পরিবর্তন করার সময় ব্রাউজারে স্বয়ংক্রিয়ভাবে আপনার অ্যাপ পুনরায় লোড করে।

আপনি যদি সম্পূর্ণ সমাধান কোড চলমান দেখতে চান, আপনি /solution ডিরেক্টরিতে উপরের সেটআপ পদক্ষেপগুলি সম্পূর্ণ করতে পারেন।

আপনার API কী যোগ করুন

স্টার্টার অ্যাপটিতে JS API লোডার দিয়ে মানচিত্র লোড করার জন্য প্রয়োজনীয় সমস্ত কোড অন্তর্ভুক্ত রয়েছে, যাতে আপনাকে যা করতে হবে তা হল আপনার API কী এবং মানচিত্র ID প্রদান করা। JS API লোডার হল একটি সাধারণ লাইব্রেরি যা একটি script ট্যাগ সহ HTML টেমপ্লেটে মানচিত্র JS API ইনলাইনে লোড করার ঐতিহ্যগত পদ্ধতিকে বিমূর্ত করে, যা আপনাকে JavaScript কোডে সবকিছু পরিচালনা করতে দেয়।

আপনার API কী যোগ করতে, স্টার্টার প্রকল্পে নিম্নলিখিতগুলি করুন:

1. app.js খুলুন।
2. apiOptions অবজেক্টে, apiOptions.apiKey এর মান হিসাবে আপনার API কী সেট করুন।

3. একটি মানচিত্র আইডি তৈরি এবং ব্যবহার করুন

Maps JavaScript API-এর WebGL-ভিত্তিক বৈশিষ্ট্যগুলি ব্যবহার করতে, আপনার ভেক্টর মানচিত্র সক্ষম সহ একটি মানচিত্র ID প্রয়োজন৷

একটি মানচিত্র আইডি তৈরি করা হচ্ছে

1. Google ক্লাউড কনসোলে, 'Google Maps Platform' > 'Map Management'-এ যান।
2. 'নতুন মানচিত্র আইডি তৈরি করুন' ক্লিক করুন।
3. 'মানচিত্র নাম' ক্ষেত্রে, আপনার মানচিত্র আইডির জন্য একটি নাম ইনপুট করুন।
4. 'ম্যাপ টাইপ' ড্রপডাউনে, 'জাভাস্ক্রিপ্ট' নির্বাচন করুন। 'জাভাস্ক্রিপ্ট বিকল্প' প্রদর্শিত হবে।
5. 'জাভাস্ক্রিপ্ট বিকল্প'-এর অধীনে, 'ভেক্টর' রেডিও বোতাম, 'টিল্ট' চেকবক্স এবং 'ঘূর্ণন' চেকবক্স নির্বাচন করুন।
6. ঐচ্ছিক 'বিবরণ' ক্ষেত্রে, আপনার API কী-এর জন্য একটি বিবরণ লিখুন।
7. 'পরবর্তী' বোতামে ক্লিক করুন। 'ম্যাপ আইডি বিশদ' পৃষ্ঠাটি প্রদর্শিত হবে।
   
   
8. ম্যাপ আইডি কপি করুন। আপনি মানচিত্র লোড করার পরবর্তী ধাপে এটি ব্যবহার করবেন।

একটি মানচিত্র আইডি ব্যবহার করে

ভেক্টর মানচিত্র লোড করার জন্য, আপনি মানচিত্রটি ইনস্ট্যান্টিয়েট করার সময় বিকল্পগুলির মধ্যে একটি সম্পত্তি হিসাবে একটি মানচিত্র ID প্রদান করতে হবে৷ ঐচ্ছিকভাবে, আপনি মানচিত্র জাভাস্ক্রিপ্ট API লোড করার সময় একই মানচিত্র ID প্রদান করতে পারেন।

আপনার মানচিত্র আইডি দিয়ে মানচিত্র লোড করতে, নিম্নলিখিতগুলি করুন:

1. mapOptions.mapId এর মান হিসাবে আপনার মানচিত্র আইডি সেট করুন।
   
   আপনি যখন মানচিত্রটি ইনস্ট্যান্টিয়েট করেন তখন ম্যাপ আইডি প্রদান করা Google মানচিত্র প্ল্যাটফর্মকে বলে যে আপনার কোন মানচিত্রটি একটি নির্দিষ্ট উদাহরণের জন্য লোড করতে হবে৷ আপনি একাধিক অ্যাপ বা একই অ্যাপের মধ্যে একাধিক ভিউ জুড়ে একই ম্যাপ আইডি পুনরায় ব্যবহার করতে পারেন।

   const mapOptions = {
     "tilt": 0,
     "heading": 0,
     "zoom": 18,
     "center": { lat: 35.6594945, lng: 139.6999859 },
     "mapId": "YOUR_MAP_ID"
   };
   

আপনার ব্রাউজারে চলমান অ্যাপটি পরীক্ষা করুন। কাত এবং ঘূর্ণন সক্ষম ভেক্টর মানচিত্র সফলভাবে লোড হওয়া উচিত। কাত এবং ঘূর্ণন সক্ষম কিনা তা পরীক্ষা করতে, শিফট কীটি ধরে রাখুন এবং হয় আপনার মাউস দিয়ে টেনে আনুন বা আপনার কীবোর্ডে তীর কীগুলি ব্যবহার করুন৷

মানচিত্র লোড না হলে, আপনি apiOptions এ একটি বৈধ API কী প্রদান করেছেন কিনা তা পরীক্ষা করুন। যদি মানচিত্রটি কাত এবং ঘোরানো না হয়, তাহলে আপনি apiOptions এবং mapOptions এ টিল্ট এবং ঘূর্ণন সক্ষম সহ একটি মানচিত্র ID প্রদান করেছেন কিনা তা পরীক্ষা করুন।

আপনার app.js ফাইলটি এখন এইরকম হওয়া উচিত:

    import { Loader } from '@googlemaps/js-api-loader';

    const apiOptions = {
      "apiKey": 'YOUR_API_KEY',
    };

    const mapOptions = {
      "tilt": 0,
      "heading": 0,
      "zoom": 18,
      "center": { lat: 35.6594945, lng: 139.6999859 },
      "mapId": "YOUR_MAP_ID"
    }

    async function initMap() {
      const mapDiv = document.getElementById("map");
      const apiLoader = new Loader(apiOptions);
      await apiLoader.load();
      return new google.maps.Map(mapDiv, mapOptions);
    }

    function initWebGLOverlayView (map) {
      let scene, renderer, camera, loader;
      // WebGLOverlayView code goes here
    }

    (async () => {
      const map = await initMap();
    })();

4. WebGLOverlayView বাস্তবায়ন করুন

WebGLOverlayView আপনাকে ভেক্টর বেসম্যাপ রেন্ডার করতে ব্যবহৃত একই WebGL রেন্ডারিং প্রসঙ্গে সরাসরি অ্যাক্সেস দেয়। এর মানে হল আপনি WebGL ব্যবহার করে 2D এবং 3D অবজেক্ট সরাসরি ম্যাপে রেন্ডার করতে পারেন, সেইসাথে জনপ্রিয় WebGL-ভিত্তিক গ্রাফিক্স লাইব্রেরিগুলি।

WebGLOverlayView আপনি ব্যবহার করতে পারেন এমন মানচিত্রের WebGL রেন্ডারিং প্রসঙ্গটির জীবনচক্রে পাঁচটি হুক প্রকাশ করে৷ এখানে প্রতিটি হুকের একটি দ্রুত বিবরণ এবং আপনার এটির জন্য কী করা উচিত:

• onAdd() : একটি WebGLOverlayView দৃষ্টান্তে setMap কল করে একটি মানচিত্রে ওভারলে যোগ করা হলে কল করা হয়। এখানেই আপনাকে WebGL সম্পর্কিত যেকোন কাজ করতে হবে যার জন্য WebGL প্রসঙ্গে সরাসরি অ্যাক্সেসের প্রয়োজন নেই।
• onContextRestored() : যখন WebGL প্রসঙ্গ উপলব্ধ হয় কিন্তু কিছু রেন্ডার করার আগে কল করা হয়। এখানেই আপনাকে অবজেক্ট শুরু করতে হবে, স্টেট বাঁধতে হবে এবং WebGL প্রসঙ্গে অ্যাক্সেসের প্রয়োজন আছে এমন অন্য কিছু করতে হবে কিন্তু onDraw() কলের বাইরেও করা যেতে পারে। এটি আপনাকে মানচিত্রের প্রকৃত রেন্ডারিংয়ে অতিরিক্ত ওভারহেড যোগ না করে আপনার প্রয়োজনীয় সবকিছু সেট আপ করতে দেয়, যা ইতিমধ্যেই GPU- নিবিড়।
• onDraw() : ওয়েবজিএল ম্যাপ এবং আপনার অনুরোধ করা অন্য কিছু রেন্ডার করা শুরু করলে প্রতি ফ্রেমে একবার কল করা হয়। মানচিত্রের রেন্ডারিংয়ে পারফরম্যান্সের সমস্যা এড়াতে আপনার onDraw() এ যতটা সম্ভব কম কাজ করা উচিত।
• onContextLost() : WebGL রেন্ডারিং প্রসঙ্গ কোনো কারণে হারিয়ে গেলে বলা হয়।
• onRemove() : একটি WebGLOverlayView দৃষ্টান্তে setMap(null) কল করে মানচিত্র থেকে ওভারলে সরানো হলে কল করা হয়।

এই ধাপে, আপনি WebGLOverlayView এর একটি উদাহরণ তৈরি করবেন এবং এর তিনটি লাইফসাইকেল হুক প্রয়োগ করবেন: onAdd , onContextRestored , এবং onDraw । জিনিসগুলি পরিষ্কার রাখতে এবং অনুসরণ করা সহজ করার জন্য, ওভারলেটির সমস্ত কোড এই কোডল্যাবের জন্য স্টার্টার টেমপ্লেটে দেওয়া initWebGLOverlayView() ফাংশনে পরিচালনা করা হবে।

1. একটি WebGLOverlayView() উদাহরণ তৈরি করুন।
   
   ওভারলে google.maps.WebGLOverlayView এ Maps JS API দ্বারা সরবরাহ করা হয়েছে। শুরু করতে, initWebGLOverlayView() :

   const webGLOverlayView = new google.maps.WebGLOverlayView();
   

   তে নিম্নলিখিতগুলি যুক্ত করে একটি উদাহরণ তৈরি করুন
2. লাইফ সাইকেল হুক প্রয়োগ করুন।
   
   লাইফসাইকেল হুকগুলি বাস্তবায়ন করতে, initWebGLOverlayView() :

   webGLOverlayView.onAdd = () => {};
   webGLOverlayView.onContextRestored = ({gl}) => {};
   webGLOverlayView.onDraw = ({gl, coordinateTransformer}) => {};
   

   তে নিম্নলিখিতগুলি যুক্ত করুন
3. মানচিত্রে ওভারলে উদাহরণ যোগ করুন।
   
   এখন ওভারলে ইনস্ট্যান্সে setMap() কল করুন এবং initWebGLOverlayView initWebGLOverlayView() ) এ নিম্নলিখিতটি যুক্ত করে মানচিত্রে পাস করুন :

   webGLOverlayView.setMap(map)
   

4. initWebGLOverlayView কল করুন।
   
   শেষ ধাপ হল app.js এর নীচে অবিলম্বে আমন্ত্রিত ফাংশনে নিম্নলিখিতগুলি যোগ করে app.js initWebGLOverlayView() কার্যকর করা :

   initWebGLOverlayView(map);
   

আপনার initWebGLOverlayView এবং অবিলম্বে আহ্বান করা ফাংশন এখন এইরকম হওয়া উচিত:

    async function initWebGLOverlayView (map) {
      let scene, renderer, camera, loader;
      const webGLOverlayView = new google.maps.WebGLOverlayView();

      webGLOverlayView.onAdd = () => {}
      webGLOverlayView.onContextRestored = ({gl}) => {}
      webGLOverlayView.onDraw = ({gl, coordinateTransformer}) => {}
      webGLOverlayView.setMap(map);
    }

    (async () => {
      const map = await initMap();
      initWebGLOverlayView(map);
    })();

WebGLOverlayView বাস্তবায়নের জন্য আপনার যা দরকার। এরপর, আপনি Three.js ব্যবহার করে মানচিত্রে একটি 3D অবজেক্ট রেন্ডার করার জন্য প্রয়োজনীয় সবকিছু সেট আপ করবেন।

5. একটি three.js দৃশ্য সেট আপ করুন

WebGL ব্যবহার করা খুব জটিল হতে পারে কারণ এর জন্য আপনাকে প্রতিটি বস্তুর সমস্ত দিক ম্যানুয়ালি সংজ্ঞায়িত করতে হবে এবং তারপর কিছু। জিনিসগুলিকে আরও সহজ করার জন্য, এই কোডল্যাবের জন্য আপনি Three.js ব্যবহার করবেন, একটি জনপ্রিয় গ্রাফিক্স লাইব্রেরি যা WebGL-এর উপরে একটি সরলীকৃত বিমূর্তকরণ স্তর প্রদান করে। Three.js বিভিন্ন ধরনের সুবিধার ফাংশন নিয়ে আসে যা একটি WebGL রেন্ডারার তৈরি করা থেকে শুরু করে সাধারণ 2D এবং 3D অবজেক্টের আকার আঁকা থেকে ক্যামেরা নিয়ন্ত্রণ, বস্তুর রূপান্তর এবং আরও অনেক কিছু করে।

Three.js-এ তিনটি মৌলিক অবজেক্টের ধরন রয়েছে যা যেকোনো কিছু প্রদর্শনের জন্য প্রয়োজন:

• দৃশ্য: একটি "ধারক" যেখানে সমস্ত বস্তু, আলোর উত্স, টেক্সচার ইত্যাদি রেন্ডার এবং প্রদর্শিত হয়।
• ক্যামেরা: একটি ক্যামেরা যা দৃশ্যের দৃষ্টিভঙ্গি উপস্থাপন করে। একাধিক ক্যামেরার ধরন পাওয়া যায় এবং একটি দৃশ্যে এক বা একাধিক ক্যামেরা যোগ করা যেতে পারে।
• রেন্ডারার: ​​একটি রেন্ডারার যা দৃশ্যের সমস্ত বস্তুর প্রক্রিয়াকরণ এবং প্রদর্শন পরিচালনা করে। Three.js-এ, WebGLRenderer সবচেয়ে বেশি ব্যবহার করা হয়, কিন্তু ক্লায়েন্ট WebGL সমর্থন না করার ক্ষেত্রে আরও কয়েকটি ফলব্যাক হিসাবে উপলব্ধ।

এই ধাপে, আপনি Three.js-এর জন্য প্রয়োজনীয় সমস্ত নির্ভরতা লোড করবেন এবং একটি মৌলিক দৃশ্য সেট আপ করবেন।

1. লোড three.js
   
   এই কোডল্যাবের জন্য আপনার দুটি নির্ভরতার প্রয়োজন হবে: Three.js লাইব্রেরি এবং GLTF লোডার, একটি ক্লাস যা আপনাকে GL Trasmission Format (gLTF) এ 3D বস্তু লোড করতে দেয়। Three.js বিভিন্ন 3D অবজেক্ট ফরম্যাটের জন্য বিশেষায়িত লোডার অফার করে কিন্তু gLTF ব্যবহার করার পরামর্শ দেওয়া হয়।
   
   নীচের কোডে, সম্পূর্ণ Three.js লাইব্রেরি আমদানি করা হয়েছে। একটি প্রোডাকশন অ্যাপে আপনি সম্ভবত আপনার প্রয়োজনীয় ক্লাসগুলি আমদানি করতে চান তবে এই কোডল্যাবের জন্য, জিনিসগুলি সহজ রাখতে সমগ্র লাইব্রেরি আমদানি করুন। এছাড়াও লক্ষ্য করুন যে GLTF লোডার ডিফল্ট লাইব্রেরিতে অন্তর্ভুক্ত নয়, এবং নির্ভরতার মধ্যে একটি পৃথক পথ থেকে আমদানি করতে হবে - এটি সেই পথ যেখানে আপনি Three.js দ্বারা প্রদত্ত সমস্ত লোডার অ্যাক্সেস করতে পারেন৷
   
   Three.js এবং GLTF লোডার আমদানি করতে, app.js এর শীর্ষে নিম্নলিখিত যোগ করুন :

   import * as THREE from 'three';
   import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';
   

2. একটি three.js দৃশ্য তৈরি করুন।
   
   একটি দৃশ্য তৈরি করতে, onAdd হুকের সাথে নিম্নলিখিতটি যুক্ত করে Three.js Scene ক্লাসটি চালু করুন:

   scene = new THREE.Scene();
   

3. দৃশ্যে একটি ক্যামেরা যোগ করুন।
   
   পূর্বে উল্লিখিত হিসাবে, ক্যামেরা দৃশ্যের দেখার দৃষ্টিভঙ্গি উপস্থাপন করে এবং কিভাবে Three.js একটি দৃশ্যের মধ্যে বস্তুর ভিজ্যুয়াল রেন্ডারিং পরিচালনা করে তা নির্ধারণ করে। একটি ক্যামেরা ছাড়া, দৃশ্যটি কার্যকরভাবে "দেখা যায় না", যার অর্থ বস্তুগুলি প্রদর্শিত হবে না কারণ সেগুলি রেন্ডার করা হবে না৷
   
   Three.js বিভিন্ন ধরনের ক্যামেরা অফার করে যা রেন্ডারার দৃষ্টিভঙ্গি এবং গভীরতার মতো জিনিসগুলির সাথে কীভাবে আচরণ করে তা প্রভাবিত করে। এই দৃশ্যে, আপনি PerspectiveCamera ব্যবহার করবেন, Three.js-এ সবচেয়ে বেশি ব্যবহৃত ক্যামেরার ধরন, যা মানুষের চোখ যেভাবে দৃশ্যটি উপলব্ধি করবে তা অনুকরণ করার জন্য ডিজাইন করা হয়েছে। এর অর্থ ক্যামেরা থেকে দূরে থাকা বস্তুগুলি কাছের বস্তুর চেয়ে ছোট দেখাবে, দৃশ্যটির একটি অদৃশ্য বিন্দু থাকবে এবং আরও অনেক কিছু।
   
   দৃশ্যে একটি দৃষ্টিকোণ ক্যামেরা যোগ করতে, onAdd নিম্নলিখিতটি যুক্ত করুন:

   camera = new THREE.PerspectiveCamera();
   

   PerspectiveCamera এর সাহায্যে, আপনি কাছের এবং দূরবর্তী সমতল, আকৃতির অনুপাত এবং ক্ষেত্র সহ দৃষ্টিকোণ তৈরি করে এমন বৈশিষ্ট্যগুলিও কনফিগার করতে পারবেন vision (fov). সম্মিলিতভাবে, এই বৈশিষ্ট্যগুলি তৈরি করে যা ভিউইং ফ্রাস্টাম নামে পরিচিত, 3D তে কাজ করার সময় বোঝার জন্য একটি গুরুত্বপূর্ণ ধারণা, কিন্তু এই কোডল্যাবের সুযোগের বাইরে। ডিফল্ট PerspectiveCamera কনফিগারেশন ঠিক ঠিক যথেষ্ট হবে।
4. দৃশ্যে আলোর উৎস যোগ করুন।
   
   ডিফল্টরূপে, একটি Three.js দৃশ্যে রেন্ডার করা অবজেক্ট কালো দেখাবে, সেগুলিতে প্রয়োগ করা টেক্সচার নির্বিশেষে। এর কারণ হল একটি Three.js দৃশ্য অনুকরণ করে যে বাস্তব জগতে বস্তুগুলি কীভাবে কাজ করে, যেখানে রঙের দৃশ্যমানতা একটি বস্তুর প্রতিফলিত আলোর উপর নির্ভর করে। সংক্ষেপে, আলো নেই, রঙ নেই।
   
   Three.js বিভিন্ন ধরণের আলো সরবরাহ করে যার মধ্যে আপনি দুটি ব্যবহার করবেন:
   
   
5. AmbientLight : একটি বিচ্ছুরিত আলোর উত্স সরবরাহ করে যা সমস্ত কোণ থেকে স্কেহে সমস্ত বস্তুকে সমানভাবে আলোকিত করে। সমস্ত বস্তুর টেক্সচারগুলি দৃশ্যমান হয় তা নিশ্চিত করতে এটি দৃশ্যটিকে একটি বেসলাইন পরিমাণ আলো দেবে।
6. DirectionalLight আলো: দৃশ্যের একটি দিক থেকে উদ্ভূত আলো প্রদান করে। বাস্তব জগতে একটি অবস্থানগত আলো কীভাবে কাজ করবে তার বিপরীতে, DirectionalLight আলো থেকে নির্গত আলোক রশ্মিগুলি সবই সমান্তরাল এবং আলোর উত্স থেকে দূরে যাওয়ার সাথে সাথে ছড়িয়ে পড়ে না এবং ছড়িয়ে পড়ে না।
   
   আপনি সামগ্রিক আলো প্রভাব তৈরি করতে প্রতিটি আলোর রঙ এবং তীব্রতা কনফিগার করতে পারেন। উদাহরণস্বরূপ, নীচের কোডে, পরিবেষ্টিত আলো সমগ্র দৃশ্যের জন্য একটি নরম সাদা আলো প্রদান করে, যখন দিকনির্দেশক আলো একটি গৌণ আলো প্রদান করে যা বস্তুকে নিম্নমুখী কোণে আঘাত করে। দিকনির্দেশক আলোর ক্ষেত্রে, কোণটি position.set(x, y ,z) ব্যবহার করে সেট করা হয়, যেখানে প্রতিটি মান সংশ্লিষ্ট অক্ষের সাথে আপেক্ষিক। সুতরাং, উদাহরণস্বরূপ, position.set(0,1,0) আলোকে সরাসরি দৃশ্যের উপরে y-অক্ষের উপর সরাসরি নিচের দিকে নির্দেশ করবে।
   
   দৃশ্যে আলোর উত্স যোগ করতে, onAdd নিম্নলিখিতটি যুক্ত করুন:

   const ambientLight = new THREE.AmbientLight( 0xffffff, 0.75 );
   scene.add(ambientLight);
   const directionalLight = new THREE.DirectionalLight(0xffffff, 0.25);
   directionalLight.position.set(0.5, -1, 0.5);
   scene.add(directionalLight);
   

আপনার onAdd হুক এখন এইরকম হওয়া উচিত:

    webGLOverlayView.onAdd = () => {
      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera();
      const ambientLight = new THREE.AmbientLight( 0xffffff, 0.75 );
      scene.add(ambientLight);
      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.25);
      directionalLight.position.set(0.5, -1, 0.5);
      scene.add(directionalLight);
    }

আপনার দৃশ্য এখন সেট আপ এবং রেন্ডারের জন্য প্রস্তুত৷ এরপরে, আপনি WebGL রেন্ডারার কনফিগার করবেন এবং দৃশ্যটি রেন্ডার করবেন।

6. দৃশ্য রেন্ডার করুন

আপনার দৃশ্য রেন্ডার করার সময়। এই মুহূর্ত পর্যন্ত, আপনি Three.js এর সাথে যা কিছু তৈরি করেছেন তা কোডে শুরু করা হয়েছে, কিন্তু মূলত অস্তিত্বহীন কারণ এটি এখনও WebGL রেন্ডারিং প্রসঙ্গে রেন্ডার করা হয়নি। WebGL ক্যানভাস API ব্যবহার করে ব্রাউজারে 2D এবং 3D সামগ্রী রেন্ডার করে। আপনি যদি আগে ক্যানভাস API ব্যবহার করে থাকেন, তাহলে আপনি সম্ভবত একটি HTML ক্যানভাসের context পরিচিত, যেখানে সবকিছু রেন্ডার করা হয়। আপনি যা জানেন না তা হল এটি একটি ইন্টারফেস যা ব্রাউজারে WebGLRenderingContext API-এর মাধ্যমে OpenGL গ্রাফিক্স রেন্ডারিং প্রসঙ্গ প্রকাশ করে।

WebGL রেন্ডারারের সাথে কাজ করা সহজ করার জন্য, Three.js WebGLRenderer প্রদান করে, একটি মোড়ক যা WebGL রেন্ডারিং প্রসঙ্গ কনফিগার করা তুলনামূলকভাবে সহজ করে যাতে Three.js ব্রাউজারে দৃশ্যগুলি রেন্ডার করতে পারে৷ মানচিত্রের ক্ষেত্রে, তবে, মানচিত্রের পাশাপাশি ব্রাউজারে শুধুমাত্র Three.js দৃশ্য রেন্ডার করাই যথেষ্ট নয়। Three.js অবশ্যই মানচিত্রের মতো একই রেন্ডারিং প্রেক্ষাপটে রেন্ডার করতে হবে, যাতে মানচিত্র এবং Three.js দৃশ্যের যেকোন বস্তু একই বিশ্ব স্পেসে রেন্ডার করা হয়। এটি রেন্ডারারের পক্ষে মানচিত্রের বস্তু এবং দৃশ্যের অবজেক্টের মধ্যে মিথস্ক্রিয়া পরিচালনা করা সম্ভব করে, যেমন অক্লুশন, যা বলার একটি অভিনব উপায় যে একটি বস্তু তার পিছনে বস্তুগুলিকে দৃশ্য থেকে লুকিয়ে রাখবে।

বেশ জটিল শোনাচ্ছে, তাই না? ভাগ্যক্রমে, Three.js আবার উদ্ধারে আসে।

1. WebGL রেন্ডারার সেট আপ করুন।
   
   আপনি যখন Three.js WebGLRenderer এর একটি নতুন উদাহরণ তৈরি করেন, তখন আপনি এটিকে নির্দিষ্ট WebGL রেন্ডারিং প্রসঙ্গ প্রদান করতে পারেন যাতে আপনি এটি আপনার দৃশ্যকে রেন্ডার করতে চান৷ onContextRestored পাস করা gl আর্গুমেন্ট মনে আছে? সেই gl অবজেক্ট হল মানচিত্রের WebGL রেন্ডারিং প্রসঙ্গ। আপনাকে যা করতে হবে তা হল WebGLRenderer দৃষ্টান্তে প্রসঙ্গ, এর ক্যানভাস এবং এর বৈশিষ্ট্যগুলি প্রদান করা, যা সবই gl অবজেক্টের মাধ্যমে উপলব্ধ। এই কোডে, রেন্ডারারের autoClear প্রপার্টিও false সেট করা হয়েছে যাতে রেন্ডারার প্রতিটি ফ্রেমের আউটপুট পরিষ্কার না করে।
   
   রেন্ডারার কনফিগার করতে, onContextRestored নিম্নলিখিতটি যুক্ত করুন:

   renderer = new THREE.WebGLRenderer({
     canvas: gl.canvas,
     context: gl,
     ...gl.getContextAttributes(),
   });
   renderer.autoClear = false;
   

2. দৃশ্য রেন্ডার করুন।
   
   রেন্ডারার কনফিগার হয়ে গেলে, WebGLOverlayView ইন্সট্যান্সে requestRedraw কল করুন ওভারলেকে জানাতে যে পরবর্তী ফ্রেম রেন্ডার করার সময় একটি redraw প্রয়োজন, তারপর রেন্ডারারে কল করুন এবং render করার জন্য এটি Three.js দৃশ্য এবং ক্যামেরা পাস করুন। সবশেষে, WebGL রেন্ডারিং প্রসঙ্গের অবস্থা পরিষ্কার করুন। GL রাজ্যের দ্বন্দ্ব এড়াতে এটি একটি গুরুত্বপূর্ণ পদক্ষেপ, যেহেতু WebGL ওভারলে ভিউ-এর ব্যবহার শেয়ার করা GL অবস্থার উপর নির্ভর করে। প্রতিটি ড্র কলের শেষে যদি স্টেট রিসেট না করা হয়, তাহলে GL স্টেট দ্বন্দ্ব রেন্ডারার ব্যর্থ হতে পারে।
   
   এটি করার জন্য, onDraw হুকের সাথে নিম্নলিখিতটি যুক্ত করুন যাতে এটি প্রতিটি ফ্রেমে কার্যকর হয়:

   webGLOverlayView.requestRedraw();
   renderer.render(scene, camera);
   renderer.resetState();
   

আপনার onContextRestored এবং onDraw হুকগুলি এখন এইরকম হওয়া উচিত:

    webGLOverlayView.onContextRestored = ({gl}) => {
      renderer = new THREE.WebGLRenderer({
        canvas: gl.canvas,
        context: gl,
        ...gl.getContextAttributes(),
      });

      renderer.autoClear = false;
    }

    webGLOverlayView.onDraw = ({gl, transformer}) => {
      webGLOverlayView.requestRedraw();
      renderer.render(scene, camera);
      renderer.resetState();
    }

7. মানচিত্রে একটি 3D মডেল রেন্ডার করুন৷

ঠিক আছে, আপনি জায়গায় সব টুকরা পেয়েছেন. আপনি WebGl ওভারলে ভিউ সেট আপ করেছেন এবং একটি Three.js দৃশ্য তৈরি করেছেন, কিন্তু একটি সমস্যা আছে: এতে কিছুই নেই। তাই পরবর্তী, দৃশ্যে একটি 3D অবজেক্ট রেন্ডার করার সময় এসেছে। এটি করার জন্য, আপনি আগে আমদানি করা GLTF লোডার ব্যবহার করবেন৷

3D মডেলগুলি বিভিন্ন ফরম্যাটে আসে, কিন্তু Three.js-এর জন্য gLTF ফরম্যাট তার আকার এবং রানটাইম পারফরম্যান্সের কারণে পছন্দের ফর্ম্যাট। এই কোডল্যাবে, দৃশ্যে রেন্ডার করার জন্য আপনার জন্য একটি মডেল ইতিমধ্যেই /src/pin.gltf এ আপনার জন্য সরবরাহ করা হয়েছে।

1. একটি মডেল লোডার উদাহরণ তৈরি করুন।
   
   onAdd এ নিম্নলিখিত যোগ করুন:

   loader = new GLTFLoader();
   

2. একটি 3D মডেল লোড করুন।
   
   মডেল লোডারগুলি অ্যাসিঙ্ক্রোনাস এবং মডেল সম্পূর্ণরূপে লোড হয়ে গেলে একটি কলব্যাক কার্যকর করে৷ pin.gltf লোড করতে, onAdd এ নিম্নলিখিতটি যোগ করুন:

   const source = "pin.gltf";
   loader.load(
     source,
     gltf => {}
   );
   

3. দৃশ্যে মডেল যোগ করুন.
   
   এখন আপনি loader কলব্যাকে নিম্নলিখিতটি যুক্ত করে দৃশ্যে মডেলটি যুক্ত করতে পারেন। মনে রাখবেন gltf.scene যোগ করা হচ্ছে, gltf নয় :

   scene.add(gltf.scene);
   

4. ক্যামেরা প্রজেকশন ম্যাট্রিক্স কনফিগার করুন।
   
   ম্যাপে মডেলটিকে সঠিকভাবে রেন্ডার করার জন্য আপনার সর্বশেষ যে জিনিসটি প্রয়োজন তা হল Three.js দৃশ্যে ক্যামেরার প্রজেকশন ম্যাট্রিক্স সেট করা। প্রজেকশন ম্যাট্রিক্সকে একটি Three.js Matrix4 অ্যারে হিসাবে নির্দিষ্ট করা হয়েছে, যা ত্রিমাত্রিক স্থানের একটি বিন্দুকে সংজ্ঞায়িত করে যেমন রূপান্তর, যেমন ঘূর্ণন, শিয়ার, স্কেল এবং আরও অনেক কিছু।
   
   WebGLOverlayView এর ক্ষেত্রে, প্রজেকশন ম্যাট্রিক্সটি রেন্ডারারকে বেসম্যাপের সাপেক্ষে Three.js দৃশ্যটি কোথায় এবং কিভাবে রেন্ডার করতে হবে তা বলতে ব্যবহৃত হয়। কিন্তু একটা সমস্যা আছে। মানচিত্রে অবস্থানগুলি অক্ষাংশ এবং দ্রাঘিমাংশ স্থানাঙ্ক জোড়া হিসাবে নির্দিষ্ট করা হয়েছে, যেখানে Three.js দৃশ্যের অবস্থানগুলি হল Vector3 স্থানাঙ্ক। আপনি অনুমান করতে পারেন, দুটি সিস্টেমের মধ্যে রূপান্তর গণনা করা তুচ্ছ নয়। এটি সমাধান করার জন্য, WebGLOverlayView একটি coordinateTransformer OnDraw লাইফসাইকেল হুকে পাস করে যেটিতে fromLatLngAltitude নামক একটি ফাংশন রয়েছে। fromLatLngAltitude একটি LatLngAltitude বা LatLngAltitudeLiteral অবজেক্ট নেয়, এবং ঐচ্ছিকভাবে আর্গুমেন্টের একটি সেট যা দৃশ্যের জন্য একটি রূপান্তর সংজ্ঞায়িত করে, তারপর সেগুলিকে আপনার জন্য একটি মডেল ভিউ প্রজেকশন (MVP) ম্যাট্রিক্সে আবৃত করে। আপনাকে যা করতে হবে তা হল মানচিত্রের কোথায় আপনি Three.js দৃশ্যটি রেন্ডার করতে চান, সেইসাথে আপনি এটিকে কীভাবে রূপান্তরিত করতে চান তা উল্লেখ করতে হবে এবং WebGLOverlayView বাকিটা করে। তারপরে আপনি MVP ম্যাট্রিক্সটিকে Three.js Matrix4 অ্যারেতে রূপান্তর করতে পারেন এবং এতে ক্যামেরা প্রজেকশন ম্যাট্রিক্স সেট করতে পারেন।
   
   নীচের কোডে, দ্বিতীয় যুক্তিটি WebGl ওভারলে ভিউকে ভূমি থেকে 120 মিটার উপরে Three.js দৃশ্যের উচ্চতা সেট করতে বলে, যা মডেলটিকে ভাসতে দেখাবে।
   
   ক্যামেরা প্রজেকশন ম্যাট্রিক্স সেট করতে, onDraw নিম্নলিখিতটি যুক্ত করুন:

   const latLngAltitudeLiteral = {
       lat: mapOptions.center.lat,
       lng: mapOptions.center.lng,
       altitude: 120
   }
   const matrix = transformer.fromLatLngAltitude(latLngAltitudeLiteral);
   camera.projectionMatrix = new THREE.Matrix4().fromArray(matrix);
   

5. মডেল রূপান্তর.
   
   আপনি লক্ষ্য করবেন যে পিনটি মানচিত্রে লম্বভাবে বসে নেই। 3D গ্রাফিক্সে, বিশ্ব স্থানের নিজস্ব x, y, এবং z অক্ষ রয়েছে যা অভিযোজন নির্ধারণ করে, প্রতিটি বস্তুর অক্ষের একটি স্বাধীন সেট সহ নিজস্ব বস্তুর স্থানও রয়েছে।
   
   এই মডেলের ক্ষেত্রে, এটি তৈরি করা হয়নি যা আমরা সাধারণত y-অক্ষের দিকে মুখ করা পিনের 'শীর্ষ' বিবেচনা করব, তাই আপনাকে বস্তুটিকে বিশ্ব স্থানের সাপেক্ষে পছন্দসই উপায়ে অভিমুখী করতে রূপান্তর করতে হবে। কলিং rotation.set এর উপর। মনে রাখবেন, Three.js-এ ঘূর্ণন রেডিয়ানে নির্দিষ্ট করা হয়েছে, ডিগ্রি নয়। ডিগ্রীতে চিন্তা করা সাধারণত সহজ, তাই ফর্মুলা degrees * Math.PI/180 ব্যবহার করে উপযুক্ত রূপান্তর করা দরকার।
   
   উপরন্তু, মডেলটি একটু ছোট, তাই আপনি এটিকে সমস্ত অক্ষে সমানভাবে স্কেল করতে হবে কল করে scale.set(x, y ,z) ।
   
   মডেলটি ঘোরাতে এবং স্কেল করতে, দৃশ্যের আগে onAdd scene.add(gltf.scene) loader কলব্যাকে নিম্নলিখিতটি যোগ করুন

   gltf.scene.scale.set(25,25,25);
   gltf.scene.rotation.x = 180 * Math.PI/180;
   

এখন পিনটি মানচিত্রের সাপেক্ষে সোজা হয়ে বসে আছে।

আপনার onAdd এবং onDraw হুকগুলি এখন এইরকম হওয়া উচিত:

    webGLOverlayView.onAdd = () => {
      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera();
      const ambientLight = new THREE.AmbientLight( 0xffffff, 0.75 ); // soft white light
      scene.add( ambientLight );
      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.25);
      directionalLight.position.set(0.5, -1, 0.5);
      scene.add(directionalLight);

      loader = new GLTFLoader();
      const source = 'pin.gltf';
      loader.load(
        source,
        gltf => {
          gltf.scene.scale.set(25,25,25);
          gltf.scene.rotation.x = 180 * Math.PI/180;
          scene.add(gltf.scene);
        }
      );
    }

    webGLOverlayView.onDraw = ({gl, transformer}) => {
      const latLngAltitudeLiteral = {
        lat: mapOptions.center.lat,
        lng: mapOptions.center.lng,
        altitude: 100
      }

      const matrix = transformer.fromLatLngAltitude(latLngAltitudeLiteral);
      camera.projectionMatrix = new THREE.Matrix4().fromArray(matrix);

      webGLOverlayView.requestRedraw();
      renderer.render(scene, camera);
      renderer.resetState();
    }

পরবর্তীতে ক্যামেরা অ্যানিমেশন!

8. ক্যামেরা অ্যানিমেট করুন

এখন আপনি মানচিত্রে একটি মডেল রেন্ডার করেছেন এবং সবকিছুকে ত্রিমাত্রিকভাবে স্থানান্তর করতে পারেন, পরবর্তী জিনিসটি আপনি সম্ভবত করতে চান তা হল প্রোগ্রামগতভাবে সেই আন্দোলনকে নিয়ন্ত্রণ করুন। moveCamera ফাংশন আপনাকে একই সাথে মানচিত্রের কেন্দ্র, জুম, কাত এবং শিরোনাম বৈশিষ্ট্যগুলি সেট করতে দেয়, আপনাকে ব্যবহারকারীর অভিজ্ঞতার উপর সূক্ষ্ম শস্য নিয়ন্ত্রণ দেয়। এছাড়াও, প্রতি সেকেন্ডে প্রায় 60 ফ্রেমের ফ্রেমরেটে ফ্রেমের মধ্যে তরল রূপান্তর তৈরি করতে moveCamera একটি অ্যানিমেশন লুপে কল করা যেতে পারে।

1. মডেলটি লোড হওয়ার জন্য অপেক্ষা করুন।
   
   একটি নির্বিঘ্ন ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে, আপনি gLTF মডেল লোড না হওয়া পর্যন্ত ক্যামেরা সরানো শুরু করার জন্য অপেক্ষা করতে চাইবেন৷ এটি করার জন্য, লোডারের onLoad ইভেন্ট হ্যান্ডলারটিকে onContextRestored যুক্ত করুন:

   loader.manager.onLoad = () => {}
   

2. একটি অ্যানিমেশন লুপ তৈরি করুন।
   
   একটি অ্যানিমেশন লুপ তৈরি করার একাধিক উপায় আছে, যেমন setInterval বা requestAnimationFrame ব্যবহার করা। এই ক্ষেত্রে, আপনি Three.js রেন্ডারারের setAnimationLoop ফাংশনটি ব্যবহার করবেন, যা প্রতিবার Three.js একটি নতুন ফ্রেম রেন্ডার করার সময় আপনার কলব্যাকে ঘোষণা করা যেকোনো কোডকে স্বয়ংক্রিয়ভাবে কল করবে। অ্যানিমেশন লুপ তৈরি করতে, পূর্ববর্তী ধাপে onLoad ইভেন্ট হ্যান্ডলারে নিম্নলিখিত যোগ করুন:

   renderer.setAnimationLoop(() => {});
   

3. অ্যানিমেশন লুপে ক্যামেরার অবস্থান সেট করুন।
   
   এরপর, মানচিত্র আপডেট করতে moveCamera কল করুন। এখানে, ম্যাপ লোড করতে ব্যবহৃত mapOptions অবজেক্টের বৈশিষ্ট্যগুলি ক্যামেরার অবস্থান নির্ধারণ করতে ব্যবহৃত হয়:

   map.moveCamera({
     "tilt": mapOptions.tilt,
     "heading": mapOptions.heading,
     "zoom": mapOptions.zoom
   });
   

4. প্রতিটি ফ্রেম ক্যামেরা আপডেট করুন।
   
   শেষ ধাপ! পরবর্তী ফ্রেমের জন্য ক্যামেরা অবস্থান সেট করতে প্রতিটি ফ্রেমের শেষে mapOptions অবজেক্ট আপডেট করুন। এই কোডে, 67.5 এর সর্বোচ্চ টিল্ট মান না পৌঁছানো পর্যন্ত একটি if স্টেটমেন্ট টিল্টকে বাড়ানোর জন্য ব্যবহার করা হয়, তারপর ক্যামেরা সম্পূর্ণ 360 ডিগ্রি ঘূর্ণন সম্পন্ন না করা পর্যন্ত প্রতিটি ফ্রেমের শিরোনাম কিছুটা পরিবর্তন করা হয়। একবার কাঙ্ক্ষিত অ্যানিমেশন সম্পূর্ণ হয়ে গেলে, অ্যানিমেশনটি বাতিল করতে null setAnimationLoop অ্যানিমেশনলুপে পাস করা হয় যাতে এটি চিরতরে চলতে না পারে।

   if (mapOptions.tilt < 67.5) {
     mapOptions.tilt += 0.5
   } else if (mapOptions.heading <= 360) {
     mapOptions.heading += 0.2;
   } else {
     renderer.setAnimationLoop(null)
   }
   

আপনার onContextRestored হুক এখন এই মত হওয়া উচিত:

    webGLOverlayView.onContextRestored = ({gl}) => {
      renderer = new THREE.WebGLRenderer({
        canvas: gl.canvas,
        context: gl,
        ...gl.getContextAttributes(),
      });

      renderer.autoClear = false;

      loader.manager.onLoad = () => {
        renderer.setAnimationLoop(() => {
           map.moveCamera({
            "tilt": mapOptions.tilt,
            "heading": mapOptions.heading,
            "zoom": mapOptions.zoom
          });

          if (mapOptions.tilt < 67.5) {
            mapOptions.tilt += 0.5
          } else if (mapOptions.heading <= 360) {
            mapOptions.heading += 0.2;
          } else {
            renderer.setAnimationLoop(null)
          }
        });
      }
    }

9. অভিনন্দন

সবকিছু পরিকল্পনা অনুযায়ী চললে, আপনার এখন একটি বড় 3D পিন সহ একটি মানচিত্র থাকা উচিত যা এইরকম দেখাচ্ছে:

আপনি যা শিখেছেন

এই কোডল্যাবে আপনি একগুচ্ছ জিনিস শিখেছেন; এখানে হাইলাইট আছে:

• WebGLOverlayView এবং এর লাইফ সাইকেল হুক বাস্তবায়ন করা।
• মানচিত্রে Three.js একত্রিত করা হচ্ছে।
• ক্যামেরা এবং আলো সহ একটি Three.js দৃশ্য তৈরির মূল বিষয়গুলি৷
• Three.js ব্যবহার করে 3D মডেল লোড করা এবং ম্যানিপুলেট করা।
• moveCamera ব্যবহার করে মানচিত্রের জন্য ক্যামেরা নিয়ন্ত্রণ এবং অ্যানিমেট করা।

এরপর কি?

WebGL, এবং সাধারণভাবে কম্পিউটার গ্রাফিক্স একটি জটিল বিষয়, তাই শেখার জন্য সবসময় অনেক কিছু থাকে। আপনাকে শুরু করার জন্য এখানে কয়েকটি সংস্থান রয়েছে:

• WebGL ওভারলে ডকুমেন্টেশন দেখুন
• WebGL দিয়ে শুরু করা হচ্ছে ।
• Three.js ডকুমেন্টেশন
• নীচের প্রশ্নের উত্তর দিয়ে আপনি যে বিষয়বস্তুটিকে সবচেয়ে বেশি উপযোগী মনে করবেন তা তৈরি করতে আমাদের সাহায্য করুন: «codelabs/maps-platform/shared/_next-lab-survey.lab.md» আপনি যে কোডল্যাব চান তা কি উপরে তালিকাভুক্ত নয়? এখানে একটি নতুন সমস্যা সহ এটি অনুরোধ করুন ।