Mesh, Camera এবং Light এর এনিমেশন

BabylonJS-এ এনিমেশন ব্যবহৃত হয় 3D অবজেক্ট, ক্যামেরা এবং আলোর গতিশীলতা এবং পরিবর্তনগুলো প্রদর্শন করতে। এটি 3D দৃশ্যের মধ্যে জীবন্ততা এবং আকর্ষণ সৃষ্টি করে। এই গাইডে আমরা দেখব কিভাবে Mesh (অবজেক্ট), Camera এবং Light এর এনিমেশন তৈরি করা যায়।

১. Mesh (অবজেক্ট) এর এনিমেশন

Mesh-এর এনিমেশন সাধারণত অবস্থান, স্কেল, রোটেশন বা অন্য যে কোনো বৈশিষ্ট্য পরিবর্তন করতে ব্যবহৃত হয়। BabylonJS-এ Mesh-এর জন্য এনিমেশন তৈরি করতে Animation ক্লাস ব্যবহার করা হয়।

উদাহরণ: বক্সের রোটেশন এনিমেশন

// Canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");

// BabylonJS ইঞ্জিন তৈরি করা
var engine = new BABYLON.Engine(canvas, true);

// দৃশ্য তৈরি করা
var scene = new BABYLON.Scene(engine);

// ক্যামেরা তৈরি করা
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

// বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);

// বক্সের রোটেশন এনিমেশন তৈরি করা
var rotateAnimation = new BABYLON.Animation("rotateAnimation", "rotation.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

// রোটেশন কিভাবে পরিবর্তিত হবে
var keys = [];
keys.push({ frame: 0, value: 0 });
keys.push({ frame: 100, value: Math.PI * 2 }); // এক রেভোলিউশন

rotateAnimation.setKeys(keys);

// এনিমেশন বক্সে অ্যাপ্লাই করা
box.animations.push(rotateAnimation);

// দৃশ্যে এনিমেশন রান করার জন্য
scene.beginAnimation(box, 0, 100, true);

// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
    scene.render();
});

// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
    engine.resize();
});

কোড ব্যাখ্যা:

• BABYLON.Animation: একটি নতুন এনিমেশন তৈরি করা হয়েছে যা বক্সের রোটেশন পরিবর্তন করবে।
• setKeys(): এনিমেশনের মূল পয়েন্টগুলো নির্ধারণ করা হয়েছে, যেমন প্রথমে 0 ডিগ্রি এবং পরবর্তীতে 360 ডিগ্রি (এক রেভোলিউশন)।
• scene.beginAnimation(): এনিমেশন শুরু করতে এই ফাংশনটি ব্যবহার করা হয়েছে, এবং true মানে এনিমেশনটি লুপ হবে।

২. Camera (ক্যামেরা) এর এনিমেশন

ক্যামেরার এনিমেশন খুবই গুরুত্বপূর্ণ যখন আমরা দৃশ্যের মধ্যে ক্যামেরার অবস্থান বা দৃষ্টিভঙ্গি পরিবর্তন করতে চাই। ক্যামেরার এনিমেশন সাধারণত পজিশন, রোটেশন বা ফোকাস পয়েন্ট এর পরিবর্তন হতে পারে।

উদাহরণ: ক্যামেরা পজিশন এনিমেশন

// Canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");

// BabylonJS ইঞ্জিন তৈরি করা
var engine = new BABYLON.Engine(canvas, true);

// দৃশ্য তৈরি করা
var scene = new BABYLON.Scene(engine);

// ক্যামেরা তৈরি করা
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

// ক্যামেরার পজিশন এনিমেশন তৈরি করা
var cameraAnimation = new BABYLON.Animation("cameraAnimation", "position.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

// ক্যামেরা পজিশন কিভাবে পরিবর্তিত হবে
var cameraKeys = [];
cameraKeys.push({ frame: 0, value: 0 });
cameraKeys.push({ frame: 100, value: 5 }); // ক্যামেরা এক্স-অক্ষের উপর 5 ইউনিট সরবে

cameraAnimation.setKeys(cameraKeys);

// ক্যামেরায় এনিমেশন অ্যাপ্লাই করা
camera.animations.push(cameraAnimation);

// দৃশ্যে এনিমেশন রান করার জন্য
scene.beginAnimation(camera, 0, 100, true);

// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
    scene.render();
});

// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
    engine.resize();
});

কোড ব্যাখ্যা:

• position.x: ক্যামেরার x অবস্থান পরিবর্তন করা হচ্ছে। এটি ক্যামেরার অবস্থানকে এক জায়গা থেকে অন্য জায়গায় সরিয়ে নেবে।
• camera.animations.push(cameraAnimation): ক্যামেরায় এনিমেশন অ্যাপ্লাই করা হয়েছে।
• scene.beginAnimation(camera): ক্যামেরার এনিমেশন শুরু করা হয়েছে।

৩. Light (আলো) এর এনিমেশন

এনিমেটেড আলোর উৎস ব্যবহার করে দৃশ্যের আলো এবং ছায়া পরিবর্তন করা যায়, যা দৃশ্যের আবহাওয়ার পরিবর্তন বা কোনো বিশেষ পরিস্থিতি তৈরি করতে সাহায্য করে।

উদাহরণ: পয়েন্ট লাইটের ইনটেনসিটি (শক্তি) এনিমেশন

// Canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");

// BabylonJS ইঞ্জিন তৈরি করা
var engine = new BABYLON.Engine(canvas, true);

// দৃশ্য তৈরি করা
var scene = new BABYLON.Scene(engine);

// ক্যামেরা তৈরি করা
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

// পয়েন্ট লাইট তৈরি করা
var pointLight = new BABYLON.PointLight("pointLight", BABYLON.Vector3.Zero(), scene);

// পয়েন্ট লাইটের ইনটেনসিটি এনিমেশন তৈরি করা
var lightAnimation = new BABYLON.Animation("lightAnimation", "intensity", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

// লাইটের ইনটেনসিটি কিভাবে পরিবর্তিত হবে
var lightKeys = [];
lightKeys.push({ frame: 0, value: 1 });
lightKeys.push({ frame: 100, value: 3 }); // লাইটের শক্তি 1 থেকে 3 পর্যন্ত পরিবর্তিত হবে

lightAnimation.setKeys(lightKeys);

// লাইটে এনিমেশন অ্যাপ্লাই করা
pointLight.animations.push(lightAnimation);

// দৃশ্যে এনিমেশন রান করার জন্য
scene.beginAnimation(pointLight, 0, 100, true);

// দৃশ্যে এনিমেশন চালানো
engine.runRenderLoop(function () {
    scene.render();
});

// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
    engine.resize();
});

কোড ব্যাখ্যা:

• intensity: আলোতে শক্তি বা ইনটেনসিটি পরিবর্তন করা হচ্ছে। এটি দৃশ্যে আলো কতটা উজ্জ্বল হবে তা নিয়ন্ত্রণ করে।
• lightKeys.push(): ইনটেনসিটির কিভাবে পরিবর্তন হবে তা নির্ধারণ করা হয়েছে, যেখানে প্রথমে এটি 1 এবং পরে 3 হবে।
• pointLight.animations.push(lightAnimation): পয়েন্ট লাইটে এনিমেশন অ্যাপ্লাই করা হয়েছে।

সারাংশ

BabylonJS-এ Mesh, Camera এবং Light এর এনিমেশন ব্যবহারের মাধ্যমে আপনি একটি 3D দৃশ্যের গতিশীলতা এবং আকর্ষণ বৃদ্ধি করতে পারেন। Mesh-এ রোটেশন, স্কেল বা পজিশন পরিবর্তন, ক্যামেরা পজিশন বা দৃষ্টিভঙ্গি পরিবর্তন এবং আলো শক্তির পরিবর্তন করা সহজ এবং কার্যকর। এই এনিমেশনগুলো ব্যবহার করে আপনি আরও জীবন্ত এবং ইন্টারঅ্যাকটিভ 3D অভিজ্ঞতা তৈরি করতে পারবেন।