BabylonJS একটি শক্তিশালী 3D গ্রাফিক্স ইঞ্জিন যা দিয়ে আপনি ওয়েবভিত্তিক 3D অ্যাপ্লিকেশন তৈরি করতে পারেন। যখন আপনি একটি BabylonJS প্রজেক্ট তৈরি করেন, সেটি সাধারণত একটি static website হিসেবে ডিপ্লয় করা হয়, যেখানে HTML, CSS, JavaScript ফাইলগুলো ব্যবহারকারীকে ব্রাউজারে প্রদর্শন করা হয়।
এই গাইডে, আমরা দেখব কিভাবে একটি BabylonJS প্রজেক্টকে স্ট্যাটিক ওয়েবসাইট হিসেবে ডিপ্লয় করা যায়, বিভিন্ন হোস্টিং সার্ভিস ব্যবহার করে।
স্ট্যাটিক ওয়েবসাইট কি?
Static website এমন একটি ওয়েবসাইট যা সার্ভারে কোন ডাইনামিক কনটেন্ট তৈরি না করে, সোজাসুজি HTML, CSS, JavaScript ফাইল ব্যবহার করে ব্রাউজারে সরাসরি প্রদর্শিত হয়। এটি সাধারণত:
- কোন ডাটাবেস সংযুক্ত থাকে না।
- কনটেন্ট পরিবর্তন করার জন্য কোড আপডেট করতে হয়।
- দ্রুত এবং সিম্পল হয় কারণ সাইটের কনটেন্ট পূর্বনির্ধারিত থাকে।
BabylonJS ডিপ্লয়মেন্টের জন্য প্রস্তুতি
BabylonJS প্রজেক্টটি একটি স্ট্যাটিক ওয়েবসাইট হিসেবে ডিপ্লয় করার জন্য আপনাকে যে প্রস্তুতি নিতে হবে, তা নিচে বর্ণনা করা হল:
১. প্রজেক্ট তৈরি করা
প্রথমে, আপনার BabylonJS প্রজেক্টটি তৈরি করুন। উদাহরণ হিসেবে নিচে একটি সাধারণ প্রজেক্টের কোড দেওয়া হলো:
উদাহরণ: BabylonJS প্রজেক্ট (HTML + JS)
<!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>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%; }
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script>
var canvas = document.getElementById("renderCanvas");
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>
এটি একটি সিম্পল BabylonJS প্রজেক্ট যা একটি বক্স তৈরি করে এবং সেটি একটি ক্যামেরার মাধ্যমে প্রদর্শন করে।
২. ফাইল স্ট্রাকচার প্রস্তুত করা
আপনার প্রজেক্টের জন্য একটি সঠিক ফাইল স্ট্রাকচার তৈরি করুন, যেমন:
/project-folder
/index.html
/assets/
/textures/
/models/
/scripts/
/main.js
এখানে:
- index.html: আপনার প্রধান HTML ফাইল, যেখানে BabylonJS প্রজেক্টটি থাকবে।
- /assets: 3D মডেল বা টেক্সচারগুলো সংরক্ষণের জন্য।
- /scripts: আপনার JavaScript কোড এবং BabylonJS স্ক্রিপ্টগুলো সংরক্ষণ করতে।
BabylonJS ডিপ্লয় করার জন্য হোস্টিং সার্ভিস নির্বাচন
এখন আপনাকে প্রজেক্টটি হোস্ট করার জন্য একটি static website hosting সেবা ব্যবহার করতে হবে। জনপ্রিয় কিছু ফ্রি ও পেইড হোস্টিং সেবা নিচে দেওয়া হলো:
১. GitHub Pages
GitHub Pages একটি ফ্রি হোস্টিং সার্ভিস, যেখানে আপনি সরাসরি GitHub রিপোজিটরি থেকে আপনার স্ট্যাটিক ওয়েবসাইট হোস্ট করতে পারেন।
GitHub Pages এ BabylonJS ডিপ্লয় করার ধাপ:
- আপনার প্রজেক্ট ফোল্ডারটি একটি GitHub রিপোজিটরিতে আপলোড করুন।
- রিপোজিটরির Settings এ গিয়ে Pages সেকশনে Branch হিসেবে
mainঅথবাmasterসিলেক্ট করুন এবং /root সিলেক্ট করুন। - কিছু সময়ের মধ্যে আপনার সাইট https://username.github.io/repository-name/ লিঙ্কে হোস্ট হয়ে যাবে।
২. Netlify
Netlify একটি জনপ্রিয় এবং ফ্রি হোস্টিং প্ল্যাটফর্ম যা স্ট্যাটিক ওয়েবসাইট হোস্ট করতে ব্যবহৃত হয়। এটি স্বয়ংক্রিয় বিল্ড এবং ডিপ্লয়মেন্টের সুবিধাও দেয়।
Netlify এ BabylonJS ডিপ্লয় করার ধাপ:
- Netlify এ একটি অ্যাকাউন্ট তৈরি করুন।
- আপনার প্রজেক্টটি GitHub অথবা অন্য যে কোন ভ্যাকেটরি থেকে সংযুক্ত করুন।
- প্রজেক্ট ডিরেক্টরি সিলেক্ট করুন এবং ডিপ্লয় করুন।
- Netlify আপনার সাইটের একটি URL তৈরি করবে যেখানে আপনি আপনার BabylonJS ওয়েবসাইট অ্যাক্সেস করতে পারবেন।
৩. Vercel
Vercel একটি আরেকটি জনপ্রিয় এবং সহজ প্ল্যাটফর্ম যা স্ট্যাটিক ওয়েবসাইট হোস্টিংয়ের জন্য ব্যবহৃত হয়। এটি GitHub রিপোজিটরি থেকে সরাসরি সাইট ডিপ্লয় করতে সহায়তা করে।
Vercel এ BabylonJS ডিপ্লয় করার ধাপ:
- Vercel এ একটি অ্যাকাউন্ট তৈরি করুন।
- আপনার GitHub রিপোজিটরি সংযুক্ত করুন।
- প্রজেক্ট ডিপ্লয় করার পর Vercel আপনার সাইটের একটি URL তৈরি করবে যা দিয়ে আপনি আপনার BabylonJS প্রজেক্ট অ্যাক্সেস করতে পারবেন।
স্ট্যাটিক ওয়েবসাইট হিসেবে BabylonJS ডিপ্লয় করার অন্যান্য বিকল্প
১. Surge
Surge একটি সিম্পল এবং ফ্রি স্ট্যাটিক ওয়েবসাইট হোস্টিং প্ল্যাটফর্ম। এটি CLI (Command Line Interface) এর মাধ্যমে সাইট ডিপ্লয় করতে সাহায্য করে।
Surge এ BabylonJS ডিপ্লয় করার ধাপ:
Surge CLI ইনস্টল করুন।
npm install -g surgeআপনার প্রজেক্ট ডিরেক্টরিতে চলে যান এবং কমান্ড চালান:
surge- আপনার প্রজেক্ট ডিপ্লয় করার জন্য URL প্রদান করুন।
২. Firebase Hosting
Firebase Hosting Google এর একটি ফ্রি হোস্টিং সেবা, যা স্ট্যাটিক ওয়েবসাইট হোস্ট করার জন্য ব্যবহার করা যায়। Firebase এর সহজ সেটআপ এবং সুরক্ষিত পরিবেশ এটি জনপ্রিয় করে তোলে।
Firebase Hosting এ BabylonJS ডিপ্লয় করার ধাপ:
Firebase CLI ইনস্টল করুন।
npm install -g firebase-tools- Firebase প্রজেক্ট সেটআপ করুন এবং প্রজেক্ট ফোল্ডার নির্বাচন করুন।
firebase deployকমান্ড দিয়ে সাইট ডিপ্লয় করুন।
সারাংশ
BabylonJS দিয়ে তৈরি 3D ওয়েব অ্যাপ্লিকেশনকে স্ট্যাটিক ওয়েবসাইট হিসেবে ডিপ্লয় করার জন্য আপনাকে প্রথমে আপনার প্রজেক্টটি তৈরি করতে হবে এবং তারপর একটি static website hosting প্ল্যাটফর্ম যেমন GitHub Pages, Netlify, Vercel, Surge, অথবা Firebase Hosting এর মাধ্যমে ডিপ্লয় করতে হবে। এই প্ল্যাটফর্মগুলোর সাহায্যে আপনার প্রজেক্ট সহজেই ওয়েব সার্ভারে হোস্ট হয়ে যাবে এবং ব্যবহারকারীরা তা ব্রাউজারে অ্যাক্সেস করতে পারবে।
Read more
