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 কাজের মূল ধারণা:
- মাউস বা কীবোর্ডের ইনপুট থেকে 3D রশ্মি তৈরি করা।
- সেই রশ্মি প্রেক্ষাপটে (scene) 3D অবজেক্টগুলির সঙ্গে সংঘর্ষ খুঁজে বের করা।
- সংঘর্ষের সাথে সম্পর্কিত অবজেক্টগুলির সাথে ইন্টারঅ্যাকশন করা (যেমন সিলেকশন, হাইলাইট, ইত্যাদি)।
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 ব্যবহারের জন্য উন্নত কৌশল
- Multiple Objects Selection: আপনি একইভাবে একাধিক অবজেক্টের সাথে রশ্মির সংঘর্ষ পরীক্ষা করতে পারেন, এবং মাউসের ক্লিক দিয়ে তাদের মধ্যে নির্বাচন করতে পারবেন।
- Highlighting Selected Object: অবজেক্ট সিলেক্ট হলে তার রং পরিবর্তন করার পাশাপাশি একটি বিশেষ হাইলাইট (যেমন গ্লো, আউটার বর্ডার) প্রয়োগ করতে পারেন।
- Custom Intersection Detection: আপনি রশ্মির সংঘর্ষের জন্য কাস্টম লজিক প্রয়োগ করতে পারেন, যেমন কিছু নির্দিষ্ট অবজেক্টের মধ্যে সংঘর্ষ হতে হবে।
সারাংশ
Raycaster হল Three.js এ অবজেক্ট সিলেকশন, picking, এবং collision detection এর জন্য ব্যবহৃত একটি গুরুত্বপূর্ণ কৌশল। এটি মাউস, কীবোর্ড, বা অন্য ইনপুট ডিভাইস থেকে রশ্মি তৈরি করে এবং এটি 3D দৃশ্যে অবজেক্টের সাথে সংঘর্ষ চেক করে। এই কৌশলটি ব্যবহার করে, আপনি 3D গ্রাফিক্সে ইন্টারঅ্যাকটিভ ফিচার যুক্ত করতে পারেন, যেমন অবজেক্ট সিলেকশন, হাইলাইট, এবং ম্যানিপুলেশন। Raycaster ব্যবহার করে আপনি সহজেই ব্যবহারকারীকে 3D দৃশ্যে অবজেক্টের সাথে ইন্টারঅ্যাকশন করতে পারবেন।
Read more
