BabylonJS দিয়ে আপনার প্রথম 3D প্রজেক্ট তৈরি করা খুবই সহজ এবং মজার। এই গাইডে, আমরা একটি বেসিক 3D দৃশ্য তৈরি করব, যেখানে একটি বক্স থাকবে এবং সেটি ঘুরে দেখানো হবে। আপনি কেবল HTML, JavaScript এবং BabylonJS লাইব্রেরি ব্যবহার করে এটি তৈরি করবেন। চলুন শুরু করা যাক।
১. প্রজেক্ট ফোল্ডার তৈরি
প্রথমে একটি নতুন প্রজেক্ট ফোল্ডার তৈরি করুন এবং সেই ফোল্ডারের মধ্যে একটি HTML ফাইল তৈরি করুন। আপনি index.html নামে ফাইলটি রাখতে পারেন।
২. HTML ফাইল তৈরি
index.html ফাইলটি তৈরি করুন এবং নিচের কোডটি ব্যবহার করুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First BabylonJS Project</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
<canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
<script>
// canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");
// BabylonJS এর ইঞ্জিন তৈরি করা
var engine = new BABYLON.Engine(canvas, true);
// BabylonJS দৃশ্য তৈরি করা
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();
});
// ব্রাউজারের আকার পরিবর্তন হলে, BabylonJS আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোডের ব্যাখ্যা:
- HTML Structure:
index.htmlফাইলের মধ্যে আমরা একটি<canvas>ট্যাগ তৈরি করেছি, যেখানে BabylonJS 3D দৃশ্য রেন্ডার হবে। - BabylonJS লাইব্রেরি: আমরা
https://cdn.babylonjs.com/babylon.jsCDN থেকে BabylonJS লাইব্রেরি লোড করেছি, যাতে কোনো অতিরিক্ত ইন্সটলেশন প্রয়োজন না হয়। - Engine ও Scene তৈরি:
BABYLON.Engineব্যবহার করে 3D রেন্ডারিং ইঞ্জিন তৈরি করা হয়েছে, এবংBABYLON.Sceneদিয়ে একটি নতুন 3D দৃশ্য তৈরি করা হয়েছে। - Camera:
ArcRotateCameraব্যবহার করে একটি ক্যামেরা তৈরি করা হয়েছে যা ব্যবহারকারীর জন্য দৃশ্যটি ঘুরিয়ে দেখানোর সুবিধা দেবে। - Light:
HemisphericLightব্যবহার করে একটি আলোর উৎস তৈরি করা হয়েছে যা 3D দৃশ্যে আলো ছড়িয়ে দিবে। - Mesh (বক্স):
BABYLON.MeshBuilder.CreateBoxদিয়ে একটি বক্স তৈরি করা হয়েছে যা 3D দৃশ্যে দৃশ্যমান হবে। - Render Loop:
engine.runRenderLoopদিয়ে রেন্ডারিং শুরু করা হয়েছে, যাতে দৃশ্যটি প্রতি ফ্রেমে আপডেট হয়। - Resize Event: ব্রাউজারের আকার পরিবর্তন হলে দৃশ্যটি সঠিকভাবে রিসাইজ করতে
engine.resize()ব্যবহৃত হয়েছে।
৩. ব্রাউজারে প্রজেক্ট পরীক্ষা করা
আপনার index.html ফাইলটি একটি ব্রাউজারে খুলুন। আপনি একটি 3D বক্স দেখতে পাবেন, এবং আপনি মাউসের মাধ্যমে এটি ঘুরিয়ে দেখতে পারবেন।
কিছু অতিরিক্ত ফিচার যোগ করা:
আপনার প্রথম প্রজেক্টে কিছু অতিরিক্ত ফিচার যোগ করে দেখতে পারেন:
- অ্যানিমেশন: বক্সটির মধ্যে অ্যানিমেশন যোগ করতে পারেন, যাতে এটি ঘোরে বা অন্য কিছু করে।
- আরও 3D অবজেক্ট: বক্সের পাশাপাশি অন্য 3D অবজেক্ট যেমন গোলক (sphere), পিরামিড (pyramid) ইত্যাদি যোগ করতে পারেন।
- ব্যাকগ্রাউন্ড: দৃশ্যের ব্যাকগ্রাউন্ড কাস্টমাইজ করতে পারেন, যেমন কোনো ছবি বা সাদা ব্যাকগ্রাউন্ড।
৪. অতিরিক্ত টিপস
- DevTools: যদি কোনো সমস্যা হয়, তাহলে ব্রাউজারের ডেভেলপার টুলস (F12) ব্যবহার করে কনসোল লগ চেক করতে পারেন।
- টেক্সচারিং ও লাইটিং: টেক্সচার এবং লাইটিংয়ের সাহায্যে আপনার 3D দৃশ্য আরও আকর্ষণীয় করতে পারেন।
- ডকুমেন্টেশন: BabylonJS এর অফিসিয়াল ডকুমেন্টেশন (https://doc.babylonjs.com/) দেখলে আরও অনেক ফিচার এবং উদাহরণ পাবেন।
সারাংশ
এটি ছিল আপনার প্রথম BabylonJS প্রজেক্ট তৈরি করার প্রক্রিয়া। আমরা একটি সিম্পল 3D বক্স তৈরি করেছি এবং সেটি ব্রাউজারে রেন্ডার করেছি। এই প্রজেক্টের মাধ্যমে আপনি BabylonJS-এর মূল ফিচারগুলো ব্যবহার করতে শিখলেন, এবং এই টেকনোলজি ব্যবহার করে আরও উন্নত 3D অ্যাপ্লিকেশন তৈরি করতে পারবেন।
Read more
