🔹 تعریف

Raycaster یک خط (Ray) از یک نقطه در فضا می‌سازد و بررسی می‌کند که چه اشیائی با آن خط برخورد دارند.

• مناسب انتخاب، کلیک، هاور، لمس

• پایه اکثر تعاملات سه‌بعدی در بازی‌ها و اپلیکیشن‌ها

۱️⃣ ایجاد Raycaster

const raycaster = new THREE.Raycaster(); // ایجاد Raycaster
const mouse = new THREE.Vector2();      // موقعیت ماوس (نرمال شده)

۲️⃣ گرفتن موقعیت ماوس

• موقعیت ماوس باید به Normal Device Coordinates (NDC) تبدیل شود:

  • X و Y بین -1 تا 1

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

۳️⃣ بررسی برخورد Ray با اشیاء

// تنظیم Raycaster
raycaster.setFromCamera(mouse, camera);

// بررسی برخورد با اشیاء صحنه
const intersects = raycaster.intersectObjects(scene.children);

intersects.forEach(intersect => {
  intersect.object.material.color.set(0xff0000); // تغییر رنگ برای انتخاب
});

📌 intersectObjects آرایه‌ای از اشیاء که با Ray برخورد کردند برمی‌گرداند.

۴️⃣ مثال کامل

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// اشیاء
const cube1 = new THREE.Mesh(new THREE.BoxGeometry(1,1,1), new THREE.MeshStandardMaterial({ color: 0x00ff00 }));
cube1.position.x = -2;
scene.add(cube1);

const cube2 = new THREE.Mesh(new THREE.BoxGeometry(1,1,1), new THREE.MeshStandardMaterial({ color: 0x0000ff }));
cube2.position.x = 2;
scene.add(cube2);

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5,5,5);
scene.add(light);

// Raycaster
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

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

function animate() {
  requestAnimationFrame(animate);

  // تنظیم Raycaster
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children);

  // Reset رنگ اشیاء
  scene.children.forEach(obj => {
    if (obj.material) obj.material.color.set(obj.userData.originalColor || obj.material.color);
  });

  // تغییر رنگ اشیاء انتخاب شده
  intersects.forEach(intersect => {
    intersect.object.material.color.set(0xff0000);
  });

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

📌 در این مثال:

• با حرکت ماوس، اشیاء که تحت Ray قرار می‌گیرند رنگشان تغییر می‌کند

• Raycaster می‌تواند برای کلیک و انتخاب اشیاء هم استفاده شود

۵️⃣ نکات مهم

• فقط اشیاءی که Mesh دارند را می‌توان بررسی کرد

• برای اشیاء گروه‌بندی شده، می‌توان intersectObjects(group.children, true) استفاده کرد

• Raycaster می‌تواند تعاملات لمسی (Touch) را هم پوشش دهد

• ترکیب با OrbitControls و DragControls باعث ایجاد تعامل حرفه‌ای می‌شود