Interactivity এবং User Input

Three.js এবং Interactivity

Three.js একটি জনপ্রিয় 3D JavaScript লাইব্রেরি যা HTML5 canvas এবং WebGL ব্যবহার করে 3D গ্রাফিক্স তৈরি করার জন্য ব্যবহৃত হয়। Three.js এর মাধ্যমে আপনি ওয়েব পেজে 3D দৃশ্য (scenes) এবং অবজেক্ট তৈরি করতে পারেন, এবং এগুলোর সাথে ইন্টারঅ্যাকশন ও ইউজার ইনপুট সংযোগ করতে পারেন।

ইন্টারঅ্যাকটিভিটি এবং ইউজার ইনপুট ব্যবহার করা হলে, ওয়েব পেজে 3D দৃশ্য আরও বেশি জীবন্ত এবং ব্যবহারকারী-বান্ধব হয়ে ওঠে। Three.js-এ Mouse Events, Keyboard Events, এবং Touch Events ব্যবহার করে আপনি ইউজারের ইনপুট গ্রহণ করতে পারেন এবং 3D দৃশ্যের সাথে ইন্টারঅ্যাকটিভ অপারেশন তৈরি করতে পারেন।

Three.js-এ Interactivity তৈরি করার পদ্ধতি

১. Mouse Events (মাউস ইভেন্টস)

মাউস ব্যবহারকারী ইন্টারঅ্যাকশনের জন্য সবচেয়ে সাধারণ ইনপুট। Three.js মাউসের অবস্থান এবং ক্লিক ইভেন্ট গ্রহণ করতে সক্ষম। আপনি মাউস ইভেন্ট ব্যবহার করে 3D অবজেক্ট নির্বাচন বা ম্যানিপুলেট করতে পারেন।

Three.js-এ মাউস ইভেন্ট যোগ করতে, সাধারণত Raycasting ব্যবহার করা হয়, যা দৃশ্যের মধ্যে মাউসের ক্লিক বা পয়েন্টের সাথে মিলিয়ে অবজেক্ট নির্বাচন করতে সহায়তা করে।

উদাহরণ: Mouse Click Interaction

// Scene, Camera, Renderer Setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create a cube
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Set camera position
camera.position.z = 5;

// Raycaster and mouse vector for interaction
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

// Event listener for mouse clicks
window.addEventListener('click', (event) => {
  // Normalized device coordinates (NDC)
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // Update raycaster with mouse position
  raycaster.update();

  // Find objects intersecting the ray
  const intersects = raycaster.intersectObjects(scene.children);

  if (intersects.length > 0) {
    // Change color of the intersected object (cube)
    intersects[0].object.material.color.set(0xff0000);
  }
});

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();

এখানে, Raycasting ব্যবহার করে মাউস ক্লিকের সাথে 3D অবজেক্ট নির্বাচন করা হচ্ছে এবং ক্লিক করার পর তার রঙ পরিবর্তন করা হচ্ছে।

২. Keyboard Events (কীবোর্ড ইভেন্টস)

কীবোর্ড ইভেন্ট ব্যবহার করে আপনি ইউজারের কীবোর্ড ইনপুট ধরতে পারেন। এটি 3D দৃশ্যে ক্যামেরা নিয়ন্ত্রণ, অবজেক্ট মুভমেন্ট বা অন্যান্য ইন্টারঅ্যাকটিভিটি তৈরি করতে সহায়তা করে।

উদাহরণ: Keyboard Interaction

// Keyboard event listener
let speed = 0.1;

window.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowUp') {
    cube.position.z -= speed;  // Move cube forward
  }
  if (event.key === 'ArrowDown') {
    cube.position.z += speed;  // Move cube backward
  }
  if (event.key === 'ArrowLeft') {
    cube.position.x -= speed;  // Move cube left
  }
  if (event.key === 'ArrowRight') {
    cube.position.x += speed;  // Move cube right
  }
});

এখানে, কীবোর্ডের Arrow keys ব্যবহার করে একটি 3D অবজেক্ট (cube) এর স্থান পরিবর্তন করা হচ্ছে।

৩. Touch Events (টাচ ইভেন্টস)

মোবাইল ডিভাইসে ইন্টারঅ্যাকশনের জন্য Touch Events খুবই গুরুত্বপূর্ণ। আপনি TouchStart, TouchMove, এবং TouchEnd ইভেন্টের মাধ্যমে ব্যবহারকারীর টাচ ইনপুট গ্রহণ করতে পারেন। এতে ব্যবহারকারী স্ক্রিনে টাচ করে 3D অবজেক্টের সাথে ইন্টারঅ্যাক্ট করতে পারবেন।

উদাহরণ: Touch Interaction

window.addEventListener('touchstart', (event) => {
  const touch = event.touches[0]; // Get first touch point
  mouse.x = (touch.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(touch.clientY / window.innerHeight) * 2 + 1;

  // Update raycaster with touch position
  raycaster.update();

  const intersects = raycaster.intersectObjects(scene.children);

  if (intersects.length > 0) {
    intersects[0].object.material.color.set(0x0000ff);
  }
});

এখানে, TouchStart ইভেন্ট ব্যবহার করে একটি 3D অবজেক্টের সাথে মোবাইল স্ক্রিনের টাচ ইন্টারঅ্যাকশন করা হচ্ছে এবং টাচ করার পর অবজেক্টের রঙ পরিবর্তন হচ্ছে।

৪. Mouse Move and Hover Effects

মাউস মুভমেন্ট ইভেন্ট ব্যবহার করে আপনি 3D অবজেক্টে হোভার (hover) ইফেক্ট তৈরি করতে পারেন, যেমন একটি অবজেক্টের উপর মাউস নিয়ে গেলে তার আকার বা রঙ পরিবর্তন করা।

উদাহরণ: Mouse Hover Interaction

window.addEventListener('mousemove', (event) => {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // Update raycaster with mouse position
  raycaster.update();

  const intersects = raycaster.intersectObjects(scene.children);

  if (intersects.length > 0) {
    intersects[0].object.material.color.set(0xffff00);  // Change color to yellow
  }
});

এখানে, মাউসের অবস্থান পরিবর্তন হলে 3D অবজেক্টের রঙ পরিবর্তিত হচ্ছে।

৫. Adding UI Elements with Three.js Interactivity

Three.js এর সাথে HTML/CSS ভিত্তিক UI উপাদান যেমন বাটন, স্লাইডার ইত্যাদি যুক্ত করা সম্ভব। আপনি Three.js এর 3D দৃশ্যের সাথে HTML UI উপাদানগুলিকে একত্রে ব্যবহার করে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব অ্যাপ্লিকেশন তৈরি করতে পারেন।

উদাহরণ: HTML UI with Three.js

<button id="rotateButton">Rotate Cube</button>

document.getElementById('rotateButton').addEventListener('click', () => {
  cube.rotation.x += 0.1;
  cube.rotation.y += 0.1;
});

এখানে, একটি HTML বাটনের মাধ্যমে Cube অবজেক্টটি রোটেট করা হচ্ছে।

সারাংশ

Three.js ব্যবহার করে ওয়েবপেইজে ইন্টারঅ্যাকটিভ 3D গ্রাফিক্স তৈরি করা অনেক সহজ এবং শক্তিশালী। মাউস, কীবোর্ড, এবং টাচ ইভেন্ট ব্যবহার করে ইউজারদের সাথে ইন্টারঅ্যাকশন তৈরি করতে পারেন। Raycasting, Mouse Events, Keyboard Events, Touch Events ইত্যাদি ব্যবহারের মাধ্যমে 3D অবজেক্টের সাথে কার্যকরী ইন্টারঅ্যাকটিভিটি এবং ইউজার ইনপুট সংযোগ করা সম্ভব। Three.js দিয়ে আপনি আপনার ওয়েবপেজে ইন্টারঅ্যাকটিভ 3D অ্যাপ্লিকেশন তৈরি করতে পারবেন, যা ব্যবহারকারীদের জন্য আরো আকর্ষণীয় এবং কার্যকরী হবে।

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 এর মাধ্যমে আপনি মাউস বা টাচ ইভেন্টের অবস্থান ব্যবহার করে ৩ডি অবজেক্টে ইন্টারঅ্যাকশন করতে পারবেন, যা আপনার ৩ডি অ্যাপ্লিকেশনকে আরো ইন্টারঅ্যাক্টিভ এবং ডাইনামিক করে তোলে।

Three.js এবং Raycaster

Three.js হল একটি 3D গ্রাফিক্স লাইব্রেরি যা ওয়েব ব্রাউজারে 3D গ্রাফিক্স রেন্ডার করার জন্য ব্যবহৃত হয়। এটি WebGL এর উপর ভিত্তি করে কাজ করে এবং JavaScript দিয়ে 3D দৃশ্য তৈরি করা অনেক সহজ করে তোলে। Raycaster হল একটি খুবই গুরুত্বপূর্ণ কৌশল Three.js-এ, যা 3D দৃশ্যে কোনো নির্দিষ্ট পয়েন্টে "রশ্মি" পাঠানোর মাধ্যমে বিভিন্ন 3D অবজেক্ট সিলেক্ট করতে সাহায্য করে।

Raycasting একটি রশ্মি (ray) ব্যবহার করে এটি নির্দিষ্ট 3D অবজেক্টের সাথে সংঘর্ষ (collision) শনাক্ত করতে পারে। এই কৌশলটি Mouse Events, Picking বা Collision Detection সহ অনেক ক্ষেত্রে ব্যবহার হয়।

Raycaster কীভাবে কাজ করে?

Raycaster ব্যবহার করে, আপনি মাউস বা অন্য কোনো ইনপুট থেকে রশ্মি তৈরি করেন, এবং এটি দৃশ্যের মধ্যে কিসে সংঘর্ষ ঘটছে তা চেক করে। আপনি যখন কোনো 3D অবজেক্টের সাথে রশ্মির সংঘর্ষ ঘটান, তখন আপনি সেই অবজেক্টটি সিলেক্ট বা হাইলাইট করতে পারেন।

Raycaster কাজের মূল ধারণা:

1. মাউস বা কীবোর্ডের ইনপুট থেকে 3D রশ্মি তৈরি করা।
2. সেই রশ্মি প্রেক্ষাপটে (scene) 3D অবজেক্টগুলির সঙ্গে সংঘর্ষ খুঁজে বের করা।
3. সংঘর্ষের সাথে সম্পর্কিত অবজেক্টগুলির সাথে ইন্টারঅ্যাকশন করা (যেমন সিলেকশন, হাইলাইট, ইত্যাদি)।

Raycaster ব্যবহার করে Object Selection উদাহরণ

আমরা এখানে একটি সহজ উদাহরণ দেখব যেখানে ব্যবহারকারী মাউস ক্লিক করে 3D দৃশ্যের মধ্যে অবজেক্ট সিলেক্ট করতে পারবেন।

ধাপ ১: প্রাথমিক সেটআপ

প্রথমে আমরা একটি Three.js দৃশ্য তৈরি করব এবং সেখানে একটি অবজেক্ট যুক্ত করব, যেমন একটি স্পিয়ার (sphere)।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Raycaster Example</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // Scene Setup
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Sphere Geometry
        const geometry = new THREE.SphereGeometry(1, 32, 32);
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const sphere = new THREE.Mesh(geometry, material);
        scene.add(sphere);

        // Position the camera
        camera.position.z = 5;

        // Animation function
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>

এখানে, একটি স্পিয়ার তৈরি করা হয়েছে এবং সেটি দৃশ্যে যোগ করা হয়েছে। ক্যামেরা কিছুটা পিছনে রাখা হয়েছে যাতে স্পিয়ারটি দৃশ্যে দৃশ্যমান হয়।

ধাপ ২: Raycaster সেটআপ এবং Mouse Event

এখন, আমরা Raycaster ব্যবহার করে মাউস ক্লিকের মাধ্যমে sphere অবজেক্ট সিলেক্ট করার জন্য কোড যুক্ত করব।

<script>
    // Create Raycaster and Mouse Vector
    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();

    // Listen to mouse click event
    window.addEventListener('click', onMouseClick, false);

    function onMouseClick(event) {
        // Normalize mouse position (between -1 and 1)
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

        // Update the raycaster with the mouse position and camera
        raycaster.update();
        raycaster.setFromCamera(mouse, camera);

        // Find intersections
        const intersects = raycaster.intersectObjects(scene.children);

        if (intersects.length > 0) {
            // Change the color of the intersected object
            intersects[0].object.material.color.set(0xff0000);  // Red color for selected object
            console.log('Object selected:', intersects[0].object);
        }
    }
</script>

এখানে আমরা mouse ভেক্টর এবং Raycaster ব্যবহার করছি। যখন ব্যবহারকারী মাউস ক্লিক করে, আমরা মাউসের অবস্থান থেকে একটি রশ্মি (ray) তৈরি করি এবং তা scene-এর সব অবজেক্টের সাথে চেক করি। যদি রশ্মির সঙ্গে কোন অবজেক্টের সংঘর্ষ ঘটে, তাহলে সেই অবজেক্টটি সিলেক্ট করা হবে এবং এর রং পরিবর্তন হবে।

ধাপ ৩: Raycaster এর কাজ

এখন, যদি আপনি পৃষ্ঠায় ক্লিক করেন, রশ্মি (ray) sphere অবজেক্টে যাবে এবং sphere এর রং পরিবর্তন হবে। এখানে আমরা সিলেক্ট করা অবজেক্টের তথ্য কনসোলে প্রিন্ট করেও দেখাচ্ছি।

Raycaster ব্যবহারের জন্য উন্নত কৌশল

1. Multiple Objects Selection: আপনি একইভাবে একাধিক অবজেক্টের সাথে রশ্মির সংঘর্ষ পরীক্ষা করতে পারেন, এবং মাউসের ক্লিক দিয়ে তাদের মধ্যে নির্বাচন করতে পারবেন।
2. Highlighting Selected Object: অবজেক্ট সিলেক্ট হলে তার রং পরিবর্তন করার পাশাপাশি একটি বিশেষ হাইলাইট (যেমন গ্লো, আউটার বর্ডার) প্রয়োগ করতে পারেন।
3. Custom Intersection Detection: আপনি রশ্মির সংঘর্ষের জন্য কাস্টম লজিক প্রয়োগ করতে পারেন, যেমন কিছু নির্দিষ্ট অবজেক্টের মধ্যে সংঘর্ষ হতে হবে।

সারাংশ

Raycaster হল Three.js এ অবজেক্ট সিলেকশন, picking, এবং collision detection এর জন্য ব্যবহৃত একটি গুরুত্বপূর্ণ কৌশল। এটি মাউস, কীবোর্ড, বা অন্য ইনপুট ডিভাইস থেকে রশ্মি তৈরি করে এবং এটি 3D দৃশ্যে অবজেক্টের সাথে সংঘর্ষ চেক করে। এই কৌশলটি ব্যবহার করে, আপনি 3D গ্রাফিক্সে ইন্টারঅ্যাকটিভ ফিচার যুক্ত করতে পারেন, যেমন অবজেক্ট সিলেকশন, হাইলাইট, এবং ম্যানিপুলেশন। Raycaster ব্যবহার করে আপনি সহজেই ব্যবহারকারীকে 3D দৃশ্যে অবজেক্টের সাথে ইন্টারঅ্যাকশন করতে পারবেন।

Three.js এবং Drag and Drop Interaction

Three.js হল একটি জনপ্রিয় JavaScript লাইব্রেরি যা 3D গ্রাফিক্স তৈরি করতে সাহায্য করে এবং WebGL এর উপর ভিত্তি করে কাজ করে। এটি ব্রাউজারে সহজে 3D অবজেক্ট এবং দৃশ্য তৈরি করতে ব্যবহৃত হয়। Drag and Drop Interaction ব্যবহারকারীদের সাথে 3D অবজেক্টের ইন্টারঅ্যাকশন করার জন্য একটি আকর্ষণীয় উপায় হতে পারে, যেখানে ব্যবহারকারী মাউস বা টাচ স্ক্রীন ব্যবহার করে অবজেক্টগুলি টেনে নিয়ে যেতে পারে বা স্থানান্তর করতে পারে।

Three.js এর মাধ্যমে Drag and Drop Interaction এর জন্য আপনাকে কিছু মৌলিক কৌশল যেমন raycasting এবং event handling ব্যবহার করতে হবে, যাতে ব্যবহারকারী 3D দৃশ্যে অবজেক্টগুলি ক্লিক ও টেনে নিয়ে যেতে পারে। নিচে এই ধরনের ইন্টারঅ্যাকশন সেটআপ করার উদাহরণ এবং প্রক্রিয়া দেওয়া হল।

১. Three.js ইন্সটলেশন এবং সঠিক সেটআপ

প্রথমে, আপনাকে Three.js ইনস্টল করতে হবে এবং একটি সাধারণ 3D সিচুয়েশন তৈরি করতে হবে। আপনি npm বা CDN থেকে Three.js লাইব্রেরি ইনস্টল করতে পারেন।

npm ব্যবহার করে Three.js ইনস্টলেশন:

npm install three

এবং তারপর আপনার প্রোজেক্টে ব্যবহার করুন:

import * as THREE from 'three';

CDN থেকে Three.js ব্যবহার:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

২. Basic Three.js Scene Setup

এই অংশে আমরা একটি সাধারণ Three.js সীন্স তৈরি করব যেখানে একটি 3D অবজেক্ট থাকবে এবং সেটি ড্র্যাগ এবং ড্রপ ইন্টারঅ্যাকশনের জন্য প্রস্তুত থাকবে।

import * as THREE from 'three';

// Scene, Camera, and Renderer Setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// A cube for interaction
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Camera position
camera.position.z = 5;

// Render the scene
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

এখানে একটি সাধারণ 3D cube তৈরি করা হয়েছে, যা পরবর্তীতে ড্র্যাগ এবং ড্রপ ইন্টারঅ্যাকশন সহ করবে।

৩. Drag and Drop Interaction: Raycasting এবং Mouse Events

Raycasting হল একটি কৌশল যা Three.js এ মাউস পয়েন্টার বা টাচ ইন্টারঅ্যাকশনের মাধ্যমে 3D অবজেক্ট চিহ্নিত করতে সাহায্য করে। এই কৌশলটি ব্যবহারকারী ক্লিক করলে বা টেনে নিলে তার অবস্থান শনাক্ত করে, এবং সেই অবস্থানে অবজেক্টটি স্থানান্তরিত করতে সাহায্য করে।

Raycasting Setup:

// Raycaster and Mouse Vector Setup
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

// Mouse Event Listener
function onMouseMove(event) {
  // Normalize mouse coordinates
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

window.addEventListener('mousemove', onMouseMove, false);

// Mouse click event
let isDragging = false;
let selectedObject = null;

function onMouseClick(event) {
  // Raycasting logic to detect object under mouse
  raycaster.update(camera, renderer.domElement);
  const intersects = raycaster.intersectObject(cube);

  if (intersects.length > 0) {
    selectedObject = intersects[0].object;
    isDragging = true;
  }
}

function onMouseUp(event) {
  isDragging = false;
  selectedObject = null;
}

window.addEventListener('click', onMouseClick, false);
window.addEventListener('mouseup', onMouseUp, false);

এখানে, আমরা মাউসের অবস্থান ট্র্যাক করি এবং raycaster ব্যবহার করে cube এর উপর ক্লিক করলে সেটি সিলেক্ট করা হয়। যখন ক্লিক করা হয়, selectedObject আপডেট হয় এবং isDragging সত্য হয়ে যায়।

৪. Object Dragging Logic

অবজেক্টটি ড্র্যাগ করার জন্য, আপনি মাউসের অবস্থান ট্র্যাক করে সেই অবস্থানে অবজেক্টটি স্থানান্তরিত করতে পারেন।

function animate() {
  requestAnimationFrame(animate);

  // If the object is being dragged, update its position
  if (isDragging && selectedObject) {
    const intersects = raycaster.intersectObject(selectedObject);
    if (intersects.length > 0) {
      selectedObject.position.copy(intersects[0].point);
    }
  }

  renderer.render(scene, camera);
}
animate();

এখানে, মাউস ড্র্যাগিংয়ের মাধ্যমে অবজেক্টটি সেই পয়েন্টে চলে আসবে যেখানে raycaster ক্লিকের সময় অবজেক্টের সাথে ইন্টারসেপ্ট করেছে।

৫. ক্যামেরা নিয়ন্ত্রণ এবং টানেল ইফেক্ট

ব্যবহারকারীকে আরও ইন্টারঅ্যাকটিভ অনুভূতি দিতে, ক্যামেরা নিয়ন্ত্রণের জন্য আপনি OrbitControls ব্যবহার করতে পারেন। এটি ব্যবহারকারীর মাউস বা টাচ প্যানেল ব্যবহার করে 3D দৃশ্যের আশপাশে ঘোরানো, প্যান করা এবং জুম ইন বা আউট করার সুযোগ দেয়।

OrbitControls Setup:

import { OrbitControls } from 'three/examples/js/controls/OrbitControls';

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.screenSpacePanning = false;
controls.maxPolarAngle = Math.PI / 2;

এটি ক্যামেরা নিয়ন্ত্রণের জন্য সহজে 3D দৃশ্যের ইন্টারঅ্যাকশন তৈরি করতে সাহায্য করবে।

সারাংশ

Three.js-এর মাধ্যমে Drag and Drop Interaction সহজেই তৈরি করা যেতে পারে। আপনি raycasting এবং mouse events ব্যবহার করে অবজেক্টের অবস্থান এবং মাউস পয়েন্টারের ইন্টারঅ্যাকশন ট্র্যাক করতে পারেন। এই পদ্ধতিতে, ব্যবহারকারী 3D অবজেক্টগুলোকে টেনে নিয়ে যেতে পারে এবং অবজেক্টগুলির সাথে ইন্টারঅ্যাক্ট করতে পারে। অতিরিক্তভাবে, OrbitControls ব্যবহার করে ক্যামেরা নিয়ন্ত্রণের মাধ্যমে আরও উন্নত ইন্টারঅ্যাকশন প্রদান করা সম্ভব। Three.js এর এই ইন্টারঅ্যাকশনগুলো ব্যবহারকারী অভিজ্ঞতা (UX) উন্নত করতে সাহায্য করে, বিশেষ করে যখন ড্র্যাগ এবং ড্রপ ফিচার প্রয়োজন হয়।

Three.js এবং dat.GUI এর ভূমিকা

Three.js হল একটি JavaScript লাইব্রেরি যা 3D গ্রাফিক্স তৈরি করতে ব্যবহৃত হয়, যা ব্রাউজারে রেন্ডার করা যায়। এটি WebGL এর উপর ভিত্তি করে কাজ করে এবং 3D সিকোয়েন্স বা দৃশ্য তৈরি করার জন্য সহজ এবং শক্তিশালী একটি টুল প্রদান করে।

এছাড়া, dat.GUI হল একটি গ্রাফিক্যাল ইউজার ইন্টারফেস (GUI) লাইব্রেরি যা JavaScript-এ কাস্টম ইউজার ইন্টারফেস তৈরি করতে সহায়তা করে। এটি সাধারনত ডেভেলপারদের জন্য বিভিন্ন ধরনের ভেরিয়েবল যেমন দৃশ্যের ক্যামেরা, লাইট, এবং অবজেক্টের গুণাবলী নিয়ন্ত্রণের জন্য ব্যবহৃত হয়।

dat.GUI ব্যবহার করে Three.js দৃশ্যের বিভিন্ন উপাদান যেমন ক্যামেরা, লাইট, অবজেক্ট ইত্যাদি নিয়ন্ত্রণ করা সহজ হয়ে যায়। এটি আপনাকে রিয়েল টাইমে দৃশ্যের পরিবর্তন দেখতে সাহায্য করে।

dat.GUI ব্যবহার করে Three.js Scene নিয়ন্ত্রণ

dat.GUI লাইব্রেরি Three.js-এ 3D দৃশ্যের উপাদানগুলির জন্য কাস্টম GUI তৈরি করতে ব্যবহৃত হয়। এর মাধ্যমে আপনি দৃশ্যের বৈশিষ্ট্য যেমন ক্যামেরার অবস্থান, লাইটের প্রভাব, বা কোনো 3D অবজেক্টের রঙ পরিবর্তন করতে পারবেন। চলুন, কীভাবে dat.GUI ব্যবহার করে Three.js দৃশ্য নিয়ন্ত্রণ করা যায়, তা উদাহরণ দিয়ে দেখি।

১. dat.GUI ইনস্টলেশন

প্রথমে dat.GUI ইনস্টল করতে হবে। আপনি CDN ব্যবহার করে এটি ব্রাউজারে ইনক্লুড করতে পারেন অথবা npm বা yarn এর মাধ্যমে এটি ইনস্টল করতে পারেন।

CDN ব্যবহার করে:

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat.gui/0.7.7/dat.gui.min.js"></script>

npm/yarn ব্যবহার করে:

npm install dat.gui

২. একটি সাধারণ Three.js Scene সেটআপ

একটি সাধারণ Three.js দৃশ্য তৈরি করা এবং তার পর dat.GUI দিয়ে সেই দৃশ্যের উপাদান নিয়ন্ত্রণ করার জন্য নিচের কোডটি দেখতে পারেন।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js with dat.GUI</title>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat.gui/0.7.7/dat.gui.min.js"></script>
  
  <script>
    // Scene, Camera and Renderer Setup
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // Create a Cube
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // Set the camera position
    camera.position.z = 5;

    // dat.GUI setup
    const gui = new dat.GUI();
    
    // Cube controls
    const cubeFolder = gui.addFolder('Cube');
    cubeFolder.add(cube.rotation, 'x', 0, Math.PI * 2);
    cubeFolder.add(cube.rotation, 'y', 0, Math.PI * 2);
    cubeFolder.add(cube.rotation, 'z', 0, Math.PI * 2);
    cubeFolder.add(cube.scale, 'x', 0, 2);
    cubeFolder.add(cube.scale, 'y', 0, 2);
    cubeFolder.add(cube.scale, 'z', 0, 2);

    // Background color controls
    const controls = {
      color: '#000000'
    };
    gui.addColor(controls, 'color').onChange(function(value) {
      scene.background = new THREE.Color(value);
    });

    // Render loop
    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }

    animate();
  </script>
</body>
</html>

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

• Scene, Camera, and Renderer: প্রথমে একটি scene তৈরি করা হয়, তারপর একটি PerspectiveCamera সেট করা হয়, যা 3D দৃশ্যের দর্শনীয় দিক নিয়ন্ত্রণ করবে। এরপর, একটি WebGLRenderer ব্যবহার করে সেই দৃশ্য রেন্ডার করা হয়।
• Cube Creation: একটি সাধারণ cube তৈরি করা হয়, যা BoxGeometry এবং MeshBasicMaterial ব্যবহার করে তৈরি করা হয়। এটি দৃশ্যে যোগ করা হয়।
• dat.GUI Integration:
  • dat.GUI ব্যবহার করে ইউজার ইন্টারফেস তৈরি করা হয় যা Cube এর rotation এবং scale নিয়ন্ত্রণ করতে পারে।
  • cubeFolder.add(cube.rotation, 'x', 0, Math.PI * 2) এর মাধ্যমে Cube এর rotation প্রপার্টি নিয়ন্ত্রণ করা হচ্ছে।
  • Background Color পরিবর্তন করার জন্য একটি color picker যোগ করা হয়েছে যা scene.background প্রপার্টি পরিবর্তন করবে।
• Render Loop: animate() ফাংশনটি requestAnimationFrame ব্যবহার করে দৃশ্যটি নিয়মিতভাবে রেন্ডার করে।

৪. অতিরিক্ত কাস্টমাইজেশন এবং GUI Control

• Camera Controls: আপনি GUI-তে ক্যামেরার অবস্থান নিয়ন্ত্রণের জন্য নতুন অপশন যোগ করতে পারেন।

  const cameraFolder = gui.addFolder('Camera');
  cameraFolder.add(camera.position, 'x', -10, 10);
  cameraFolder.add(camera.position, 'y', -10, 10);
  cameraFolder.add(camera.position, 'z', -10, 10);
  

• Light Controls: যদি আপনার দৃশ্যে আলো (light) থাকে, তবে আপনি সেটি নিয়ন্ত্রণ করার জন্য GUI ব্যবহার করতে পারেন।

  const light = new THREE.PointLight(0xffffff, 1, 100);
  light.position.set(10, 10, 10);
  scene.add(light);
  
  const lightFolder = gui.addFolder('Light');
  lightFolder.add(light.position, 'x', -10, 10);
  lightFolder.add(light.position, 'y', -10, 10);
  lightFolder.add(light.position, 'z', -10, 10);
  

সারাংশ

dat.GUI হল একটি শক্তিশালী লাইব্রেরি যা আপনাকে Three.js দৃশ্যের উপাদান যেমন ক্যামেরা, লাইট, অবজেক্ট ইত্যাদি নিয়ন্ত্রণ করতে সাহায্য করে। আপনি rotation, scale, position, background color সহ অন্যান্য বৈশিষ্ট্য পরিবর্তন করতে পারবেন এবং রিয়েল টাইমে আপনার পরিবর্তনগুলো দেখতে পারবেন। এটি একটি সহজ এবং কার্যকরী টুল যা 3D দৃশ্য এবং অ্যাপ্লিকেশনগুলোতে ইন্টারঅ্যাকটিভ কাস্টমাইজেশন যোগ করার জন্য ব্যবহৃত হয়।