Mouse এবং Touch Events ব্যবস্থাপনা

Three.js এর মাধ্যমে Mouse এবং Touch Events ব্যবস্থাপনা

Three.js একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি যা WebGL এর উপর ভিত্তি করে ৩ডি গ্রাফিক্স তৈরি করতে ব্যবহৃত হয়। এটি ডেভেলপারদের ওয়েব ব্রাউজারে ৩ডি কন্টেন্ট তৈরি এবং পরিচালনা করার সুযোগ দেয়। Mouse এবং Touch ইভেন্টগুলি ৩ডি সcenes বা গ্রাফিক্সের সাথে ইন্টারঅ্যাকশনের জন্য অত্যন্ত গুরুত্বপূর্ণ, যেমন মাউস ক্লিক, হোভার, ড্র্যাগ এবং টাচ মোশন ইত্যাদি।

Three.js এর মাধ্যমে মাউস এবং টাচ ইভেন্ট ম্যানেজ করার জন্য, সাধারণত HTML ইভেন্ট লিস্টেনার ব্যবহার করা হয়, এবং তারপর এই ইভেন্টগুলিকে ৩ডি সcene বা অবজেক্টের সাথে সিঙ্ক্রোনাইজ করা হয়। এটি ইউজার ইন্টারঅ্যাকশন এর মাধ্যমে ৩ডি গ্রাফিক্সের উপর কাজ করার জন্য একটি শক্তিশালী কৌশল।

Mouse Events এর জন্য ব্যবস্থাপনা

১. Mouse Event Listener সেটআপ

Mouse ইভেন্ট যেমন click, mousemove, mousedown, mouseup ইত্যাদি ব্যবহারের জন্য আপনাকে সাধারণত window বা canvas এলিমেন্টের উপর লিসেনার যুক্ত করতে হবে।

উদাহরণ: Mouse Click ইভেন্ট হ্যান্ডলিং

// scene, camera, renderer তৈরি করার পরে, মাউস ইভেন্ট সেটআপ
const canvas = document.querySelector('canvas');

// মাউস ক্লিক ইভেন্ট হ্যান্ডলার
canvas.addEventListener('click', (event) => {
    const mouse = new THREE.Vector2();  // মাউসের পজিশন
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    // Raycaster ব্যবহার করে ক্লিক করা পয়েন্টে ৩ডি অবজেক্ট চেক করা
    const raycaster = new THREE.Raycaster();
    raycaster.updateMatrixWorld(); 
    raycaster.setFromCamera(mouse, camera);

    const intersects = raycaster.intersectObject(your3DObject); // আপনার ৩ডি অবজেক্টের সাথে ইন্টারসেক্ট চেক
    if (intersects.length > 0) {
        console.log('Object clicked:', intersects[0].object);
    }
});

এখানে, Raycasting ব্যবহার করে আপনি মাউসের ক্লিক পজিশনে ৩ডি অবজেক্টের সাথে ইন্টারঅ্যাক্ট করতে পারেন। এটি মাউস ইভেন্টের পজিশন হিসাব করে এবং ৩ডি স্পেসে ক্লিক করা অবজেক্টটিকে শনাক্ত করে।

২. Mouse Movement (mousemove) হ্যান্ডলিং

// মাউস মুভমেন্ট ইভেন্ট হ্যান্ডলার
canvas.addEventListener('mousemove', (event) => {
    const mouse = new THREE.Vector2();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    // Raycaster ব্যবহার করে মাউস পজিশনে অবজেক্ট অনুসন্ধান
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children); // সমস্ত অবজেক্ট চেক

    if (intersects.length > 0) {
        const intersectedObject = intersects[0].object;
        // ইন্টারঅ্যাক্ট করা অবজেক্টে কিছু করতে পারেন
        console.log('Hovered over:', intersectedObject);
    }
});

এখানে, mousemove ইভেন্টে মাউসের অবস্থান ট্র্যাক করা হচ্ছে এবং Raycasting এর মাধ্যমে মাউসের পজিশনে অবজেক্ট চেক করা হচ্ছে।

Touch Events এর জন্য ব্যবস্থাপনা

মোবাইল ডিভাইসে Touch Events অনেক গুরুত্বপূর্ণ। আপনি touchstart, touchmove, এবং touchend ইভেন্টগুলো ব্যবহার করতে পারেন যা মাউস ইভেন্টগুলোর মতোই কাজ করে তবে এটি টাচ স্ক্রীনে ট্র্যাক করা হয়।

১. Touch Start ইভেন্ট

canvas.addEventListener('touchstart', (event) => {
    event.preventDefault(); // Prevent default touch behavior
    const touch = event.touches[0]; // Get the first touch point

    const mouse = new THREE.Vector2();
    mouse.x = (touch.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(touch.clientY / window.innerHeight) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children);

    if (intersects.length > 0) {
        console.log('Touched object:', intersects[0].object);
    }
});

এখানে, touchstart ইভেন্টে প্রথম টাচ পয়েন্টের অবস্থান সংগ্রহ করা হচ্ছে এবং সেটি ৩ডি অবজেক্টের সাথে ইন্টারঅ্যাক্ট করতে Raycaster দিয়ে চেক করা হচ্ছে।

২. Touch Move ইভেন্ট

canvas.addEventListener('touchmove', (event) => {
    event.preventDefault();
    const touch = event.touches[0];

    const mouse = new THREE.Vector2();
    mouse.x = (touch.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(touch.clientY / window.innerHeight) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children);

    if (intersects.length > 0) {
        console.log('Touched and moving over:', intersects[0].object);
    }
});

touchmove ইভেন্টের মাধ্যমে, আপনি মোবাইল ডিভাইসে টাচ পয়েন্টের মুভমেন্ট ট্র্যাক করতে পারেন এবং এটি ৩ডি অবজেক্টে পরিবর্তন দেখানোর জন্য ব্যবহার করতে পারেন।

৩. Touch End ইভেন্ট

canvas.addEventListener('touchend', (event) => {
    event.preventDefault();
    console.log('Touch ended!');
    // আপনার প্রয়োজন অনুযায়ী কিছু করতে পারেন
});

touchend ইভেন্টটি তখন ট্রিগার হয় যখন ব্যবহারকারী টাচ স্ক্রীন ছেড়ে দেয়।

Mouse এবং Touch Events এর মধ্যে পার্থক্য

সারাংশ

Three.js-এ Mouse এবং Touch Events ব্যবস্থাপনা করা একটি গুরুত্বপূর্ণ অংশ যা ইউজার ইন্টারঅ্যাকশন এবং ৩ডি গ্রাফিক্সের মধ্যে সঠিক সম্পর্ক তৈরি করতে সাহায্য করে। Mouse ইভেন্টগুলো যেমন click, mousemove, mousedown, ইত্যাদি এবং Touch ইভেন্টগুলো যেমন touchstart, touchmove, touchend ব্যবহার করে আপনি ৩ডি অবজেক্টের সাথে ইন্টারঅ্যাক্ট করতে পারেন। Raycasting এর মাধ্যমে আপনি মাউস বা টাচ ইভেন্টের অবস্থান ব্যবহার করে ৩ডি অবজেক্টে ইন্টারঅ্যাকশন করতে পারবেন, যা আপনার ৩ডি অ্যাপ্লিকেশনকে আরো ইন্টারঅ্যাক্টিভ এবং ডাইনামিক করে তোলে।