ব্যাবলনজেএস (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 প্রজেক্টে কোড লেখা এবং লাইভ সার্ভারের মাধ্যমে রিয়েল-টাইম প্রিভিউ দেখাও সম্ভব।
Read more
