Hareketin estetiği: Lerp, easing ve AnimationMixer

Lerp, "lineer interpolasyon"un kısaltmasıdır. İki değer arasında — örneğin iki konum veya iki renk — belirli bir alpha oranında ara değer üretmenizi sağlar.

Çekirdek mantık şu formüle dayanır: mevcut değer, hedefe doğru her adımda fark vektörünün bir kısmı kadar yaklaşır.

current + (target - current) * alpha

Three.js'te mesh.position.lerp(hedef, alpha) bu ilişkiyi Vector3 üzerinde uygular; alpha 0 ile 1 arasında bir karışım oranıdır.

• Matematiksel mantık: Her karede mevcut değeri hedefe doğru bir miktar kaydırmak için kullanılır.
• Kullanım alanı: Kameranın veya nesnenin hedefi gecikmeli takip etmesi (smooth follow), imleçe yumuşak yaklaşma.
• Three.js: Vector3.lerp(), Vector3.lerpVectors() ve ilgili API ile doğrudan kullanılabilir; ek kütüphane şart değildir.

FPS bağımlılığı: alpha sabit bir oran olarak kaldığında, saniyede daha fazla kare çizildiğinde toplam kayma artar — yani hareket kare hızına duyarlıdır. Daha tutarlı sonuçlar için alpha'yı delta time ile ölçeklemek (veya hızı saniye bazında tanımlamak) yaygın pratiktir; ayrıntı için delta time bölümüne bakın.

Örnek — her karede konumu hedefe yaklaştırma:

// Her karede mevcut konumu hedefe %5 oranında yaklaştır (yumuşak takip)
mesh.position.lerp(targetPosition, 0.05);

Düz lerp, adım oranı sabit kaldığı sürece doğrusal kalır ve bazen mekanik / robotik hissettirebilir. Easing, zamanın nasıl "harcanacağını" belirler: hareketin başında veya sonunda hızlanma / yavaşlama (ör. ease-in, ease-out).

Easing fonksiyonları genellikle normalize edilmiş zaman (t, 0–1) değerini yeniden şekillendirerek hareketin hız profilini değiştirir; böylece aynı başlangıç ve bitiş noktalarında bile "nasıl varılacağı" farklılaşır.

• Kütüphaneler: Saf matematikle eğri tanımlanabilir; GSAP, web animasyonlarında yaygın olarak kullanılan güçlü bir kütüphanedir. Three.js ekosisteminde hafif tween ihtiyacı için @tweenjs/tween.js gibi küçük paketler de sık seçilir.
• Karakter: "Ease-in" yavaş başla, "ease-out" yavaş dur; ease-in-out ile hem giriş hem çıkış yumuşar — fiziksel ağırlık hissi verir.

Dışarıdan (Blender vb.) aktarılan kemikli / skinned modellerde yürüme, zıplama gibi hareketler için Three.js tarafında merkez bileşen AnimationMixer'dır.

• Track: Belirli bir özelliğe (ör. kemik dönüşü) ait animasyon kanalı.
• Clip: Süre ve anahtar karelerle tanımlı bir animasyon parçası (yürüme, koşma vb.).
• Mixer: Klipleri oynatır, süreleri yönetir; gerektiğinde klipler arasında karıştırma (ör. yürümeden koşuya geçiş) yapılır.

Her karede mixer'ın iç zamanını ilerletmek için mixer.update(delta) çağrısı gereklidir — bu olmadan clip oynatma ve kemik güncellemeleri çalışmaz. delta, iki kare arasındaki süredir ( THREE.Clock ile getDelta()).

Fare konumunu hedef olarak kullanıp nesneyi ekran düzlemine yaklaştıran tipik bir örnek: mesh, scene, camera ve renderer önceden tanımlıdır. THREE.Clock ve getDelta(), ileride mixer.update(delta) ile aynı döngüde kullanılmaya hazır olması için eklenmiştir.

const clock = new THREE.Clock();
const targetPosition = new THREE.Vector3();

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

function animate() {
  requestAnimationFrame(animate);

  const delta = clock.getDelta();
  // İleride AnimationMixer ile: mixer.update(delta);

  mesh.position.lerp(targetPosition, 0.1);

  renderer.render(scene, camera);
}

animate();