Web Development GUI (Graphical User Interface) তৈরি করা গাইড ও নোট

230

BabylonJS শুধু 3D গ্রাফিক্সের জন্যই নয়, এটি একটি শক্তিশালী GUI (Graphical User Interface) তৈরি করার সুবিধাও প্রদান করে। BabylonJS-এ GUI তৈরি করতে BABYLON.GUI মডিউল ব্যবহৃত হয়। এই মডিউল ব্যবহার করে আপনি 3D দৃশ্যে বিভিন্ন ধরনের UI উপাদান যেমন বোতাম, স্লাইডার, টেক্সট, ইমেজ ইত্যাদি যোগ করতে পারেন।

এখানে আমরা BabylonJS দিয়ে একটি সহজ GUI তৈরি করার পদ্ধতি জানব।

১. BabylonJS GUI সেটআপ

BabylonJS GUI ব্যবহার করতে হলে, আপনাকে BABYLON.GUI মডিউলটি অন্তর্ভুক্ত করতে হবে। এটা প্রাথমিকভাবে babylon.gui.min.js লাইব্রেরি হিসেবে সরবরাহ করা হয়। তবে, যদি আপনি CDN ব্যবহার করেন, তাহলে এটি সরাসরি পাওয়া যাবে।

২. GUI উপাদান তৈরি

GUI উপাদান কী?

GUI উপাদানগুলি হল সেই ইন্টারেক্টিভ এলিমেন্টগুলো যা ব্যবহারকারীর সাথে যোগাযোগের জন্য কাজ করে, যেমন:

বাটন (Button)
টেক্সট (Text)
ইমেজ (Image)
স্লাইডার (Slider)
স্পিনার (Spinner)

এগুলি তৈরি এবং কাস্টমাইজ করা সহজ এবং এগুলোর মাধ্যমে 3D দৃশ্যে ইন্টারঅ্যাকশন করা সম্ভব।

৩. GUI তৈরি করার পদ্ধতি

স্টেপ ১: HTML ফাইল তৈরি

একটি HTML ফাইল তৈরি করুন এবং নিচের কোডটি ব্যবহার করুন:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BabylonJS GUI Example</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.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);
        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);

        // 3D বক্স তৈরি করা
        var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);

        // 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.onPointerUpObservable.add(function() {
            alert("Button clicked!");
        });
        advancedTexture.addControl(button); // বাটনটি GUI তে যোগ করা

        // রেন্ডার লুপ শুরু করা
        engine.runRenderLoop(function () {
            scene.render();
        });

        // ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

কোড ব্যাখ্যা:

Canvas এলিমেন্ট: HTML-এ একটি <canvas> ট্যাগ তৈরি করা হয়েছে, যেখানে BabylonJS দৃশ্য রেন্ডার হবে।
Engine এবং Scene তৈরি: BABYLON.Engine এবং BABYLON.Scene ব্যবহার করে 3D দৃশ্য তৈরি করা হয়েছে।
Camera এবং Lighting: আমরা একটি ArcRotateCamera এবং HemisphericLight ব্যবহার করেছি, যাতে দৃশ্যটি ব্যবহারকারী দেখতে পারে।
GUI তৈরি করা:
- BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene) দিয়ে GUI সিস্টেম শুরু করা হয়েছে। এটি পুরো স্ক্রীনের UI তৈরি করবে।
- BABYLON.GUI.Button.CreateSimpleButton("but1", "Click Me!") দিয়ে একটি সিম্পল বাটন তৈরি করা হয়েছে।
- button.onPointerUpObservable.add(function() { alert("Button clicked!"); }); দিয়ে বাটনে ক্লিক করলে একটি অ্যালার্ট বার্তা প্রদর্শিত হবে।
Render Loop: engine.runRenderLoop ব্যবহার করে 3D দৃশ্য রেন্ডার করা হচ্ছে।

৪. অন্যান্য GUI উপাদানসমূহ

BabylonJS GUI এ আরও বিভিন্ন উপাদান ব্যবহার করা যায়:

১. টেক্সট (Text)

var textBlock = new BABYLON.GUI.TextBlock();
textBlock.text = "Hello, BabylonJS!";
textBlock.color = "white";
textBlock.fontSize = 24;
advancedTexture.addControl(textBlock);

এই কোডের মাধ্যমে আপনি একটি টেক্সট ব্লক তৈরি করে GUI তে প্রদর্শন করতে পারেন।

২. ইমেজ (Image)

var image = new BABYLON.GUI.Image("logo", "https://www.babylonjs.com/img/logo.svg");
image.width = "200px";
image.height = "200px";
advancedTexture.addControl(image);

এটি একটি ইমেজ তৈরি করে এবং সেটি GUI তে প্রদর্শন করবে।

৩. স্লাইডার (Slider)

var slider = new BABYLON.GUI.Slider();
slider.minimum = 0;
slider.maximum = 1;
slider.value = 0.5;
slider.height = "20px";
slider.width = "200px";
slider.color = "green";
advancedTexture.addControl(slider);

স্লাইডার ব্যবহার করে আপনি ইউজার ইন্টারঅ্যাকশনের মাধ্যমে ভ্যালু পরিবর্তন করতে পারবেন।

৪. স্পিনার (Spinner)

var spinner = new BABYLON.GUI.SpinButton();
spinner.value = 0;
spinner.minimum = 0;
spinner.maximum = 100;
spinner.step = 1;
advancedTexture.addControl(spinner);

স্পিনার দিয়ে একটি সংখ্যা পরিবর্তন করার উপায় তৈরি করা যেতে পারে।

৫. ইন্টারঅ্যাকশন এবং কাস্টমাইজেশন

BabylonJS GUI-তে আপনি বিভিন্ন UI উপাদানকে ইন্টারঅ্যাকটিভ করে তুলতে পারেন। আপনি ইভেন্ট লিসনার ব্যবহার করে যে কোন UI উপাদানে ক্লিক বা অন্য কোনো কাজ করতে পারেন।

উদাহরণস্বরূপ, একটি বাটনের উপর ক্লিক করলে 3D অবজেক্টের রঙ পরিবর্তন করা:

button.onPointerUpObservable.add(function() {
    box.material = new BABYLON.StandardMaterial("boxMat", scene);
    box.material.diffuseColor = BABYLON.Color3.Random(); // রঙ পরিবর্তন
});

সারাংশ

BabylonJS GUI দিয়ে আপনি সহজেই 3D দৃশ্যে ইন্টারেক্টিভ UI উপাদান তৈরি করতে পারেন। BABYLON.GUI মডিউলের মাধ্যমে আপনি বাটন, স্লাইডার, টেক্সট, ইমেজ, এবং অন্যান্য অনেক উপাদান যোগ করতে পারবেন। এটি একটি শক্তিশালী টুল যা 3D অ্যাপ্লিকেশন এবং গেম ডেভেলপমেন্টে ইউজার ইন্টারফেস ডিজাইন করার জন্য ব্যবহৃত হয়।

Content added By

SATT Academy

BabylonJS GUI লাইব্রেরি পরিচিতি

311

BabylonJS GUI (Graphical User Interface) লাইব্রেরি, যা BabylonJS.GUI নামে পরিচিত, একটি শক্তিশালী এবং অত্যন্ত কার্যকরী টুল, যা 3D পরিবেশে ইউজার ইন্টারফেস (UI) উপাদান তৈরি করতে সহায়তা করে। এটি ব্যবহৃত হয় বিভিন্ন ধরনের ইন্টারঅ্যাকটিভ 3D অ্যাপ্লিকেশন এবং গেমগুলিতে, যেখানে ব্যবহারকারীর জন্য বাটন, স্লাইডার, ইনপুট ফিল্ড, টেক্সট এবং অন্যান্য UI উপাদান প্রয়োজন হয়। এই লাইব্রেরিটি সম্পূর্ণরূপে BabylonJS-এ বিল্ট-ইন এবং খুব সহজেই 3D দৃশ্যে UI উপাদানগুলো ইন্টিগ্রেট করতে সহায়তা করে।

BabylonJS GUI লাইব্রেরির বৈশিষ্ট্য

BabylonJS GUI লাইব্রেরি ব্যবহার করার মাধ্যমে আপনি খুব সহজেই 3D দৃশ্যের মধ্যে বিভিন্ন ধরনের UI উপাদান তৈরি করতে পারেন। এর কিছু প্রধান বৈশিষ্ট্য হল:

১. ইন্টারঅ্যাকটিভ উপাদান:

BabylonJS GUI লাইব্রেরি আপনাকে বাটন, টেক্সট, স্লাইডার, প্রগ্রেস বার, চেকবক্স ইত্যাদি তৈরির সুবিধা দেয়। এই উপাদানগুলো 3D দৃশ্যে ইন্টারঅ্যাকটিভ হিসেবে কাজ করে।

২. পজিশনিং ও স্কেলিং:

GUI উপাদানগুলোর অবস্থান, আকার এবং স্কেল খুব সহজেই নিয়ন্ত্রণ করা যায়। এর ফলে আপনি UI উপাদানগুলোকে দৃশ্যে সঠিকভাবে প্লেস করতে পারবেন।

৩. স্টাইলিং:

BabylonJS GUI লাইব্রেরি ব্যবহার করে আপনি UI উপাদানগুলোর স্টাইলিং করতে পারেন। এর মাধ্যমে ফন্ট, রং, ব্যাকগ্রাউন্ড ইত্যাদি কাস্টমাইজ করা যায়।

৪. 3D ও 2D UI উপাদান:

এটি 3D এবং 2D UI উপাদানকে সমর্থন করে। 3D UI উপাদানগুলি সোজাসুজি 3D দৃশ্যে সন্নিবেশিত হতে পারে, যেখানে 2D UI উপাদানগুলি 2D প্যানেলে প্রদর্শিত হয়।

৫. ইভেন্ট হ্যান্ডলিং:

BabylonJS GUI লাইব্রেরি UI উপাদানগুলোর জন্য ইভেন্ট হ্যান্ডলিং এর সুবিধা দেয়। যেমন, একটি বাটনে ক্লিক করলে আপনি কিছু নির্দিষ্ট কাজ করতে পারেন (যেমন, 3D দৃশ্যে কিছু পরিবর্তন বা মেনু প্রদর্শন ইত্যাদি)।

BabylonJS GUI লাইব্রেরি ব্যবহার শুরু করা

BabylonJS GUI লাইব্রেরি ব্যবহারের জন্য প্রথমে আপনাকে babylon.js লাইব্রেরির পাশাপাশি babylon.gui.js স্ক্রিপ্ট ফাইলটি অন্তর্ভুক্ত করতে হবে। এর মাধ্যমে আপনি 3D দৃশ্যে UI উপাদান যুক্ত করতে পারবেন।

১. HTML ফাইল তৈরি ও লাইব্রেরি লোড

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BabylonJS GUI Example</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
</head>
<body>
    <canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
    <script>
        // BabylonJS ইঞ্জিন এবং দৃশ্য তৈরি করা
        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);

        // BabylonJS GUI সিস্টেম তৈরি করা
        var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene);

        // একটি বাটন তৈরি করা
        var button = BABYLON.GUI.Button.CreateSimpleButton("button1", "Click Me");
        button.width = "150px";
        button.height = "40px";
        button.color = "white";
        button.background = "green";
        button.onPointerUpObservable.add(function() {
            alert("Button Clicked!");
        });
        advancedTexture.addControl(button);

        // দৃশ্য রেন্ডার করা
        engine.runRenderLoop(function () {
            scene.render();
        });

        // উইন্ডোর সাইজ পরিবর্তন হলে রিসাইজ করা
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

কোড ব্যাখ্যা:

লাইব্রেরি লোড: প্রথমে আমরা babylon.js এবং babylon.gui.js লাইব্রেরি লোড করেছি। GUI লাইব্রেরি UI উপাদান তৈরির জন্য ব্যবহৃত হয়।
AdvancedDynamicTexture: এটি একটি প্যানেল তৈরি করে যা GUI উপাদানগুলি ধারণ করবে। এখানে আমরা CreateFullscreenUI পদ্ধতি ব্যবহার করে পুরো স্ক্রীনে UI উপাদান বসিয়েছি।
Button: একটি সাধারণ বাটন তৈরি করা হয়েছে, যা ক্লিক করলে একটি alert দেখাবে।
Event Handling: onPointerUpObservable.add এর মাধ্যমে বাটন ক্লিক করার পর একটি কাজ (এক্ষেত্রে alert) সম্পন্ন হচ্ছে।

BabylonJS GUI উপাদানগুলোর অন্যান্য ধরনের

১. TextBlock

TextBlock হল একটি টেক্সট প্রদর্শনকারী উপাদান, যা ব্যবহারকারীদের নির্দেশনা বা তথ্য প্রদর্শন করার জন্য ব্যবহার করা হয়।

var textBlock = new BABYLON.GUI.TextBlock();
textBlock.text = "Welcome to BabylonJS!";
textBlock.color = "white";
textBlock.fontSize = 24;
advancedTexture.addControl(textBlock);

২. Slider

Slider একটি স্কেলযোগ্য উপাদান যা ব্যবহারকারীদের একটি মান নির্বাচন করতে দেয়।

var slider = new BABYLON.GUI.Slider();
slider.minimum = 0;
slider.maximum = 100;
slider.value = 50;
slider.width = "200px";
slider.height = "20px";
slider.color = "green";
advancedTexture.addControl(slider);

৩. Image

Image উপাদান ব্যবহার করে 3D দৃশ্যে একটি ছবি বা ব্যাকগ্রাউন্ড ইমেজ যোগ করা যায়।

var image = new BABYLON.GUI.Image("image1", "path_to_image.jpg");
image.width = "100px";
image.height = "100px";
advancedTexture.addControl(image);

৪. Checkbox

Checkbox উপাদান ব্যবহারকারীদের একটি অপশন নির্বাচিত করার সুযোগ দেয়।

var checkbox = new BABYLON.GUI.Checkbox();
checkbox.isChecked = true;
checkbox.width = "20px";
checkbox.height = "20px";
advancedTexture.addControl(checkbox);

সারাংশ

BabylonJS GUI লাইব্রেরি 3D দৃশ্যে ইউজার ইন্টারফেস তৈরি করার একটি শক্তিশালী টুল। এর মাধ্যমে আপনি বাটন, টেক্সট, স্লাইডার, চেকবক্স, এবং অন্যান্য UI উপাদান খুব সহজেই তৈরি ও কাস্টমাইজ করতে পারেন। BabylonJS GUI লাইব্রেরি ব্যবহারের মাধ্যমে আপনি আপনার 3D প্রজেক্টকে আরও ইন্টারঅ্যাকটিভ ও ব্যবহারকারী-বান্ধব করতে পারবেন।

Content added By

SATT Academy

বাটন, টেক্সট, স্লাইডার তৈরি

282

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

SATT Academy

2D এবং 3D GUI ইলিমেন্ট ইন্টিগ্রেশন

298

BabylonJS একটি শক্তিশালী 3D গ্রাফিক্স ইঞ্জিন, যা 2D এবং 3D GUI (Graphical User Interface) ইলিমেন্টগুলো সহজেই ইন্টিগ্রেট করতে সাহায্য করে। 3D গেম বা অ্যাপ্লিকেশন তৈরি করার সময়, একটি ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস (UI) থাকা খুবই গুরুত্বপূর্ণ। BabylonJS এ, আপনি কাস্টম GUI ইলিমেন্ট যেমন বাটন, স্লাইডার, টেক্সট বক্স, এবং অন্যান্য ইন্টারঅ্যাকটিভ UI উপাদান তৈরি করতে পারেন, যা সরাসরি 3D দৃশ্যে রেন্ডার করা হয়।

এই গাইডে, আমরা দেখব কিভাবে 2D এবং 3D GUI ইলিমেন্টের সাথে কাজ করতে হয়।

১. 2D GUI ইলিমেন্ট ইন্টিগ্রেশন

2D GUI কি?

2D GUI ইলিমেন্টগুলো হল সাধারণ 2D উপাদান, যেমন বাটন, টেক্সট, ইমেজ ইত্যাদি, যা সাধারণত 2D স্ক্রীনে প্রদর্শিত হয়। এই ইলিমেন্টগুলো সাধারণত স্ক্রীনের উপরের দিকে বা কোণায় অবস্থান করে।

2D GUI ইলিমেন্ট তৈরি করা

উদাহরণ:

// canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");

// BabylonJS এর ইঞ্জিন তৈরি করা
var engine = new BABYLON.Engine(canvas, true);

// একটি নতুন দৃশ্য তৈরি করা
var scene = new BABYLON.Scene(engine);

// 2D GUI (AdvancedDynamicTexture) তৈরি করা
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene);

// একটি Button তৈরি করা
var button = BABYLON.GUI.Button.CreateSimpleButton("but1", "Click Me");
button.width = "200px";
button.height = "40px";
button.color = "white";
button.background = "green";
button.top = "-100px";  // স্ক্রীনের উপরে অবস্থান
button.left = "0px";    // স্ক্রীনের কেন্দ্রে অবস্থান
button.onPointerUpObservable.add(function() {
    alert("Button clicked!");
});

// বাটনটি UI তে যোগ করা
advancedTexture.addControl(button);

// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
    scene.render();
});

// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
    engine.resize();
});

কোডের ব্যাখ্যা:

AdvancedDynamicTexture: এটি একটি বিশেষ ধরনের 2D GUI টেক্সচার যা একটি UI ইলিমেন্ট হিসেবে কাজ করে। CreateFullscreenUI মেথডটি স্ক্রীনের পুরো আয়তনে UI তৈরি করে।
Button: এটি একটি সাধারণ বাটন তৈরি করে। বাটনের অবস্থান, আকার, রঙ ইত্যাদি কনফিগার করা যেতে পারে।
onPointerUpObservable.add: বাটনে ক্লিক করার সময় এটি একটি ফাংশন কল করবে, যেটি এখানে একটি অ্যালার্ট দেখাবে।

2D GUI এর বৈশিষ্ট্য:

সরল এবং দ্রুত UI উপাদান তৈরি করতে ব্যবহার হয়।
স্ক্রীনের ওপর স্থায়ীভাবে প্রদর্শিত হয় এবং 2D গ্রাফিক্সের মতো কাজ করে।
এটি সাধারণত গেমের HUD (Heads-Up Display) বা কন্ট্রোল প্যানেল তৈরি করতে ব্যবহৃত হয়।

২. 3D GUI ইলিমেন্ট ইন্টিগ্রেশন

3D GUI কি?

3D GUI ইলিমেন্টগুলো হল 3D স্পেসে স্থাপন করা UI উপাদান, যেমন বাটন, স্লাইডার, এবং টেক্সট যা 3D অবজেক্টের মতো দৃশ্যে অবস্থান করে এবং ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করতে সক্ষম।

3D GUI ইলিমেন্ট তৈরি করা

উদাহরণ:

// 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);

// 3D UI (Mesh & GUI) তৈরি করা
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(scene, camera);

// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);

// একটি 3D বাটন তৈরি করা
var button3D = BABYLON.GUI.Button.CreateSimpleButton("button3D", "3D Button");
button3D.width = "150px";
button3D.height = "50px";
button3D.color = "white";
button3D.background = "blue";
button3D.onPointerUpObservable.add(function() {
    alert("3D Button Clicked!");
});

// 3D বাটনটি বক্সের উপর স্থাপন করা
advancedTexture.addControl(button3D);
button3D.linkToMesh(box);  // বক্সের সাথে যুক্ত করা

// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
    scene.render();
});

// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
    engine.resize();
});

কোডের ব্যাখ্যা:

CreateForMesh: এই ফাংশনটি 3D UI তৈরি করতে ব্যবহৃত হয়। এটি একটি 3D অবজেক্টের (যেমন বক্স বা কোনো অন্য মেশ) উপর UI উপাদানগুলোর সঞ্চালন পরিচালনা করে।
linkToMesh: এটি একটি 3D UI উপাদানকে কোনো 3D অবজেক্টের সাথে সংযুক্ত করে, যার ফলে UI উপাদানটি সেই অবজেক্টের সঙ্গে চলতে থাকে।
Button: 3D বাটনটি 3D মেশে যোগ করা হয়েছে। যখন আপনি বাটনে ক্লিক করবেন, তখন এটি একটি অ্যাকশন সম্পাদন করবে।

3D GUI এর বৈশিষ্ট্য:

এটি 3D দৃশ্যে অবজেক্টের সাথে সম্পর্কিত UI উপাদান তৈরি করতে ব্যবহৃত হয়।
UI উপাদান 3D স্পেসে অবস্থিত থাকে, যা ব্যবহারকারীকে আরও ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করে।
আপনি 3D অবজেক্টগুলির মধ্যে বাটন, স্লাইডার, টেক্সট ইত্যাদি যুক্ত করতে পারেন।

৩. 2D এবং 3D GUI এর সমন্বয়

BabylonJS এ, আপনি 2D এবং 3D GUI উপাদান একসাথে ব্যবহার করতে পারেন, যা আপনাকে একটি পূর্ণাঙ্গ ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরির সুযোগ দেয়। উদাহরণস্বরূপ, আপনি 2D বাটন তৈরি করতে পারেন যা স্ক্রীনের কোণায় অবস্থান করবে এবং 3D UI উপাদান ব্যবহার করে 3D দৃশ্যে অ্যাকশন প্রদান করতে পারেন।

উদাহরণ:

// 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);

// 2D GUI (AdvancedDynamicTexture) তৈরি করা
var advancedTexture2D = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI2D", true, scene);

// 2D বাটন তৈরি করা
var button2D = BABYLON.GUI.Button.CreateSimpleButton("button2D", "2D Button");
button2D.width = "150px";
button2D.height = "50px";
button2D.color = "white";
button2D.background = "red";
button2D.top = "150px";
button2D.onPointerUpObservable.add(function() {
    alert("2D Button Clicked!");
});
advancedTexture2D.addControl(button2D);

// 3D GUI (AdvancedDynamicTexture) তৈরি করা
var advancedTexture3D = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(scene, camera);
var button3D = BABYLON.GUI.Button.CreateSimpleButton("button3D", "3D Button");
button3D.width = "150px";
button3D.height = "50px";
button3D.color = "white";
button3D.background = "green";
button3D.onPointerUpObservable.add(function() {
    alert("3D Button Clicked!");
});

// 3D বাটনটি একটি বক্সের সাথে যুক্ত করা
var box = BABYLON

.MeshBuilder.CreateBox("box", {size: 2}, scene); button3D.linkToMesh(box); advancedTexture3D.addControl(button3D);

// দৃশ্য রেন্ডার করা engine.runRenderLoop(function () { scene.render(); });

// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা window.addEventListener("resize", function () { engine.resize(); });


---

## সারাংশ

- **2D GUI**: স্ক্রীনের উপরে সরল ও ইন্টারঅ্যাকটিভ UI উপাদান তৈরি করা, যেমন বাটন, টেক্সট, স্লাইডার, যা সাধারণত HUD হিসেবে ব্যবহৃত হয়।
- **3D GUI**: 3D দৃশ্যে অবজেক্টের সঙ্গে যুক্ত করা UI উপাদান তৈরি করা, যা 3D স্পেসে অবস্থান করে এবং অবজেক্টের সঙ্গে সম্পর্কিত হয়।
- BabylonJS এ, আপনি সহজেই 2D এবং 3D GUI উপাদানগুলোর সমন্বয়ে একটি পূর্ণাঙ্গ ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে পারেন।

এই গাইডের মাধ্যমে আপনি বুঝতে পারবেন কিভাবে BabylonJS ব্যবহার করে আপনার 3D দৃশ্যে বিভিন্ন ধরনের UI উপাদান সহজে ইন্টিগ্রেট করা যায়।

Content added By

SATT Academy

GUI এর মাধ্যমে ব্যবহারকারীর ইনপুট হ্যান্ডলিং

346

BabylonJS GUI সিস্টেম ব্যবহার করে আপনি ব্যবহারকারীর ইনপুট যেমন বাটন ক্লিক, স্লাইডার মুভমেন্ট, টেক্সট ইনপুট ইত্যাদি হ্যান্ডল করতে পারেন। এই ইনপুটগুলিকে সঠিকভাবে হ্যান্ডল করার জন্য, onPointerUpObservable, onPointerDownObservable, onValueChangedObservable, onTextChangedObservable ইত্যাদি ইভেন্ট ব্যবহার করা হয়। এই গাইডে, আমরা GUI এর মাধ্যমে ব্যবহারকারীর ইনপুট হ্যান্ডলিং দেখব।

১. বাটন ক্লিক হ্যান্ডলিং

বাটনের মাধ্যমে ইনপুট নেওয়া হয় সাধারণত onPointerUpObservable ইভেন্ট দিয়ে। এই ইভেন্টটি তখন ট্রিগার হয় যখন ব্যবহারকারী বাটনে ক্লিক করে।

উদাহরণ:

// 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);

এখানে:

onPointerUpObservable.add ব্যবহারকারী যখন বাটনে ক্লিক করবেন, তখন একটি অ্যালার্ট শো হবে।

২. স্লাইডার মুভমেন্ট হ্যান্ডলিং

স্লাইডার ব্যবহার করে ইনপুট নেওয়ার জন্য onValueChangedObservable ইভেন্ট ব্যবহার করা হয়। স্লাইডারের মান পরিবর্তন হলে এই ইভেন্ট ট্রিগার হয়।

উদাহরণ:

// 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);

এখানে:

onValueChangedObservable.add স্লাইডারের মান পরিবর্তন হলে কনসোলে মানটি দেখাবে।

৩. টেক্সট ইনপুট হ্যান্ডলিং

টেক্সট ইনপুটের জন্য BABYLON.GUI.InputText ব্যবহার করা হয়। এই ইনপুট বক্সের মাধ্যমে ব্যবহারকারী টেক্সট প্রবেশ করাতে পারে। onTextChangedObservable ইভেন্ট ব্যবহার করে আপনি ব্যবহারকারীর টাইপ করা টেক্সট হ্যান্ডল করতে পারেন।

উদাহরণ:

// 3D scene তৈরি করা
var scene = new BABYLON.Scene(engine);

// GUI সিস্টেম তৈরি করা
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene);

// ইনপুট টেক্সট তৈরি করা
var inputText = new BABYLON.GUI.InputText();
inputText.width = "200px";
inputText.height = "40px";
inputText.text = "Type something...";
inputText.top = "400px";
inputText.left = "100px";

// টেক্সট পরিবর্তন হলে একশন
inputText.onTextChangedObservable.add(function(text) {
    console.log("Text Entered: " + text);
});

// ইনপুট টেক্সট UI-তে যোগ করা
advancedTexture.addControl(inputText);

এখানে:

onTextChangedObservable.add ব্যবহারকারী যখন টেক্সট ইনপুট পরিবর্তন করবেন, তখন টেক্সট কনসোলে দেখানো হবে।

৪. বাটন এবং স্লাইডার ইনপুট কম্বিনেশন

আপনি একাধিক UI উপাদান একসাথে ব্যবহার করতে পারেন, যেমন বাটন এবং স্লাইডার। এর মাধ্যমে আপনি ব্যবহারকারীর ইনপুট আরও ইন্টারঅ্যাকটিভ এবং ডাইনামিকভাবে হ্যান্ডল করতে পারবেন।

উদাহরণ:

// 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 = "Use the slider!";
textBlock.color = "white";
textBlock.fontSize = 24;
textBlock.top = "50px";
advancedTexture.addControl(textBlock);

// স্লাইডার তৈরি করা
var slider = new BABYLON.GUI.Slider();
slider.minimum = 0;
slider.maximum = 100;
slider.value = 50;
slider.height = "20px";
slider.width = "200px";
slider.top = "150px";
slider.left = "100px";

// স্লাইডারের মান পরিবর্তন হলে টেক্সট আপডেট হবে
slider.onValueChangedObservable.add(function(value) {
    textBlock.text = "Slider Value: " + value;
});

// স্লাইডার UI-তে যোগ করা
advancedTexture.addControl(slider);

// বাটন তৈরি করা
var button = BABYLON.GUI.Button.CreateSimpleButton("but1", "Reset Slider");
button.width = "150px";
button.height = "40px";
button.color = "white";
button.background = "blue";
button.top = "250px";
button.left = "100px";

// বাটনে ক্লিক করলে স্লাইডার রিসেট হবে
button.onPointerUpObservable.add(function() {
    slider.value = 50;
});

// বাটন UI-তে যোগ করা
advancedTexture.addControl(button);

এখানে:

স্লাইডারের মান পরিবর্তন হলে টেক্সট পরিবর্তন হবে।
বাটনে ক্লিক করলে স্লাইডারটি রিসেট হয়ে যাবে।

৫. কাস্টম ইভেন্ট হ্যান্ডলিং

আপনি GUI উপাদানগুলির জন্য কাস্টম ইভেন্টও তৈরি করতে পারেন, যেমন একটি বাটন ক্লিক হলে অন্য কোনো UI উপাদান পরিবর্তন করা।

উদাহরণ:

// 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", "Toggle Text");
button.width = "150px";
button.height = "40px";
button.color = "white";
button.background = "red";
button.top = "200px";
button.left = "100px";

// টেক্সট ব্লক তৈরি করা
var textBlock = new BABYLON.GUI.TextBlock();
textBlock.text = "Initial Text";
textBlock.color = "white";
textBlock.fontSize = 24;
textBlock.top = "100px";
textBlock.left = "100px";
advancedTexture.addControl(textBlock);

// বাটন ক্লিক হলে টেক্সট পরিবর্তন হবে
button.onPointerUpObservable.add(function() {
    textBlock.text = textBlock.text === "Initial Text" ? "Text Changed!" : "Initial Text";
});

// বাটন UI-তে যোগ করা
advancedTexture.addControl(button);

এখানে:

বাটনে ক্লিক করলে টেক্সটটি পরিবর্তিত হবে। এটি কাস্টম ইভেন্ট হ্যান্ডলিংয়ের একটি উদাহরণ।

সারাংশ

BabylonJS GUI সিস্টেম ব্যবহার করে আপনি সহজে ব্যবহারকারীর ইনপুট হ্যান্ডল করতে পারেন। বিভিন্ন UI উপাদান যেমন বাটন, স্লাইডার, টেক্সট ইনপুট ইত্যাদি এর মাধ্যমে ব্যবহারকারী থেকে ইনপুট নেয়া সম্ভব। onPointerUpObservable, onValueChangedObservable, এবং onTextChangedObservable ইভেন্টগুলির মাধ্যমে আপনি UI উপাদানগুলির সাথে ইন্টারঅ্যাকশন হ্যান্ডল করতে পারেন এবং একটি ইন্টারেক্টিভ অ্যাপ্লিকেশন তৈরি করতে পারেন।

Content added By

SATT Academy

BabylonJS পরিচিতি BabylonJS সেটআপ এবং পরিবেশ তৈরি BabylonJS বেসিকস Mesh এবং Material Camera এবং Lighting

Web Development GUI (Graphical User Interface) তৈরি করা গাইড ও নোট

১. BabylonJS GUI সেটআপ

২. GUI উপাদান তৈরি

GUI উপাদান কী?

৩. GUI তৈরি করার পদ্ধতি

স্টেপ ১: HTML ফাইল তৈরি

কোড ব্যাখ্যা:

৪. অন্যান্য GUI উপাদানসমূহ

১. টেক্সট (Text)

২. ইমেজ (Image)

৩. স্লাইডার (Slider)

৪. স্পিনার (Spinner)

৫. ইন্টারঅ্যাকশন এবং কাস্টমাইজেশন

সারাংশ

BabylonJS GUI লাইব্রেরি পরিচিতি

BabylonJS GUI লাইব্রেরির বৈশিষ্ট্য

১. ইন্টারঅ্যাকটিভ উপাদান:

২. পজিশনিং ও স্কেলিং:

৩. স্টাইলিং:

৪. 3D ও 2D UI উপাদান:

৫. ইভেন্ট হ্যান্ডলিং:

BabylonJS GUI লাইব্রেরি ব্যবহার শুরু করা

১. HTML ফাইল তৈরি ও লাইব্রেরি লোড

কোড ব্যাখ্যা:

BabylonJS GUI উপাদানগুলোর অন্যান্য ধরনের

১. TextBlock

২. Slider

৩. Image

৪. Checkbox

সারাংশ

বাটন, টেক্সট, স্লাইডার তৈরি

BabylonJS GUI সিস্টেম ইনস্টল করা

১. বাটন তৈরি

বাটন তৈরি করার জন্য:

উদাহরণ:

২. টেক্সট তৈরি

টেক্সট তৈরি করতে:

উদাহরণ:

৩. স্লাইডার তৈরি

স্লাইডার তৈরি করতে:

উদাহরণ:

৪. সম্পূর্ণ উদাহরণ

সারাংশ

2D এবং 3D GUI ইলিমেন্ট ইন্টিগ্রেশন

১. 2D GUI ইলিমেন্ট ইন্টিগ্রেশন

2D GUI কি?

2D GUI ইলিমেন্ট তৈরি করা

উদাহরণ:

কোডের ব্যাখ্যা:

2D GUI এর বৈশিষ্ট্য:

২. 3D GUI ইলিমেন্ট ইন্টিগ্রেশন

3D GUI কি?

3D GUI ইলিমেন্ট তৈরি করা

উদাহরণ:

কোডের ব্যাখ্যা:

3D GUI এর বৈশিষ্ট্য:

৩. 2D এবং 3D GUI এর সমন্বয়

উদাহরণ:

GUI এর মাধ্যমে ব্যবহারকারীর ইনপুট হ্যান্ডলিং

১. বাটন ক্লিক হ্যান্ডলিং

উদাহরণ:

২. স্লাইডার মুভমেন্ট হ্যান্ডলিং

উদাহরণ:

৩. টেক্সট ইনপুট হ্যান্ডলিং

উদাহরণ:

৪. বাটন এবং স্লাইডার ইনপুট কম্বিনেশন

উদাহরণ:

৫. কাস্টম ইভেন্ট হ্যান্ডলিং

উদাহরণ:

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!