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 ইঞ্জিন সেটআপ করতে পারেন।
Read more
