Drag and Drop Interaction

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) উন্নত করতে সাহায্য করে, বিশেষ করে যখন ড্র্যাগ এবং ড্রপ ফিচার প্রয়োজন হয়।