Three.js خودِ API پایه‌ای برای کنترل مستقیم کاربر ندارد، اما ابزارها و کلاس‌های کمکی وجود دارند که کار با ماوس و لمس را راحت می‌کنند.

۱️⃣ OrbitControls

🔹 تعریف

• پرکاربردترین کنترل برای مشاهده صحنه از زوایای مختلف

• اجازه چرخش (rotate)، زوم (zoom) و جابجایی (pan) می‌دهد

🔹 نصب و import

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

🔹 مثال استفاده

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // برای حرکات نرم
controls.dampingFactor = 0.05;
controls.enableZoom = true; // فعال یا غیرفعال کردن زوم

📌 در حلقه animate:

function animate() {
  requestAnimationFrame(animate);
  controls.update(); // بروزرسانی کنترل
  renderer.render(scene, camera);
}

۲️⃣ TrackballControls

🔹 تعریف

• مشابه OrbitControls، اما چرخش آزادتر و طبیعی‌تر

• مناسب پروژه‌هایی که نیاز به چرخش 360 درجه دارند

🔹 نصب و import

import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';

۳️⃣ PointerLockControls

🔹 تعریف

• مناسب FPS (First Person) یا بازی‌های 3D

• موس را قفل می‌کند و حرکت دوربین به حرکت ماوس وابسته است

🔹 مثال

import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls.js';
const controls = new PointerLockControls(camera, renderer.domElement);

// برای فعال کردن PointerLock
document.addEventListener('click', () => {
  controls.lock();
});

۴️⃣ DragControls

🔹 تعریف

• اجازه کشیدن اشیاء (drag & drop) با ماوس

• فقط روی Object3Dها کار می‌کند

🔹 مثال

import { DragControls } from 'three/examples/jsm/controls/DragControls.js';

const objects = [cube1, cube2, cube3];
const dragControls = new DragControls(objects, camera, renderer.domElement);

dragControls.addEventListener('dragstart', function (event) {
  console.log('شروع Drag:', event.object);
});

۵️⃣ رویدادهای مستقیم ماوس و لمس

🔹 تعریف

• برای تعامل دقیق (Click، Hover)

• نیاز به Raycaster و رویدادهای DOM

🔹 مثال 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;
  
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children);

  intersects.forEach(obj => {
    obj.object.material.color.set(0xff0000);
  });
});

📌 با Raycaster می‌توان روی اشیاء کلیک، هاور یا لمس کرد و واکنش مناسب تعریف نمود.

۶️⃣ نکات مهم

• OrbitControls برای مشاهده صحنه، PointerLockControls برای FPS و بازی‌ها

• DragControls برای تعامل مستقیم با اشیاء

• Raycaster برای تشخیص برخورد موس یا لمس با اشیاء

• ترکیب کنترل‌ها با Touch هم امکان‌پذیر است (مثلا Pinch برای زوم)