BabylonJS শুধুমাত্র 3D গ্রাফিক্সের জন্যই নয়, এটি 2D ইন্টারফেস উপাদানও তৈরি করতে সহায়তা করে। আপনি BabylonJS-এর GUI (Graphical User Interface) সিস্টেম ব্যবহার করে বাটন, টেক্সট, স্লাইডার এবং অন্যান্য UI উপাদান তৈরি করতে পারেন। এই গাইডে, আমরা দেখব কীভাবে BabylonJS-এর GUI সিস্টেম ব্যবহার করে বাটন, টেক্সট এবং স্লাইডার তৈরি করতে হয়।
BabylonJS GUI সিস্টেম ইনস্টল করা
BabylonJS-এর GUI উপাদানগুলো ব্যবহারের জন্য, আপনাকে babylonjs-gui প্যাকেজ ইম্পোর্ট করতে হবে। যদি আপনি CDN ব্যবহার করেন, তবে এটি এইভাবে লোড করা যাবে:
<script src="https://cdn.babylonjs.com/babylon.gui.min.js"></script>
এটি ব্যবহার করে আমরা UI উপাদান তৈরি করতে পারব।
১. বাটন তৈরি
বাটন তৈরি করার জন্য:
BABYLON.GUI.Buttonক্লাস ব্যবহার করা হয়।- বাটনটির স্টাইল, পজিশন এবং আকার কনফিগার করা যায়।
উদাহরণ:
// 3D scene তৈরি করা
var scene = new BABYLON.Scene(engine);
// GUI সিস্টেম তৈরি করা
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene);
// বাটন তৈরি করা
var button = BABYLON.GUI.Button.CreateSimpleButton("but1", "Click Me!");
button.width = "150px";
button.height = "40px";
button.color = "white";
button.background = "green";
button.top = "200px"; // পজিশন
button.left = "100px"; // পজিশন
// বাটন ক্লিক হলে একশন
button.onPointerUpObservable.add(function() {
alert("Button clicked!");
});
// বাটন UI-তে যোগ করা
advancedTexture.addControl(button);
এখানে:
BABYLON.GUI.Button.CreateSimpleButtonদিয়ে একটি সাধারণ বাটন তৈরি করা হয়েছে।button.onPointerUpObservable.addদ্বারা বাটনে ক্লিক হলে একটি একশন সংযুক্ত করা হয়েছে।
২. টেক্সট তৈরি
টেক্সট তৈরি করতে:
BABYLON.GUI.TextBlockক্লাস ব্যবহার করা হয়, যা সরল টেক্সট প্রদর্শন করতে সহায়তা করে।
উদাহরণ:
// 3D scene তৈরি করা
var scene = new BABYLON.Scene(engine);
// GUI সিস্টেম তৈরি করা
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene);
// টেক্সট ব্লক তৈরি করা
var textBlock = new BABYLON.GUI.TextBlock();
textBlock.text = "Hello, BabylonJS!";
textBlock.color = "white";
textBlock.fontSize = 24;
textBlock.top = "100px"; // পজিশন
textBlock.left = "200px"; // পজিশন
// টেক্সট UI-তে যোগ করা
advancedTexture.addControl(textBlock);
এখানে:
BABYLON.GUI.TextBlockদিয়ে একটি টেক্সট ব্লক তৈরি করা হয়েছে।- টেক্সটের
text,color, এবংfontSizeকাস্টমাইজ করা হয়েছে।
৩. স্লাইডার তৈরি
স্লাইডার তৈরি করতে:
BABYLON.GUI.Sliderক্লাস ব্যবহার করা হয়, যা ব্যবহারকারীর জন্য একটি স্লাইডিং ইন্টারফেস প্রদান করে।
উদাহরণ:
// 3D scene তৈরি করা
var scene = new BABYLON.Scene(engine);
// GUI সিস্টেম তৈরি করা
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene);
// স্লাইডার তৈরি করা
var slider = new BABYLON.GUI.Slider();
slider.minimum = 0;
slider.maximum = 100;
slider.value = 50; // প্রাথমিক মান
slider.height = "20px";
slider.width = "200px";
slider.top = "300px"; // পজিশন
slider.left = "100px"; // পজিশন
// স্লাইডার ভ্যালু পরিবর্তন হলে একশন
slider.onValueChangedObservable.add(function(value) {
console.log("Slider Value: " + value);
});
// স্লাইডার UI-তে যোগ করা
advancedTexture.addControl(slider);
এখানে:
BABYLON.GUI.Sliderদিয়ে একটি স্লাইডার তৈরি করা হয়েছে।minimumএবংmaximumদ্বারা স্লাইডারের রেঞ্জ নির্ধারণ করা হয়েছে, এবংvalueদ্বারা প্রাথমিক মান সেট করা হয়েছে।onValueChangedObservable.addদিয়ে স্লাইডারের মান পরিবর্তন হলে একশন নির্ধারণ করা হয়েছে।
৪. সম্পূর্ণ উদাহরণ
এখানে একটি সম্পূর্ণ উদাহরণ দেওয়া হচ্ছে, যেখানে বাটন, টেক্সট এবং স্লাইডার একসাথে ব্যবহৃত হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BabylonJS UI Example</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/babylon.gui.min.js"></script>
</head>
<body>
<canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
<script>
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
// GUI সিস্টেম তৈরি করা
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene);
// টেক্সট ব্লক তৈরি করা
var textBlock = new BABYLON.GUI.TextBlock();
textBlock.text = "Welcome to BabylonJS!";
textBlock.color = "white";
textBlock.fontSize = 30;
textBlock.top = "50px";
advancedTexture.addControl(textBlock);
// বাটন তৈরি করা
var button = BABYLON.GUI.Button.CreateSimpleButton("but1", "Click Me!");
button.width = "150px";
button.height = "40px";
button.color = "white";
button.background = "green";
button.top = "200px";
button.left = "100px";
button.onPointerUpObservable.add(function() {
textBlock.text = "Button Clicked!";
});
advancedTexture.addControl(button);
// স্লাইডার তৈরি করা
var slider = new BABYLON.GUI.Slider();
slider.minimum = 0;
slider.maximum = 100;
slider.value = 50;
slider.height = "20px";
slider.width = "200px";
slider.top = "300px";
slider.left = "100px";
slider.onValueChangedObservable.add(function(value) {
console.log("Slider Value: " + value);
});
advancedTexture.addControl(slider);
// রেন্ডার লুপ শুরু করা
engine.runRenderLoop(function () {
scene.render();
});
// উইন্ডো রিসাইজ হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
এখানে:
- একটি টেক্সট, বাটন এবং স্লাইডার UI উপাদান একসাথে তৈরি করা হয়েছে।
- বাটন ক্লিক করলে টেক্সট পরিবর্তন হবে এবং স্লাইডারের মান পরিবর্তন হলে সেটি কনসোলে দেখা যাবে।
সারাংশ
BabylonJS-এর GUI সিস্টেম ব্যবহার করে আপনি সহজেই বাটন, টেক্সট এবং স্লাইডার তৈরি করতে পারেন। BABYLON.GUI.Button, BABYLON.GUI.TextBlock, এবং BABYLON.GUI.Slider ক্লাসগুলির মাধ্যমে আপনি 3D দৃশ্যে ইন্টারেকটিভ UI উপাদান যোগ করতে পারেন। এই উপাদানগুলি ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য খুবই কার্যকর।
Content added By
Read more
