Three.js یک Animation API کامل دارد که شامل کلاس‌ها و ابزارهای مختلف برای انیمیشن‌سازی اشیاء، مدل‌ها و اسکلت‌بندی است.

۱️⃣ کلاس‌های اصلی Animation

۲️⃣ KeyframeTrack

• VectorKeyframeTrack → تغییر موقعیت (position)

• QuaternionKeyframeTrack → تغییر چرخش (rotation)

• NumberKeyframeTrack → تغییر مقادیر عددی (scale یا custom property)

مثال ساده KeyframeTrack

const positionKF = new THREE.VectorKeyframeTrack(
  '.position',          // مسیر ویژگی
  [0, 1, 2],            // زمان‌ها (ثانیه)
  [0,0,0, 2,2,0, 0,0,0] // مقادیر (x,y,z)
);

۳️⃣ AnimationClip

• مجموعه‌ای از Trackها

• تعریف طول و نام انیمیشن

const clip = new THREE.AnimationClip('moveCube', 2, [positionKF]);

۴️⃣ AnimationMixer و AnimationAction

ایجاد Mixer و پخش انیمیشن

const mixer = new THREE.AnimationMixer(cube);  // cube: Object3D
const action = mixer.clipAction(clip);
action.play();

بروزرسانی Mixer در حلقه animate

const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);
  const delta = clock.getDelta();
  mixer.update(delta); // بروزرسانی انیمیشن
  renderer.render(scene, camera);
}
animate();

۵️⃣ انیمیشن مدل‌های اسکلت‌بندی (SkinnedMesh)

• برای مدل‌های Rigged / اسکلت‌بندی

• AnimationMixer با AnimationClipهای FBX یا glTF کار می‌کند

const mixer = new THREE.AnimationMixer(skinnedMesh);
const clip = gltf.animations[0];
const action = mixer.clipAction(clip);
action.play();

۶️⃣ Animation Utilities

• THREE.Clock → مدیریت زمان بین فریم‌ها

• THREE.LoopOnce, LoopRepeat, LoopPingPong → کنترل تکرار انیمیشن

• crossFadeTo → ترکیب نرم بین انیمیشن‌ها

مثال Crossfade

action1.crossFadeTo(action2, 0.5, false); // انتقال نرم در 0.5 ثانیه

۷️⃣ نکات مهم

• AnimationClip می‌تواند شامل چند Track باشد (position + rotation + scale)

• AnimationMixer امکان کنترل پیشرفته مثل Pause, Stop, Fade, Loop را می‌دهد

• مناسب برای مدل‌های glTF با اسکلت‌بندی و بازی‌های 3D