Three.js یک Animation API قدرتمند دارد که به شما اجازه می‌دهد حرکات و انیمیشن‌های پیشرفته بسازید.

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

۲️⃣ AnimationClip و KeyframeTrack

🔹 KeyframeTrack

• تعریف مسیر تغییر ویژگی‌ها با زمان

• انواع رایج:

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

  • QuaternionKeyframeTrack → چرخش (rotation)

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

🔹 مثال KeyframeTrack

import * as THREE from 'three';

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

🔹 AnimationClip

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

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

• 'moveCube' → نام انیمیشن

• 2 → طول کل انیمیشن به ثانیه

• [positionKF] → آرایه Trackها

۳️⃣ AnimationMixer و AnimationAction

🔹 AnimationMixer

• مدیریت پخش، توقف، و blend بین انیمیشن‌ها

const mixer = new THREE.AnimationMixer(cube); // cube: Object3D
const action = mixer.clipAction(clip); // ایجاد Action از AnimationClip
action.play(); // شروع انیمیشن

🔹 بروزرسانی Mixer در حلقه انیمیشن

const clock = new THREE.Clock();

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

۴️⃣ مثال کامل انیمیشن مکعب

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 cube = new THREE.Mesh(
  new THREE.BoxGeometry(1,1,1),
  new THREE.MeshStandardMaterial({ color: 0x00ff00 })
);
scene.add(cube);

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

// KeyframeTrack
const positionKF = new THREE.VectorKeyframeTrack('.position', [0,1,2], [0,0,0, 2,2,0, 0,0,0]);

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

// Mixer و Action
const mixer = new THREE.AnimationMixer(cube);
const action = mixer.clipAction(clip);
action.play();

const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);
  const delta = clock.getDelta();
  mixer.update(delta);
  renderer.render(scene, camera);
}
animate();

📌 این مثال نشان می‌دهد:

• چگونه یک Object3D حرکت می‌کند

• ساخت KeyframeTrack، Clip و Mixer

• بروزرسانی انیمیشن در حلقه render

۵️⃣ نکات مهم

• AnimationClip می‌تواند شامل چند Track باشد (مثلا موقعیت + چرخش + مقیاس)

• AnimationMixer اجازه blending و cross-fade بین انیمیشن‌ها را می‌دهد

• مناسب مدل‌های 3D آماده، اسکلت‌بندی (SkinnedMesh) و بازی‌ها