3D Area Explorer হল এমন একটি সমাধান যা আপনাকে আকর্ষণীয় 3D-তে কমিউনিটি এক্সপ্লোর করার সুবিধা দেয়। এই সমাধান নিম্নলিখিত API ব্যবহার করে: Google-এর ফটোরিয়ালস্টিক 3D টাইল, জায়গা সার্চ করা, জায়গার বিবরণ, এবং অটোমেটিক সম্পূর্ণ করা API।
শুরু করা:
চালু করুন
অভিজ্ঞতা কাস্টমাইজ করুন
3D Area Explorer সমাধানটি অত্যন্ত কাস্টমাইজযোগ্য, যা আপনাকে আপনার গ্রাহকের
জার্নিতে অভিজ্ঞতাটি মানানসই করতে দেয়। আপনি UI-তে কন্ট্রোল প্যানেল ব্যবহার করে
অথবা config.json ফাইল ব্যবহার করে কাস্টমাইজ করতে পারবেন।
কাস্টমাইজ করার জন্য রেডি? এটি কীভাবে করবেন তা দেখুন:
লোকেশন
config.json ফাইলে অক্ষাংশ ও দ্রাঘিমাংশ অ্যাডজাস্ট করে আপনার অভিজ্ঞতার শুরুর পয়েন্ট
নির্ধারণ করুন।
ক্যামেরা কন্ট্রোল
ক্যামেরার অরবিট টাইপ বেছে নিয়ে আপনার জার্নি নিয়ন্ত্রণ করুন: একটি ক্লাসিক বৃত্তাকার পথ বা একটি কৌতূহলপূর্ণ সাইন ওয়েভ।
ফিক্সড অরবিট:
এটি একটি নির্দিষ্ট উচ্চতায় এবং আগ্রহের একটি নির্দিষ্ট বিন্দুর চারপাশে একটি বৃত্তাকার কক্ষপথ।
Google Sydney অফিস এক্সপ্লোর করে ফিক্সড অরবিট অ্যাকশনে দেখুন।
ডায়নামিক অরবিট:
ক্যামেরাটি একটি নির্দিষ্ট পয়েন্ট অফ ইন্টারেস্টের চারপাশে সাইন ওয়েভ ট্র্যাজেক্টরিতে মসৃণভাবে ঘোরে। এই অনন্য মুভমেন্টের মাধ্যমে দর্শকরা বিভিন্ন উচ্চতা ও কোণ থেকে আগ্রহের জায়গাটি দেখতে পারেন, যা একটি ডাইনামিক ও ইমারসিভ ভিজ্যুয়াল অভিজ্ঞতা প্রদান করে।
আইফেল টাওয়ার এক্সপ্লোর করে অ্যাকশনে ডায়নামিক অরবিট দেখুন।
উল্লেখযোগ্য স্থান (POI):
- আপনি যে ধরনের জায়গা খুঁজে পেতে চান তা নির্ধারণ করে আপনার এক্সপ্লোরেশন কাস্টমাইজ করুন।
config.json-এtypesঅ্যারে ব্যবহার করে মিউজিয়াম, পার্ক, স্কুল এবং আরও অনেক কিছু থেকে বেছে নিন। densityপ্যারামিটার অ্যাডজাস্ট করে, সর্বাধিক কতগুলি আকর্ষণীয় স্থান দেখানো হবে তা সেট করুন।searchRadius (in meters)-এ পরিবর্তন করে আশেপাশের লুকানো রত্ন অন্তর্ভুক্ত করুন অথবা নির্দিষ্ট এলাকায় ফোকাস করুন।speed (in revolutions per minute)প্যারামিটার ব্যবহার করে আপনার ক্যামেরার মুভমেন্টের জন্য বেছে নেওয়া স্পিড সেট করুন।
আপনার এক্সপ্লোরেশন প্রি-লোড করা হচ্ছে: URL কাস্টমাইজেশনের মাধ্যমে আরও গভীরে যান
3D Area Explorer আপনাকে URL কাস্টমাইজেশনের মাধ্যমে আপনার এক্সপ্লোরেশন আগে থেকে নির্ধারণ করার ক্ষমতা দেয়। এর ফলে ম্যানুয়াল কনফিগারেশনের প্রয়োজন হয় না এবং ব্যবহারকারীর অভিজ্ঞতা আরও উন্নত হয়।
নিখুঁত URL তৈরি করা:
লোকেশন ও অন্যান্য সেটিংস আগে থেকে সেট করতে, Area Explorer URL-এ নির্দিষ্ট প্যারামিটার যোগ করুন। যেমন:
https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439
এই URL, শুরুর পয়েন্টকে নির্দিষ্ট করা অক্ষাংশ ও দ্রাঘিমাংশে সেট করে, আপনাকে বেছে নেওয়া লোকেশনে সাথে সাথে নিয়ে যায়। উপলভ্য প্যারামিটার:
location.coordinates.lat: আপনার বেছে নেওয়া লোকেশনের অক্ষাংশ।location.coordinates.lng: আপনার বেছে নেওয়া লোকেশনের দ্রাঘিমাংশ।poi.types: POI-এর ধরন কমা দিয়ে আলাদা করে দেখানো হয়েছে।poi.density: POI-এর বেছে নেওয়া সর্বাধিক সংখ্যা।poi.searchRadius: আশেপাশের POI খোঁজার ব্যাসার্ধ।camera.speed: ক্যামেরা অরবিট স্পিড।camera.orbitType: ক্যামেরা অরবিট টাইপ ("fixed-orbit" বা "dynamic-orbit")।
URL কাস্টমাইজেশনের সুবিধা:
- আপনার বেছে নেওয়া সেটিংস আগে থেকে নির্ধারণ করে ব্যবহারকারীর অভিজ্ঞতা স্ট্রিমলাইন করুন।
- নির্দিষ্ট প্রি-লোড করা লোকেশন এবং POI সহ টার্গেট করা জার্নি শেয়ার করুন।
- ওয়েবসাইটের মধ্যে নির্বিঘ্নে প্রি-কনফিগার করা Area Explorer অভিজ্ঞতা এম্বেড করুন।
URL কাস্টমাইজেশনের সুবিধা ব্যবহার করে, আপনি কাস্টমাইজ করা অভিজ্ঞতা তৈরি করতে এবং কিউরেট করা অ্যাডভেঞ্চার শুরু করার জন্য অন্যদের আমন্ত্রণ জানাতে পারেন।
আরও কাস্টমাইজেশন
আগের বিভাগে UI বা কনফিগারেশন ফাইলের মাধ্যমে অ্যাক্সেসযোগ্য অ্যাডজাস্টমেন্ট এক্সপ্লোর করা হয়েছে। তবে, আরও বেশ কিছু বিল্ট-ইন প্যারামিটার আছে যেগুলি আপনি অ্যাপ্লিকেশন আরও কাস্টমাইজ করার জন্য পরিবর্তন করতে পারবেন।
এইসব উন্নত কাস্টমাইজেশন করতে, আপনাকে src ডিরেক্টরিতে থাকা
src/utils/cesium.js ফাইলের কোড দেখতে হবে। অ্যাপ্লিকেশনের
লুক ও ফিল পরিবর্তন করতে নিম্নলিখিত ভেরিয়েবল পরিবর্তন করা যেতে পারে
ক্যামেরার উচ্চতা
CAMERA_HEIGHT ভ্যালু অ্যাডজাস্ট করে, কোনও পয়েন্টের দিকে উড়ে যাওয়ার সময় ক্যামেরা কতটা উঁচুতে
পজিশন করবে তা নিয়ন্ত্রণ করুন। ভ্যালু বেশি হলে আরও বেশি জুম-আউট করা প্যানোরামিক ভিউ পাওয়া যাবে,
ভ্যালু কম হলে এলাকার আরও বিস্তারিত ভিউ পাওয়া যাবে
// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;
- সেটিং:
CAMERA_HEIGHT - ডিফল্ট ভ্যালু: ১০০
- বিবরণ: কোনও পয়েন্টে উড়ে যাওয়ার সময় টার্গেট লোকেশনের উপরে ক্যামেরার উচ্চতা নির্ধারণ করে।
- ভ্যালুর উদাহরণ:
- ৫০: আরও কাছ থেকে দেখা, বিবরণের উপর জোর দেওয়া।
- ২০০: আরও প্যানোরামিক পার্সপেক্টিভ।
ক্যামেরা পিচ
ক্যামেরার প্রাথমিক টিল্ট BASE_PITCH দ্বারা নির্ধারিত হয়। নিচের দিকে টিল্ট করার জন্য নেগেটিভ ভ্যালু এবং উপরের দিকে দেখার জন্য পজিটিভ ভ্যালু ব্যবহার করুন। আপনার এক্সপ্লোরেশনে সূক্ষ্ম ডায়নামিক মুভমেন্ট যোগ করতে, AUTO_ORBIT_PITCH_AMPLITUDE পরিবর্তন করুন।
// Pitch 30 degrees downwards
const BASE_PITCH = -30;
// change the pitch by 10 degrees over time
const AUTO_ORBIT_PITCH_AMPLITUDE = 10;
- সেটিং:
BASE_PITCHএবংAUTO_ORBIT_PITCH_AMPLITUDE - ডিফল্ট ভ্যালু:
BASE_PITCH: -30 (30 ডিগ্রি নিচের দিকে পিচ করা)AUTO_ORBIT_PITCH_AMPLITUDE: ১০ (সময়ের সাথে সাথে পিচ ১০ ডিগ্রি পরিবর্তন করা)
বিবরণ: ক্যামেরা পিচ হল ম্যাপের ভিজ্যুয়াল টিল্ট, যা ডিগ্রিতে পরিমাপ করা হয়। এটি টিল্ট নামেও পরিচিত। এইসব সেটিংস ক্যামেরার প্রাথমিক পিচ এবং অটোমেটিক রোটেশনের সময় ডায়নামিক পিচ অ্যাডজাস্টমেন্ট নির্ধারণ করে।
ভ্যালুর উদাহরণ:
BASE_PITCH: ০ (লেভেল ক্যামেরা)AUTO_ORBIT_PITCH_AMPLITUDE: 0 (পিচে কোনও পরিবর্তন নেই)
ক্যামেরা রেঞ্জ ও জুম
নির্দিষ্ট পয়েন্টে ফোকাস করার সময় কতটা জুম করা হবে তা এই প্যারামিটারগুলি সেট করে। ছোট ভ্যালু মানে আরও কাছে জুম করা।
// Distance variation relative to initial range.
const RANGE_AMPLITUDE_RELATIVE = 0.55;
// Determines how much the camera should zoom in or out
const ZOOM_FACTOR = 20;
সেটিং: RANGE_AMPLITUDE_RELATIVE এবং ZOOM_FACTOR
ডিফল্ট ভ্যালু:
RANGE_AMPLITUDE_RELATIVE: ০.৫৫ (আপেক্ষিক দূরত্বের পরিবর্তন)ZOOM_FACTOR: ২০ (ক্যামেরা জুম ফ্যাক্টর)
বিবরণ: ক্যামেরা মুভমেন্টের সময় রেঞ্জের তারতম্য এবং আরও কাছ থেকে দেখার জন্য জুম লেভেল এই সেটিংসের মাধ্যমে নির্ধারণ করা হয়।
উদাহরণ হিসেবে দেওয়া ভ্যালু:
RANGE_AMPLITUDE_RELATIVE: ১ (সম্পূর্ণ রেঞ্জ ভেরিয়েশন)ZOOM_FACTOR: ১০ (কম জুম)
// Camera heading (rotation), pitch (tilt), and range (distance) for resetting view.
const CAMERA_OFFSET = {
heading: 0, // No rotation offset.
pitch: Cesium.Math.toRadians(BASE_PITCH),
range: 800, // 800 meters from the center.
};
ক্যামেরা রিসেট
ব্যবহারকারী ক্যামেরাকে আসল পজিশনে রিসেট করতে চাইলে, CAMERA_OFFSET ভ্যালু ব্যবহার করা হয়। এই সেটিংয়ে হেডিং (ঘোরানো), পিচ (টিল্ট) ও রেঞ্জ (সেন্টার থেকে ক্যামেরা কত দূরে আছে) অন্তর্ভুক্ত।
- সেটিং:
CAMERA_OFFSET - ডিফল্ট ভ্যালু:
heading: ০ (কোনও রোটেশন অফসেট নেই)pitch: Cesium.Math.toRadians(-30) (৩০ ডিগ্রি নিচের দিকে পিচ করা)range: ৮০০ (কেন্দ্র থেকে ৮০০ মিটার)
- বিবরণ: ভিউ রিসেট করার জন্য ক্যামেরার হেডিং, পিচ ও রেঞ্জ নির্ধারণ করে।
- ভ্যালুর উদাহরণ:
heading: ৪৫ (ডিগ্রি, উত্তর-পশ্চিম ভিউ)range: ১৫০০ মিটার (কেন্দ্র থেকে আরও দূরে)
শুরুর স্থানাঙ্ক:
START_COORDINATES ক্যামেরার প্রাথমিক দ্রাঘিমাংশ, অক্ষাংশ এবং উচ্চতা নির্ধারণ করে। এখান থেকেই এক্সপ্লোর করা শুরু হবে, তাই ব্যবহারকারীদের প্রথমে যে এলাকা দেখাতে চান, সেটি সেট করুন।
// Default camera start position in longitude, latitude, and altitude.
const START_COORDINATES = {
longitude: 0,
latitude: 60,
height: 15000000, // 15,000 km above the surface
};
- সেটিং:
START_COORDINATES ডিফল্ট ভ্যালু:
longitude: ০latitude: ৬০height: ১৫০০০০০০ (পৃষ্ঠ থেকে ১৫,০০০ কিমি উপরে)
উদাহরণ হিসেবে দেওয়া ভ্যালু:
longitude: -122.4934,latitude: 37.7951 (গোল্ডেন গেট ব্রিজ)height: ২০০০ (শুরুর পজিশনের কাছাকাছি)
আগে থেকে ঠিক করা লোকেশন লোড করুন
config.json-এ location অবজেক্ট এলাকার কেন্দ্র সেট করে। এটি হল
Cesium ভিউয়ারে ক্যামেরার প্রাথমিক ভিউপয়েন্ট।coordinates: আপনি ক্যামেরা প্রথমে যে লোকেশনে প্যান করতে চান, তার অক্ষাংশ (lat) এবং দ্রাঘিমাংশ (lng) নির্ধারণ করে। পৃথিবীর যেকোনও নির্দিষ্ট লোকেশনে ক্যামেরা সেট করতে এইসব ভ্যালু অ্যাডজাস্ট করুন।
{
"location": {
"coordinates": { "lat": null, "lng": null }
},
এই কনফিগারেশন আপনাকে আপনার 3D Place Navigator অ্যাপ্লিকেশন শুরু করতে দেয় আপনার পছন্দের একটি নির্দিষ্ট লোকেশনে জুম ইন করা হয়েছে। আপনি Google-এর জিওকোডিং টুল ব্যবহার করে কোনও ঠিকানা বা জায়গার নামের অক্ষাংশ ও দ্রাঘিমাংশ কোঅর্ডিনেট পেতে পারেন, এর জন্য আপনাকে লোকেশন অবজেক্টে এটি উল্লেখ করতে হবে:
- জিওকোডিং টুল অ্যাক্সেস করুন।
- জিওকোডিং অনুরোধ তৈরি করুন "নিজে চেষ্টা করুন" বিভাগে ক্লিক করুন এবং "ঠিকানা" ফিল্ডে আপনার বেছে নেওয়া লোকেশন লিখুন। আপনি ঠিকানা, জায়গার নাম, এমনকি ল্যান্ডমার্কও উল্লেখ করতে পারেন।
- স্থানাঙ্ক জেনারেট করুন আপনার অনুরোধ জমা দিতে "রান করুন" বোতামে ক্লিক করুন। টুলটি
লোকেশন সম্পর্কে বিভিন্ন তথ্য সহ একটি উত্তর দেবে,
যার মধ্যে অক্ষাংশ এবং দ্রাঘিমাংশ কোঅর্ডিনেটও রয়েছে যা
geometry.locationবিভাগের অধীনে দেখানো হয়। - জিওকোড ব্যবহার করুন রেসপন্স থেকে পাওয়া অক্ষাংশ ও দ্রাঘিমাংশের মান কপি করে আপনার কনফিগারেশনের মধ্যে
coordinatesঅবজেক্টে পেস্ট করুন।
মনে রাখবেন: এইভাবে ব্যবহার করা জিওকোডকে অবশ্যই Google Maps Platform পরিষেবার শর্তাবলী বিভাগ ৩.৪-এ উল্লেখ করা শর্তাবলী মেনে চলতে হবে, অর্থাৎ ৩০ দিনের বেশি সময় ধরে ক্যাশে করা যাবে না এবং তারপরে রিফ্রেশ করতে হবে।

এই কনফিগারেশনটি ক্যালিফোর্নিয়ার মাউন্টেন ভিউতে Google-এর সদর দফতরের স্থানাঙ্কগুলি অটোমেটিক নির্ধারণ করতে জিওকোডিং টুল ব্যবহার করবে এবং সেই লোকেশনে ক্যামেরা কেন্দ্র করে আপনার 3D প্লেস নেভিগেটর অ্যাপ্লিকেশন চালু করবে।
উন্নত কাস্টমাইজেশন
কোড আরও গভীরভাবে বিশ্লেষণ করে আপনি অতিরিক্ত কাস্টমাইজেশন করতে পারবেন। নিম্নলিখিত বিভাগ আপনাকে কিছু বিকল্পের মাধ্যমে সাহায্য করে
নতুন ক্যামেরা পাথ যোগ করুন
এই সমাধানটি দুটি ভিন্ন ক্যামেরা পাথ প্রয়োগ করে:
fixed-orbit" | "dynamic-orbit"
তবে আপনি চাইলে নতুন ক্যামেরা পাথ তৈরি করতে পারেন, এটি আপনি ব্যবহার করে প্রয়োগ করতে পারেন
calculateAutoOrbitFrame ফাংশনে /src/utils/cesium.js।
কনফিগারেশন প্যানেলে এই নতুন পাথ ক্যালকুলেশন ব্যবহার করতে,demo/src/camera-settings.js.-এ ইমপ্লিমেন্টেশন দেখুন
আরও জায়গার ধরন যোগ করুন
কনফিগারেশনের জন্য জায়গার ধরনের তালিকা
demo/src/place-settings.js ফাইলে অ্যাডজাস্ট করা যেতে পারে। ৪ নম্বর লাইন থেকে শুরু করে ডেমোতে উপলভ্য
জায়গার ধরন দেখানো হয়েছে।
আপনি যদি ডেমো সোর্স পরিবর্তন না করে নির্দিষ্ট ধরনের জায়গা ব্যবহার করতে চান, তাহলে
আপনি শুধু poi.types-এর অধীনে config.json ফাইলে সেগুলি যোগ করতে পারেন
স্টাইল কাস্টমাইজ করুন (css)
স্টাইলের জন্য আমরা CSS ভেরিয়েবল ব্যবহার করেছি। এটি সব প্রধান ব্রাউজারে কাজ করে এবং এর ফলে সেন্ট্রাল লোকেশনে একটি লাইন পরিবর্তন করে নির্দিষ্ট CSS প্রপার্টি আপডেট করা সম্ভব হয়। আমাদের CSS ভেরিয়েবল src/main.css.-এ সংজ্ঞায়িত করা আছে। সেখানে
আপনি সম্পূর্ণ অ্যাপ্লিকেশনের জন্য রঙ, ফন্ট সেটিংস এবং প্যাডিং বা মার্জিন
অ্যাডজাস্ট করতে পারবেন।
অতিরিক্ত ডেটা ওভারলে করুন
অতিরিক্ত ডেটা ওভারলে করতে আপনাকে src/utils/cesium.js ফাইল আপডেট করতে হবে এবং গ্লোবে কীভাবে GeoJSON বা অন্যান্য জিও রেফারেন্সড ডেটা যোগ করতে হয় সেই বিষয়ে cesium ডকুমেন্টেশন দেখুন।
কনফিগারেশন বিভাগ সরান
আমাদের JavaScript অ্যাপ্লিকেশনের কনফিগারেশন ফাইলে তিনটি প্রধান বিভাগ আছে: demo/src/[config-panel.js](config-panel.js): location,
poi এবং camera। এইসব বিভাগের প্রতিটি অ্যাপ্লিকেশনের বিভিন্ন দিকের জন্য
কনফিগারেশন বিকল্প প্রদান করে। ডেভেলপাররা তাদের নির্দিষ্ট প্রয়োজনের উপর ভিত্তি করে
এই বিভাগগুলি কাস্টমাইজ করতে পারেন।
১.কনফিগারেশন থেকে নির্দিষ্ট বিভাগ সরিয়ে দেওয়া
- লোকেশন বিভাগ
location বিভাগটি সরাতে, আপনার কোডে নিম্নলিখিত লাইনটি খুঁজে বের করুন এবং
সেটি কমেন্ট বা মুছে দিন:
const locationConfig = { ...config.location, ...customConfig.location };
- POI বিভাগ
poi বিভাগটি সরাতে, আপনার কোডে নিম্নলিখিত লাইনটি খুঁজে বের করুন এবং এটি কমেন্ট করুন
বা মুছে দিন:
const poiConfig = { ...config.poi, ...customConfig.poi };
- ক্যামেরা বিভাগ
camera বিভাগটি সরাতে, আপনার কোডে নিম্নলিখিত লাইনটি খুঁজুন এবং কমেন্ট করুন
অথবা এটি মুছে দিন:
const cameraConfig = { ...config.camera, ...customConfig.camera };
২. সম্মিলিত কনফিগারেশন আপডেট করুন
কোনও বিভাগ সরানোর পরে, সম্মিলিত কনফিগারেশন অবজেক্ট আপডেট করা
প্রয়োজন। এই অবজেক্ট ডিফল্ট কনফিগারেশনকে যেকোনও কাস্টমাইজেশনের সাথে মার্জ করে।
combinedConfig অবজেক্ট থেকে সংশ্লিষ্ট প্রপার্টি সরিয়ে দিন:
const combinedConfig = {
location: { ...config.location, ...customConfig.location }, // Remove if location section is removed
poi: { ...config.poi, ...customConfig.poi }, // Remove if poi section is removed
camera: { ...config.camera, ...customConfig.camera }, // Remove if camera section is removed
};
৩. UI এলিমেন্ট অ্যাডজাস্ট করুন
কোনও বিভাগ সরানোর অর্থ যদি সংশ্লিষ্ট UI এলিমেন্ট সরানো হয়, তাহলে html কোডে সেই অনুযায়ী কোড আপডেট করুন। যেমন, আপনি যদি অ্যাডমিন প্যানেল থেকে ক্যামেরার স্পিডের মতো কোনও নির্দিষ্ট বিভাগ সরাতে চান, তাহলে আপনাকে সেটির জন্য js এবং html কোড, দুটিই আপডেট করতে হবে।
৪. ক্যামেরা সেটিংস বিভাগ সরান
UI থেকে ক্যামেরা সেটিংস বিভাগ সরাতে, নিম্নলিখিত লাইনটি খুঁজে বের করুন এবং কমেন্ট করুন বা মুছে দিন:
const cameraSettingsSecgetCameraSettingsSection(cameraConfig);
লোকেশন বিভাগের সারাংশ সরানো হচ্ছে
const locationSection = await getLocationSettingsSection(locationConfig);
উপসংহার
এই ডকুমেন্টে, আপনার 3D এক্সপ্লোরেশন অভিজ্ঞতাকে কাস্টমাইজ করার জন্য আমরা Area Explorer-এ উপলভ্য বিভিন্ন কাস্টমাইজেশন বিকল্পগুলি এক্সপ্লোর করেছি। ক্যামেরার আচরণ পরিবর্তন করে, ভিজ্যুয়াল টিল্ট অ্যাডজাস্ট করে এবং জুম লেভেল পরিবর্তন করে, আপনি অনন্য এবং আকর্ষণীয় অভিজ্ঞতা তৈরি করতে পারেন যা আপনার বেছে নেওয়া সেটিংস এবং আগ্রহের পয়েন্টগুলি দেখায়।
আপনার নির্দিষ্ট প্রয়োজন অনুযায়ী বিভিন্ন কনফিগারেশন নিয়ে পরীক্ষা-নিরীক্ষা করতে এবং প্যারামিটার ফাইন-টিউন করতে ভুলবেন না। কাস্টমাইজেশনের সুবিধা ব্যবহার করে, আপনি এমন ইমারসিভ ও পছন্দমতো জার্নি তৈরি করতে পারবেন যা আপনার দর্শকদের মুগ্ধ করবে এবং আপনার ভিশনকে বাস্তবে রূপ দেবে।