Web Development Object Picking (Mouse বা Touch এর মাধ্যমে) গাইড ও নোট

BabylonJS-এ Object Picking বা Raycasting এর মাধ্যমে আপনি 3D দৃশ্যে অবজেক্ট সিলেক্ট করতে পারেন, যা মাউস বা টাচ ইন্টারঅ্যাকশন দিয়ে কার্যকরী হয়। এই টেকনিক্যালিটি ব্যবহার করে, আপনি অবজেক্টের উপর ক্লিক বা টাচ করলে সেই অবজেক্টটি সিলেক্ট করতে পারেন এবং বিভিন্ন একশন সম্পাদন করতে পারেন।

Object Picking কিভাবে কাজ করে?

Object picking মূলত রে কাস্টিং (Ray Casting) ভিত্তিক একটি প্রক্রিয়া। যখন ব্যবহারকারী মাউস বা টাচ স্ক্রিনে ক্লিক করেন, তখন একটি রে দৃশ্যের মধ্যে শুরু হয় এবং এটি যেকোনো 3D অবজেক্টের সাথে সংযোগ স্থাপন করতে পারে। অবজেক্টটির উপর ক্লিক করলে, সেই অবজেক্টকে শনাক্ত করে আপনি কার্যকরী একশন পরিচালনা করতে পারেন।

Object Picking কনফিগার করা

১. রে কাস্টিং ব্যবহার করা

Object picking এর জন্য scene.pick() মেথড ব্যবহার করা হয়। এটি 2D কোঅর্ডিনেট (যেমন, মাউস পয়েন্ট) থেকে রে কাস্ট করে এবং যদি কোনো 3D অবজেক্টের সাথে সেই রে ক্রস করে, তবে সেটি সিলেক্ট করে।

উদাহরণ:

// 3D scene তৈরি করা
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 box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);

// রে কাস্টিং ইভেন্ট
canvas.addEventListener("click", function (evt) {
    var pickResult = scene.pick(evt.clientX, evt.clientY);

    if (pickResult.hit) {
        var pickedMesh = pickResult.pickedMesh;
        console.log("Picked Mesh: ", pickedMesh.name);
        pickedMesh.material = new BABYLON.StandardMaterial("pickedMaterial", scene);
        pickedMesh.material.diffuseColor = BABYLON.Color3.Red();  // রঙ পরিবর্তন করা
    }
});

এখানে:

• scene.pick(x, y): এখানে x এবং y হল ক্লিক করা পয়েন্টের স্ক্রীন কোঅর্ডিনেট। এটি রে কাস্ট করে এবং যদি কোনো অবজেক্ট পাওয়া যায়, তবে তা শনাক্ত করা হয়।
• pickResult.hit: যদি কোনো অবজেক্ট নির্বাচিত হয়, তবে hit মানটি true হয়ে যাবে।
• pickedMesh: নির্বাচিত অবজেক্টটি পাওয়া যাবে।

২. টাচ স্ক্রিনের জন্য Object Picking

এটি মাউস কন্ট্রোলের মতোই কাজ করে, তবে টাচ ইভেন্টের জন্য "touchstart" বা "touchend" ইভেন্ট ব্যবহার করা হয়।

উদাহরণ (টাচ স্ক্রিন):

canvas.addEventListener("touchstart", function (evt) {
    var pickResult = scene.pick(evt.touches[0].clientX, evt.touches[0].clientY);

    if (pickResult.hit) {
        var pickedMesh = pickResult.pickedMesh;
        console.log("Picked Mesh (Touch): ", pickedMesh.name);
        pickedMesh.material = new BABYLON.StandardMaterial("pickedMaterial", scene);
        pickedMesh.material.diffuseColor = BABYLON.Color3.Green();  // রঙ পরিবর্তন করা
    }
});

এখানে:

• evt.touches[0].clientX এবং evt.touches[0].clientY: টাচ স্ক্রিনের প্রথম টাচ পয়েন্টের কোঅর্ডিনেট পাওয়া যায় এবং সেই পয়েন্ট থেকে রে কাস্ট করা হয়।

৩. Multiple Object Picking (একাধিক অবজেক্ট নির্বাচন)

একাধিক অবজেক্ট নির্বাচনের জন্য, আপনি scene.pick() এর পাশাপাশি scene.multiPick() মেথড ব্যবহার করতে পারেন, যা একযোগভাবে একাধিক অবজেক্ট নির্বাচন করতে সাহায্য করে।

উদাহরণ (Multiple Object Picking):

canvas.addEventListener("click", function (evt) {
    var pickResults = scene.multiPick(evt.clientX, evt.clientY);

    if (pickResults.length > 0) {
        pickResults.forEach(function (result) {
            if (result.hit) {
                var pickedMesh = result.pickedMesh;
                console.log("Picked Mesh (Multi): ", pickedMesh.name);
                pickedMesh.material = new BABYLON.StandardMaterial("pickedMaterial", scene);
                pickedMesh.material.diffuseColor = BABYLON.Color3.Blue();  // রঙ পরিবর্তন করা
            }
        });
    }
});

এখানে:

• scene.multiPick(x, y): এটি একটি রে কাস্ট করে এবং দৃশ্যের সমস্ত অবজেক্টের সাথে মিলানোর চেষ্টা করে, যা একাধিক অবজেক্ট নির্বাচন করতে সাহায্য করে।

৪. Object Picking-এ Custom Action যোগ করা

Object Picking এর মাধ্যমে আপনি কাস্টম একশনও যুক্ত করতে পারেন, যেমন অবজেক্টের ওপর ক্লিক করলে কোনো পরিবর্তন ঘটানো, অথবা কোনো ইন্টারঅ্যাকটিভ একশন করা।

উদাহরণ:

canvas.addEventListener("click", function (evt) {
    var pickResult = scene.pick(evt.clientX, evt.clientY);

    if (pickResult.hit) {
        var pickedMesh = pickResult.pickedMesh;

        if (pickedMesh.name === "box") {
            pickedMesh.scaling = new BABYLON.Vector3(2, 2, 2);  // বক্সের আকার বড় করা
            pickedMesh.material = new BABYLON.StandardMaterial("pickedMaterial", scene);
            pickedMesh.material.diffuseColor = BABYLON.Color3.Yellow();  // রঙ পরিবর্তন
        }
    }
});

এখানে:

• pickedMesh.scaling: অবজেক্টটির আকার পরিবর্তন করা হয়েছে।
• pickedMesh.material.diffuseColor: অবজেক্টটির রঙ পরিবর্তন করা হয়েছে।

সারাংশ

• Object Picking হচ্ছে একটি প্রক্রিয়া যা মাউস বা টাচের মাধ্যমে 3D দৃশ্যে অবজেক্ট নির্বাচন করার জন্য ব্যবহৃত হয়।
• scene.pick() এবং scene.multiPick() ব্যবহার করে আপনি এক বা একাধিক অবজেক্ট নির্বাচন করতে পারেন।
• আপনি scene.pick() দ্বারা নির্বাচিত অবজেক্টের উপর কাস্টম একশন যেমন রঙ পরিবর্তন, আকার পরিবর্তন বা অন্যান্য ইন্টারঅ্যাকশন করতে পারেন।

এই Object Picking ফিচারের মাধ্যমে, আপনার 3D অ্যাপ্লিকেশনে আরও ইন্টারঅ্যাকটিভিটি যোগ করা সম্ভব, যা ব্যবহারকারীর অভিজ্ঞতা অনেক উন্নত করবে।