BabylonJS-এ ক্যামেরা একটি অত্যন্ত গুরুত্বপূর্ণ উপাদান, যা 3D দৃশ্যের ভিতরে ব্যবহারকারীর দৃষ্টিভঙ্গি নিয়ন্ত্রণ করে। ডিফল্টভাবে, BabylonJS বিভিন্ন ধরনের ক্যামেরা প্রোভাইড করে, যেমন ArcRotateCamera, UniversalCamera, এবং FreeCamera। তবে, আপনি ক্যামেরার কন্ট্রোল এবং আচরণ কাস্টমাইজ করতে পারেন, যাতে ব্যবহারকারীদের জন্য আরও স্বাচ্ছন্দ্যময় এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা তৈরি হয়।
এই টিউটোরিয়ালে আমরা ক্যামেরার কন্ট্রোল কাস্টমাইজ করার বিভিন্ন পদ্ধতি আলোচনা করব।
১. ক্যামেরার ধরন
১.১ ArcRotateCamera
ArcRotateCamera হল একটি ক্যামেরা, যা দৃশ্যের চারপাশে একটি নির্দিষ্ট পয়েন্টের দিকে ফোকাস করতে সক্ষম। এটি সাধারণত ব্যবহারকারীর ইনপুট (মাউস বা টাচ) এর মাধ্যমে ঘুরানো হয়।
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
১.২ UniversalCamera
UniversalCamera হল একটি ক্যামেরা যা 3D দৃশ্যে চলাচলের জন্য ব্যবহার করা হয়, যা প্রথম ব্যক্তি (First-Person) বা তৃতীয় ব্যক্তি (Third-Person) মত অনুভূতি দিতে সক্ষম।
var camera = new BABYLON.UniversalCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
camera.attachControl(canvas, true);
১.৩ FreeCamera
FreeCamera ব্যবহারকারীকে 3D স্পেসের মধ্যে অবাধে চলাচল করতে দেয়। এটি বিশেষ করে গেম বা সিমুলেশনে কাজে আসে।
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
camera.attachControl(canvas, true);
২. ক্যামেরা কন্ট্রোল কাস্টমাইজেশন
২.১ মাউস ইনপুট কাস্টমাইজ করা
BabylonJS তে মাউস ইনপুট ব্যবহার করে ক্যামেরার প্যান, রোটেট বা জুম কন্ট্রোল করা যায়। আপনি এই ইনপুটগুলিকে কাস্টমাইজ করতে পারেন, যেমন: মাউসের বাটন বা মুভমেন্ট স্পীড নিয়ন্ত্রণ।
রোটেশন স্পিড কাস্টমাইজ করা:
camera.panningSensibility = 1000; // ক্যামেরার প্যানিং সেন্সিটিভিটি নির্ধারণ
camera.angularSensibilityX = 1000; // X-অক্ষের জন্য সেন্সিটিভিটি
camera.angularSensibilityY = 1000; // Y-অক্ষের জন্য সেন্সিটিভিটি
ক্যামেরা মুভমেন্ট স্পিড কাস্টমাইজ করা:
camera.speed = 1.5; // ক্যামেরার চলাচল গতি
camera.inertia = 0.9; // ইনটার্ক্টিভ গতি
২.২ কী-বোর্ড ইনপুট কাস্টমাইজ করা
ক্যামেরার চলাচল বা জুম করতে আপনি কী-বোর্ডের কন্ট্রোল ব্যবহার করতে পারেন। BabylonJS তে ক্যামেরা কাস্টম কী-বোর্ড ইনপুট সেটআপ করতে নিম্নলিখিত পদ্ধতি ব্যবহার করতে পারেন:
scene.onKeyboardObservable.add(function (kbInfo) {
if (kbInfo.type === BABYLON.KeyboardEventTypes.KEYDOWN) {
if (kbInfo.event.key === "w") {
camera.position.z += 0.1; // W কী দিয়ে ক্যামেরা সামনে নিয়ে আসা
}
if (kbInfo.event.key === "s") {
camera.position.z -= 0.1; // S কী দিয়ে ক্যামেরা পেছনে নিয়ে আসা
}
}
});
২.৩ মাউস প্যান কাস্টমাইজেশন
আপনি মাউস প্যানিং ফাংশন কাস্টমাইজ করতে পারেন, যেমন কী-বোর্ড ব্যবহার করে ক্যামেরা প্যানিং করানো অথবা বিশেষ ধরনের ইনপুট (যেমন টাচ স্ক্রীন) ব্যবহার করে প্যানিং নিয়ন্ত্রণ করা।
camera.panningSensibility = 500; // মাউস প্যানিং সেন্সিটিভিটি বাড়ানো
২.৪ জুম কাস্টমাইজেশন
জুম ইন এবং আউট কন্ট্রোল করার জন্য, আপনি wheelDeltaPercentage বা zoomOnPointer কাস্টমাইজ করতে পারেন।
camera.wheelPrecision = 50; // মাউস হুইল দিয়ে জুম করার জন্য সেন্সিটিভিটি নিয়ন্ত্রণ
camera.fov = 0.8; // ক্যামেরার ফিল্ড অফ ভিউ নিয়ন্ত্রণ
৩. ক্যামেরা সীমা নির্ধারণ
ক্যামেরা সীমা নির্ধারণ করা হলে, আপনি কন্ট্রোল সীমাবদ্ধ করে রাখতে পারবেন। যেমন, ক্যামেরা দৃশ্যের বাইরে চলে যাওয়ার আগে সীমা নির্ধারণ করা।
camera.lowerBetaLimit = 0.2; // ক্যামেরার কম বেটা (Y-axis) সীমা
camera.upperBetaLimit = Math.PI / 1.5; // ক্যামেরার উপরের বেটা (Y-axis) সীমা
camera.lowerRadiusLimit = 5; // ক্যামেরার কম রেডিয়াস সীমা
camera.upperRadiusLimit = 50; // ক্যামেরার উপরের রেডিয়াস সীমা
৪. ক্যামেরার চিত্তাকর্ষক আচরণ
৪.১ ক্যামেরার মুভমেন্ট লজিক পরিবর্তন
কিছু সময়, ক্যামেরা মুভমেন্টের জন্য আপনি বিশেষ ধরনের আচরণ তৈরি করতে চাইবেন, যেমন ক্যামেরা কোনো নির্দিষ্ট অবস্থানে বা ভিউ-এ পৌঁছানোর জন্য ইন্টারপোলেশন।
var target = new BABYLON.Vector3(0, 5, 0); // লক্ষ্যবস্তু পয়েন্ট
camera.setTarget(target); // ক্যামেরাকে লক্ষ্যবস্তুতে ফোকাস করা
৪.২ সেকেন্ডারি ক্যামেরা ব্যবহার
আপনি একাধিক ক্যামেরা ব্যবহার করতে পারেন এবং তাদের মধ্যে স্যুইচ করতে পারেন। সাধারণত, একটি সেকেন্ডারি ক্যামেরা ব্যবহার করা হয় যখন আপনি একটি ভিন্ন ভিউ বা কার্যাবলী দেখাতে চান।
var secondaryCamera = new BABYLON.ArcRotateCamera("secondaryCamera", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
scene.activeCameras.push(secondaryCamera); // সেকেন্ডারি ক্যামেরা অ্যাকটিভ করা
৫. ক্যামেরার অ্যানিমেশন
BabylonJS তে ক্যামেরার অবস্থান বা দৃষ্টিভঙ্গি অ্যানিমেট করা যেতে পারে, যেমন আপনি ক্যামেরাকে নির্দিষ্ট পথে বা কোনো বিশেষ অক্ষরের চারপাশে ঘোরাতে পারেন।
var animation = new BABYLON.Animation("cameraAnimation", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
var keyFrames = [];
keyFrames.push({
frame: 0,
value: camera.position
});
keyFrames.push({
frame: 100,
value: new BABYLON.Vector3(0, 10, 0) // ক্যামেরার নতুন অবস্থান
});
animation.setKeys(keyFrames);
camera.animations.push(animation);
scene.beginAnimation(camera, 0, 100, true);
সারাংশ
- ক্যামেরা কাস্টমাইজেশন: BabylonJS-এ বিভিন্ন ধরনের ক্যামেরা ব্যবহার করে 3D দৃশ্যের ভিতরে ক্যামেরার দৃষ্টিভঙ্গি এবং চলাচল কাস্টমাইজ করা যায়।
- মাউস, কী-বোর্ড, এবং জুম কন্ট্রোল: মাউস, কী-বোর্ড ইনপুট এবং জুমিং স্পিড কাস্টমাইজ করা সম্ভব।
- ক্যামেরার সীমা এবং আচরণ: ক্যামেরার প্যান, রোটেশন এবং রেডিয়াস সীমা নির্ধারণ করা যেতে পারে।
- অ্যানিমেশন: ক্যামেরার অবস্থান বা দৃষ্টিভঙ্গি অ্যানিমেট করে আরো চিত্তাকর্ষক অভিজ্ঞতা তৈরি করা যায়।
এই কাস্টমাইজেশনগুলির মাধ্যমে, আপনি আপনার 3D দৃশ্যের ক্যামেরা কন্ট্রোলকে আরও ইন্টারঅ্যাকটিভ এবং প্রভাবশালী করতে পারবেন।
