BabylonJS একটি শক্তিশালী ওপেন সোর্স 3D গ্রাফিক্স ইঞ্জিন যা HTML5 এবং JavaScript ব্যবহার করে ওয়েব পেজে 3D কন্টেন্ট তৈরি করতে সাহায্য করে। এই গাইডে, আমরা HTML5 এবং JavaScript দিয়ে BabylonJS কিভাবে ওয়েব অ্যাপ্লিকেশন বা গেমে ইন্টিগ্রেট করতে হয়, তা শিখবো।
HTML5 এবং JavaScript দিয়ে BabylonJS ইন্টিগ্রেশন
১. HTML5 ফাইল তৈরি
প্রথমে, একটি নতুন HTML5 ফাইল তৈরি করুন এবং BabylonJS লাইব্রেরি যুক্ত করুন। HTML5 ওয়েব পেজে BabylonJS ব্যবহার করার জন্য আপনাকে একটি <canvas> ট্যাগ ব্যবহার করতে হবে, যেখানে 3D দৃশ্য রেন্ডার হবে।
নিচে একটি সাধারণ উদাহরণ দেওয়া হলো:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BabylonJS with HTML5</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
<!-- 3D দৃশ্যের জন্য Canvas -->
<canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
<script>
// 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 light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
scene.render();
});
// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোডের ব্যাখ্যা:
- Canvas Element: এখানে
<canvas>ট্যাগ ব্যবহার করা হয়েছে, যেখানে 3D দৃশ্য রেন্ডার হবে। এটি এক ধরনের HTML5 উপাদান যা গ্রাফিক্স ডিসপ্লে করার জন্য ব্যবহৃত হয়। - BabylonJS Library:
https://cdn.babylonjs.com/babylon.jsথেকে লাইব্রেরি লোড করা হয়েছে, যা BabylonJS ইঞ্জিন ও ফিচারগুলোর মূল অংশ। - Engine:
BABYLON.Engineদিয়ে BabylonJS ইঞ্জিন তৈরি করা হয়, যা 3D দৃশ্য রেন্ডার করতে ব্যবহৃত হয়। - Scene:
BABYLON.Sceneঅবজেক্ট তৈরি করা হয়, যা 3D দৃশ্যের সমস্ত উপাদান ধারণ করে। - Camera:
BABYLON.ArcRotateCameraদিয়ে একটি ক্যামেরা তৈরি করা হয়, যা ব্যবহারকারীকে দৃশ্যটি ঘুরিয়ে দেখানোর সুযোগ দেয়। - Light:
BABYLON.HemisphericLightদিয়ে একটি সাধারণ আলোর উৎস তৈরি করা হয়েছে যা দৃশ্যে আলো প্রদান করে। - Mesh (বক্স):
BABYLON.MeshBuilder.CreateBoxদিয়ে একটি বক্স তৈরি করা হয়েছে যা দৃশ্যে দৃশ্যমান হবে। - Render Loop:
engine.runRenderLoopফাংশনটি ব্যবহার করা হয়েছে যাতে দৃশ্যটি প্রতি ফ্রেমে রেন্ডার হয়।
২. JavaScript কোডের মাধ্যমে ইন্টিগ্রেশন
JavaScript দিয়ে আপনি 3D দৃশ্যকে আরও ইন্টারেক্টিভ এবং ডাইনামিক করতে পারেন। BabylonJS এর মাধ্যমে বিভিন্ন ফিচার যেমন মডেল লোড, অ্যানিমেশন, এবং ইন্টারঅ্যাকশন যোগ করা যায়।
উদাহরণ: 3D বক্স ঘোরানো (Rotation Animation)
<script>
// 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 light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
// বক্সের অ্যানিমেশন তৈরি করা (ঘোরানো)
var rotateAnimation = new BABYLON.Animation("rotateBox", "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);
// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
scene.render();
});
// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
engine.resize();
});
// অ্যানিমেশন শুরু করা
scene.beginAnimation(box, 0, 100, true);
</script>
কোডের ব্যাখ্যা:
- Animation:
BABYLON.Animationব্যবহার করে বক্সটির ঘোরানোর অ্যানিমেশন তৈরি করা হয়েছে। এখানেrotation.yফিচারটি ব্যবহার করা হয়েছে, যা বক্সের Y-axis এ ঘূর্ণন ঘটায়। - Animation Keys:
setKeysফাংশনের মাধ্যমে অ্যানিমেশনের কীগুলি সেট করা হয়েছে। 0 ফ্রেমে বক্সটির রোটেশন 0 এবং 100 ফ্রেমে এটি 360 ডিগ্রি (Math.PI * 2) ঘুরবে। - Begin Animation:
scene.beginAnimationদিয়ে অ্যানিমেশনটি শুরু করা হয়েছে।
৩. টেক্সচার এবং ম্যাটেরিয়াল যোগ করা
আপনি 3D মডেলগুলোকে আরও জীবন্ত করতে টেক্সচার এবং ম্যাটেরিয়ালও যোগ করতে পারেন।
// বক্সের জন্য ম্যাটেরিয়াল তৈরি করা
var material = new BABYLON.StandardMaterial("boxMaterial", scene);
material.diffuseColor = new BABYLON.Color3(1, 0, 0); // রেড
// বক্সে ম্যাটেরিয়াল অ্যাসাইন করা
box.material = material;
এই কোডে, একটি নতুন StandardMaterial তৈরি করা হয়েছে এবং সেটি বক্সে অ্যাসাইন করা হয়েছে। এর ফলে বক্সটির রঙ হবে লাল।
সারাংশ
HTML5 এবং JavaScript ব্যবহার করে BabylonJS ইন্টিগ্রেট করা খুবই সহজ এবং দ্রুত। আপনি HTML5 এর <canvas> উপাদান ব্যবহার করে BabylonJS ইঞ্জিন এবং দৃশ্য তৈরি করতে পারেন। JavaScript এর মাধ্যমে আপনি বিভিন্ন 3D অবজেক্ট, ক্যামেরা, লাইট, অ্যানিমেশন, এবং টেক্সচারসহ আরও অনেক ফিচার যোগ করতে পারবেন। এভাবে আপনি ওয়েব অ্যাপ্লিকেশন বা গেম তৈরি করতে পারেন যা আধুনিক ব্রাউজারে সরাসরি চলবে।
Read more
