BabylonJS ব্যবহার করতে শুরু করার জন্য প্রথমে এটি আপনার প্রকল্পে সেটআপ করতে হবে। ওয়েব ব্রাউজারে 3D গ্রাফিক্স রেন্ডার করতে, আপনাকে কিছু প্রাথমিক সেটআপ এবং কনফিগারেশন করতে হবে। এই গাইডে, আপনি শিখবেন কিভাবে একটি সাধারণ BabylonJS প্রকল্প তৈরি করবেন এবং আপনার প্রথম 3D দৃশ্য তৈরি করবেন।
BabylonJS সেটআপ
১. HTML ফাইল তৈরি
BabylonJS ব্যবহার করতে প্রথমে একটি HTML ফাইল তৈরি করতে হবে, যেখানে আপনার JavaScript কোড এবং BabylonJS লাইব্রেরি ইম্পোর্ট করা হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BabylonJS Example</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
<canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
<script>
// আপনার BabylonJS কোড এখানে লিখুন
</script>
</body>
</html>
এই কোডে, আমরা babylon.js লাইব্রেরিটি CDN (Content Delivery Network) থেকে লোড করছি এবং একটি <canvas> ট্যাগ ব্যবহার করছি যেখানে 3D দৃশ্য রেন্ডার হবে।
২. JavaScript কোড লেখা
এখন আমরা JavaScript কোড লিখব, যা BabylonJS ইঞ্জিন এবং একটি 3D দৃশ্য তৈরি করবে। নিচে একটি সাধারণ উদাহরণ দেওয়া হলো।
<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>
কোডের ব্যাখ্যা:
- Engine:
BABYLON.Engineঅবজেক্টটি তৈরি করে যা 3D দৃশ্য রেন্ডার করতে সহায়তা করবে। - Scene:
BABYLON.Sceneঅবজেক্টটি আপনার 3D দৃশ্যের মূল উপাদান। এখানে সব অবজেক্ট, ক্যামেরা, লাইট ইত্যাদি থাকবে। - Camera: এখানে একটি
ArcRotateCameraব্যবহার করা হয়েছে যা 3D দৃশ্যকে ঘুরিয়ে দেখার সুবিধা দেয়। - Light:
HemisphericLightব্যবহার করা হয়েছে যা সাধারণ আলোর উৎস তৈরি করে। - Mesh: একটি 3D অবজেক্ট তৈরি করতে
MeshBuilder.CreateBoxব্যবহার করা হয়েছে, যা একটি বক্স তৈরি করবে।
৩. ব্রাউজারে রান করা
আপনার HTML এবং JavaScript কোড তৈরি করার পর, এটি একটি ওয়েব ব্রাউজারে চালিয়ে দেখতে পারেন। আপনার 3D বক্সটি দেখানোর জন্য ব্রাউজারে ফাইলটি খুললেই, BabylonJS আপনার তৈরি দৃশ্য রেন্ডার করবে।
BabylonJS পরিবেশ তৈরি করার জন্য কিছু টিপস
CDN এবং লোকাল ফাইলের ব্যবহার
আপনি চাইলে BabylonJS লাইব্রেরিটি CDN (যেমন, https://cdn.babylonjs.com/babylon.js) থেকে লোড করতে পারেন অথবা এটি আপনার লোকাল ফোল্ডারে ডাউনলোড করে ব্যবহার করতে পারেন। লোকাল ফাইল ব্যবহার করলে, আপনাকে .js ফাইলটি আপনার প্রকল্পের ডিরেক্টরিতে রাখতে হবে এবং সঠিকভাবে ইম্পোর্ট করতে হবে।
উন্নত ফিচার যুক্ত করা
প্রাথমিক পরিবেশ তৈরি করার পর, আপনি চাইলে আরও উন্নত বৈশিষ্ট্য যোগ করতে পারেন, যেমন:
- অ্যানিমেশন: 3D অবজেক্টগুলির জন্য বিভিন্ন ধরনের অ্যানিমেশন যোগ করতে পারেন।
- মডেল ইম্পোর্ট: BabylonJS দিয়ে আপনি 3D মডেল ইম্পোর্ট করে সেগুলি দৃশ্যে যুক্ত করতে পারেন।
- ফিজিক্স:
Cannon.jsবাOimo.jsইঞ্জিন ব্যবহার করে ফিজিক্স সিমুলেশন যোগ করতে পারেন।
ব্রাউজার সাপোর্ট
BabylonJS HTML5 এবং WebGL এর উপর কাজ করে, তাই এটি আধুনিক ব্রাউজার যেমন Chrome, Firefox, Safari, এবং Edge-এ সঠিকভাবে কাজ করবে। তবে, কিছু পুরোনো ব্রাউজারে গ্রাফিক্স সমস্যা হতে পারে, তাই নিশ্চিত করুন যে আপনার ব্যবহারকারী সঠিক ব্রাউজার ব্যবহার করছেন।
সারাংশ
BabylonJS সেটআপ করা বেশ সহজ এবং আপনি খুব দ্রুত 3D দৃশ্য তৈরি করতে পারবেন। প্রথমে একটি HTML ফাইল তৈরি করে সেখানে BabylonJS লাইব্রেরি ইম্পোর্ট করতে হবে, তারপর JavaScript দিয়ে 3D দৃশ্য তৈরি করতে হবে। এর পর, আপনি 3D অবজেক্ট, ক্যামেরা, লাইট এবং এনিমেশনসহ বিভিন্ন বৈশিষ্ট্য যোগ করে আপনার ওয়েব অ্যাপ্লিকেশন বা গেম তৈরি করতে পারেন।
BabylonJS ব্যবহার করতে, আপনি বিভিন্ন পদ্ধতি অনুসরণ করতে পারেন। এখানে আমরা CDN, npm এবং Yarn এর মাধ্যমে BabylonJS সেটআপ করার পদ্ধতি বিস্তারিতভাবে আলোচনা করব। এসব পদ্ধতি আপনাকে আপনার প্রোজেক্টের প্রয়োজন অনুযায়ী দ্রুত এবং সহজে BabylonJS ইঞ্জিন ইন্টিগ্রেট করতে সাহায্য করবে।
CDN এর মাধ্যমে BabylonJS সেটআপ
১. CDN ব্যবহার করার সুবিধা
CDN (Content Delivery Network) থেকে BabylonJS লোড করলে আপনাকে কোনো অতিরিক্ত প্যাকেজ ইন্সটল করতে হবে না। শুধু HTML ফাইলের মধ্যে <script> ট্যাগের মাধ্যমে এটি ইম্পোর্ট করা হয়। এটি দ্রুত সেটআপ এবং সাধারণ প্রোজেক্টের জন্য আদর্শ।
২. CDN সেটআপ
CDN এর মাধ্যমে BabylonJS সেটআপ করতে, নিচের HTML কোডটি ব্যবহার করুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BabylonJS Example</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
<canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
<script>
// BabylonJS কোড এখানে লিখুন
</script>
</body>
</html>
কোড ব্যাখ্যা:
<script src="https://cdn.babylonjs.com/babylon.js"></script>এই লাইনটি BabylonJS লাইব্রেরি CDN থেকে লোড করে।- এরপর আপনি JavaScript কোড দিয়ে 3D দৃশ্য তৈরি করতে পারেন।
এটি খুব দ্রুত শুরু করার জন্য উপযোগী এবং ছোট প্রকল্প বা টেস্টিংয়ের জন্য উপযুক্ত।
npm এর মাধ্যমে BabylonJS সেটআপ
১. npm ব্যবহার করার সুবিধা
npm (Node Package Manager) একটি জনপ্রিয় প্যাকেজ ম্যানেজার যা JavaScript ডেভেলপমেন্টের জন্য ব্যবহৃত হয়। npm ব্যবহার করলে আপনি BabylonJS এর নতুন ভার্সন এবং নির্ভরশীলতা সহজে ম্যানেজ করতে পারবেন। এটি বড় প্রকল্প এবং পেশাদার ডেভেলপমেন্টের জন্য উপযুক্ত।
২. npm দিয়ে BabylonJS ইনস্টল করা
BabylonJS npm প্যাকেজ ইনস্টল করতে নিচের স্টেপগুলো অনুসরণ করুন:
স্টেপ ১: npm ইনস্টলেশন
প্রথমে আপনার প্রোজেক্ট ফোল্ডারে গিয়ে npm init কমান্ড দিয়ে একটি নতুন Node.js প্রোজেক্ট তৈরি করুন (যদি আপনার প্রোজেক্টটি না থাকে):
npm init -y
স্টেপ ২: BabylonJS ইনস্টল করা
এখন BabylonJS ইনস্টল করার জন্য নিচের কমান্ডটি চালান:
npm install babylonjs
স্টেপ ৩: JavaScript ফাইলে BabylonJS ব্যবহার করা
ইন্সটল করার পর, আপনার JavaScript ফাইলে BabylonJS ইঞ্জিন এবং তার বিভিন্ন ফিচার ব্যবহার করতে পারেন:
import * as BABYLON from 'babylonjs';
// 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();
});
Yarn এর মাধ্যমে BabylonJS সেটআপ
১. Yarn ব্যবহার করার সুবিধা
Yarn হল একটি প্যাকেজ ম্যানেজার যা npm এর বিকল্প হিসেবে ব্যবহৃত হয়। এটি প্যাকেজ ইন্সটল করার জন্য দ্রুত এবং নির্ভরযোগ্য উপায় প্রদান করে। Yarn বিশেষ করে ডেভেলপারদের জন্য দ্রুত প্যাকেজ ম্যানেজমেন্ট এবং নির্ভরশীলতা সমাধান প্রদান করে।
২. Yarn দিয়ে BabylonJS ইনস্টল করা
Yarn দিয়ে BabylonJS ইনস্টল করার জন্য নিম্নলিখিত পদক্ষেপগুলো অনুসরণ করুন:
স্টেপ ১: Yarn ইনস্টলেশন
প্রথমে Yarn ইনস্টল করতে হবে (যদি আপনার সিস্টেমে না থাকে):
npm install -g yarn
স্টেপ ২: BabylonJS ইনস্টল করা
এখন Yarn দিয়ে BabylonJS ইনস্টল করতে নিচের কমান্ডটি চালান:
yarn add babylonjs
স্টেপ ৩: JavaScript ফাইলে BabylonJS ব্যবহার করা
Yarn দিয়ে ইনস্টল করার পর, আপনি JavaScript ফাইলে BabylonJS ব্যবহার করতে পারবেন ঠিক একইভাবে যেভাবে npm দিয়ে করা হয়।
import * as BABYLON from 'babylonjs';
// 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();
});
সারাংশ
BabylonJS সেটআপ করার জন্য তিনটি প্রধান পদ্ধতি রয়েছে: CDN, npm এবং Yarn।
- CDN পদ্ধতি খুব সহজ এবং দ্রুত সেটআপ করার জন্য উপযুক্ত, বিশেষত ছোট প্রোজেক্ট বা পরীক্ষার জন্য।
- npm এবং Yarn পদ্ধতি বড় প্রকল্প এবং পেশাদার ডেভেলপমেন্টের জন্য উপযোগী, যেখানে প্যাকেজ ম্যানেজমেন্ট এবং নির্ভরশীলতা ব্যবস্থাপনা গুরুত্বপূর্ণ।
আপনার প্রোজেক্টের চাহিদা অনুযায়ী যেকোনো পদ্ধতি ব্যবহার করে BabylonJS ইঞ্জিন সেটআপ করতে পারেন।
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 অ্যাপ্লিকেশন তৈরি করতে পারবেন।
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 অবজেক্ট, ক্যামেরা, লাইট, অ্যানিমেশন, এবং টেক্সচারসহ আরও অনেক ফিচার যোগ করতে পারবেন। এভাবে আপনি ওয়েব অ্যাপ্লিকেশন বা গেম তৈরি করতে পারেন যা আধুনিক ব্রাউজারে সরাসরি চলবে।
ব্যাবলনজেএস (BabylonJS) একটি শক্তিশালী 3D ইঞ্জিন, এবং এটি দিয়ে ওয়েব ব্রাউজারে উন্নত গ্রাফিক্স তৈরি করা যায়। Visual Studio Code (VS Code) বা অন্য কোনো IDE (Integrated Development Environment) ব্যবহার করে BabylonJS প্রজেক্ট তৈরি করা অত্যন্ত সহজ। এখানে আমরা VS Code ব্যবহার করে BabylonJS প্রজেক্ট সেটআপ করার পুরো প্রক্রিয়া আলোচনা করব। এই সেটআপ প্রক্রিয়ায় আপনি আপনার প্রকল্পের কোড লিখবেন, লাইব্রেরি ইম্পোর্ট করবেন এবং প্রকল্পটি রান করবেন।
১. Visual Studio Code ইনস্টলেশন
প্রথমে, আপনার সিস্টেমে Visual Studio Code ইনস্টল করতে হবে। যদি এটি ইনস্টল না থাকে, তাহলে Visual Studio Code অফিসিয়াল ওয়েবসাইট থেকে এটি ডাউনলোড এবং ইনস্টল করতে পারেন।
২. BabylonJS প্রজেক্ট তৈরি
১. একটি নতুন ফোল্ডার তৈরি করুন
প্রথমে আপনার কম্পিউটারে একটি নতুন ফোল্ডার তৈরি করুন যেখানে আপনি আপনার BabylonJS প্রজেক্ট রাখবেন। আপনি এই ফোল্ডারটি যেকোনো নাম দিতে পারেন, যেমন babylon-project।
২. Visual Studio Code খুলুন
VS Code খুলে, File > Open Folder এ গিয়ে আপনি যে ফোল্ডারটি তৈরি করেছেন সেটি ওপেন করুন।
৩. প্রজেক্টের জন্য HTML এবং JavaScript ফাইল তৈরি
১. HTML ফাইল তৈরি
ফোল্ডারে একটি index.html ফাইল তৈরি করুন। এই ফাইলটিতে আপনার BabylonJS কোড থাকবে। নিচের কোডটি দিয়ে শুরু করতে পারেন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>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>
২. JavaScript ফাইল তৈরি (যদি আলাদা করতে চান)
আপনি চাইলে JavaScript কোড আলাদাভাবে একটি .js ফাইলে রাখতে পারেন। উদাহরণস্বরূপ, app.js নামের একটি ফাইল তৈরি করুন এবং HTML ফাইলে এটি লিঙ্ক করুন:
app.js:
// 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();
});
HTML ফাইলে লিঙ্ক যোগ করা:
<script src="app.js"></script>
৪. লাইভ সার্ভার চালানো
আপনার প্রজেক্টে লাইভ প্রিভিউ দেখতে, Visual Studio Code-এর Live Server এক্সটেনশন ব্যবহার করা যেতে পারে। এটি আপনার প্রজেক্টে কোন পরিবর্তন করলে তা স্বয়ংক্রিয়ভাবে ব্রাউজারে দেখাবে।
১. Live Server ইনস্টল করা
- Visual Studio Code খুলুন।
- Extensions সেকশনে গিয়ে Live Server সার্চ করুন।
- Install বাটনে ক্লিক করে এক্সটেনশনটি ইনস্টল করুন।
২. Live Server চালানো
index.html ফাইলটি ওপেন করার পর, নিচের দিকে ডান ক্লিক করুন এবং "Open with Live Server" অপশনটি সিলেক্ট করুন। এখন আপনার ব্রাউজারে প্রকল্পটি দেখতে পারবেন।
৫. npm বা Yarn দিয়ে BabylonJS ইনস্টল (অপশনাল)
আপনি যদি npm বা Yarn ব্যবহার করে BabylonJS প্রজেক্টটি পরিচালনা করতে চান, তাহলে এই স্টেপটি অনুসরণ করুন:
১. npm দিয়ে BabylonJS ইনস্টল
প্রথমে, আপনার প্রজেক্ট ফোল্ডারে গিয়ে টার্মিনাল খুলুন এবং নিচের কমান্ডটি দিন:
npm init -y
npm install babylonjs
এটি আপনার প্রজেক্টে BabylonJS প্যাকেজ ইন্সটল করবে।
২. JavaScript ফাইলে ইম্পোর্ট করা
এখন, আপনার app.js ফাইলে BabylonJS ইম্পোর্ট করতে হবে:
import * as BABYLON from 'babylonjs';
// বাকি কোড এখানেই থাকবে...
এটি ব্যবহার করতে Webpack বা Parcel এর মতো প্যাকেজ বান্ডলার প্রয়োজন হবে, যাতে ES6 মডিউলগুলোর সঠিকভাবে প্যাকেজিং হয়। তবে, শুরুতেই আপনি CDN ব্যবহারের মাধ্যমে সরাসরি কোড লিখতে পারেন।
৬. প্রকল্পে আরও ফিচার যোগ করা
- অ্যানিমেশন: আপনি আপনার 3D অবজেক্টের উপর অ্যানিমেশন যোগ করতে পারেন, যেমন রোটেশন, স্কেলিং, বা স্থানান্তর।
- টেক্সচার: 3D অবজেক্টগুলিতে টেক্সচার যোগ করে দৃশ্যকে আরও বাস্তবসম্মত করতে পারেন।
- মডেল ইম্পোর্ট: BabylonJS দিয়ে আপনি 3D মডেলগুলি ইম্পোর্ট করতে পারেন (যেমন
.obj,.glbফাইল)। - ইন্টারঅ্যাকশন: ব্যবহারকারীর ইন্টারঅ্যাকশন হিসেবে 3D অবজেক্টগুলির সাথে ক্লিক বা ড্র্যাগ-এন্ড-ড্রপ ইফেক্ট তৈরি করতে পারেন।
সারাংশ
Visual Studio Code (VS Code) বা অন্য কোনো IDE ব্যবহার করে BabylonJS প্রজেক্ট তৈরি করা অত্যন্ত সহজ। এই গাইডে, আমরা দেখিয়েছি কিভাবে একটি HTML ফাইল এবং JavaScript কোডের মাধ্যমে একটি সিম্পল 3D দৃশ্য তৈরি করা যায়। আমরা CDN ব্যবহারের মাধ্যমে লাইব্রেরি লোড করার পাশাপাশি, npm বা Yarn ব্যবহার করে প্যাকেজ ইনস্টল করার উপায়ও দেখেছি। Visual Studio Code এর মাধ্যমে আপনার 3D প্রজেক্টে কোড লেখা এবং লাইভ সার্ভারের মাধ্যমে রিয়েল-টাইম প্রিভিউ দেখাও সম্ভব।
