BabylonJS তে Physics ব্যবহার করে 3D অবজেক্টের মধ্যে বাস্তবসম্মত গতিবিধি এবং ইন্টারঅ্যাকশন তৈরি করা যায়। যেমন, বাউন্সিং (bouncing) বা স্লাইডিং (sliding) ইফেক্ট প্রয়োগ করতে পারবেন, যা 3D গেম এবং সিমুলেশনগুলির জন্য অত্যন্ত গুরুত্বপূর্ণ। Physics ইঞ্জিন ব্যবহার করলে, আপনি অবজেক্টগুলিকে আরো বাস্তবসম্মতভাবে মুভ করাতে পারেন এবং বিভিন্ন ধরনের শারীরিক সংঘর্ষ বা প্রতিক্রিয়া দেখতে পারবেন।
BabylonJS তে Physics যোগ করতে আমরা সাধারণত Cannon.js বা Oimo.js মতো ফিজিক্স ইঞ্জিন ব্যবহার করি।
Physics-ভিত্তিক Interaction সেটআপ
১. Physics ইঞ্জিন সেটআপ
প্রথমে Physics ইঞ্জিন সক্রিয় করতে হবে এবং Physics World তৈরি করতে হবে, যাতে আমরা ফিজিক্স সম্পর্কিত ইন্টারঅ্যাকশন (যেমন বাউন্সিং, স্লাইডিং) করতে পারি।
২. Physics ইঞ্জিন ব্যবহার করার জন্য Cannon.js ইনস্টল করা
আমরা Cannon.js ফিজিক্স ইঞ্জিন ব্যবহার করব, যা BabylonJS এর সাথে খুব ভালো কাজ করে।
স্টেপ ১: Cannon.js যুক্ত করা
CDN থেকে Cannon.js লোড করতে নিম্নলিখিত কোডটি HTML ফাইলে যুক্ত করুন:
<script src="https://cdn.babylonjs.com/cannon.js"></script>
৩. বাউন্সিং (Bouncing) ইফেক্ট
বাউন্সিং একটি সাধারণ শারীরিক প্রক্রিয়া যেখানে একটি অবজেক্ট যখন অন্য কোনো পৃষ্ঠের সাথে সংঘর্ষ করে, তখন সেটি ফিরে আসে বা "বাউন্স" করে। এই ইফেক্ট সিমুলেট করতে Physics ইঞ্জিনে restitution প্রোপার্টি ব্যবহার করা হয়।
বাউন্সিং ইফেক্ট ইমপ্লিমেন্ট করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BabylonJS Physics - Bouncing Example</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/cannon.js"></script>
</head>
<body>
<canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
<script>
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
// Physics ইঞ্জিন সেটআপ
var gravityVector = new BABYLON.Vector3(0, -9.81, 0); // গ্র্যাভিটি
var physicsPlugin = new BABYLON.CannonJSPlugin();
scene.enablePhysics(gravityVector, physicsPlugin);
// ক্যামেরা
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
// আলোর উৎস
var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
// বক্স তৈরি
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
box.position.y = 5;
// বক্সের জন্য Physics প্রপার্টি
box.physicsImpostor = new BABYLON.PhysicsImpostor(box, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1, restitution: 0.7 }, scene);
// গ্রাউন্ড তৈরি
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 20, height: 20}, scene);
// গ্রাউন্ডের জন্য Physics প্রপার্টি
ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.GroundImpostor, { restitution: 0.7 }, scene);
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- PhysicsImpostor:
box.physicsImpostorএবংground.physicsImpostorব্যবহার করে ফিজিক্স প্রপার্টি যোগ করা হয়েছে।restitutionপ্রোপার্টি বাউন্সিং এর জন্য ব্যবহৃত হয়। 0.7 মানে হল যে, বক্সটি 70% শক্তি ফিরে পাবে এবং 30% শক্তি হারাবে। - GroundImpostor: গ্রাউন্ডের জন্য Physics impostor হিসাবে
GroundImpostorব্যবহার করা হয়েছে।
৪. স্লাইডিং (Sliding) ইফেক্ট
স্লাইডিং ইফেক্টে, একটি অবজেক্ট তার পৃষ্ঠের ওপর স্লাইড (এবং গড়ানো) করে। এই ইফেক্ট সিমুলেট করার জন্য friction প্রোপার্টি ব্যবহার করা হয়। একটি কম friction মান অবজেক্টকে দ্রুত স্লাইড করতে সহায়ক হয়, এবং উচ্চ friction মান অবজেক্টের গতিকে দমন করে।
স্লাইডিং ইফেক্ট ইমপ্লিমেন্ট করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BabylonJS Physics - Sliding Example</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/cannon.js"></script>
</head>
<body>
<canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
<script>
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
// Physics ইঞ্জিন সেটআপ
var gravityVector = new BABYLON.Vector3(0, -9.81, 0);
var physicsPlugin = new BABYLON.CannonJSPlugin();
scene.enablePhysics(gravityVector, physicsPlugin);
// ক্যামেরা
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
// আলোর উৎস
var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
// বক্স তৈরি
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
box.position.y = 5;
// বক্সের জন্য Physics প্রপার্টি
box.physicsImpostor = new BABYLON.PhysicsImpostor(box, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1, friction: 0.1 }, scene);
// গ্রাউন্ড তৈরি
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 20, height: 20}, scene);
// গ্রাউন্ডের জন্য Physics প্রপার্টি
ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.GroundImpostor, { friction: 0.05 }, scene);
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- friction: বক্স এবং গ্রাউন্ডের জন্য friction প্রপার্টি নির্ধারণ করা হয়েছে।
friction: 0.1মানে কম ঘর্ষণ, ফলে বক্সটি স্লাইড করবে। গ্রাউন্ডের জন্য ঘর্ষণ কম করা হয়েছে (0.05) যাতে বক্সটি দ্রুত স্লাইড করে।
সারাংশ
- Bouncing: বাউন্সিং ইফেক্টের জন্য
restitutionপ্রোপার্টি ব্যবহার করা হয়, যা একটি অবজেক্টের প্রতিক্রিয়া নির্ধারণ করে, যখন তা অন্য অবজেক্টের সাথে সংঘর্ষ করে। - Sliding: স্লাইডিং ইফেক্টের জন্য
frictionপ্রোপার্টি ব্যবহার করা হয়, যা অবজেক্টের চলার গতির উপর প্রভাব ফেলে। কম ফ্রিকশনের মানে বেশি স্লাইডিং।
BabylonJS এ Physics ইঞ্জিন যোগ করে, আপনি 3D দৃশ্যে বাউন্সিং এবং স্লাইডিং এর মতো বাস্তবসম্মত ইন্টারঅ্যাকশন
তৈরি করতে পারেন।
Read more
