Three.js · Senkronizasyon · Transform
Transform sync: Objeler arası uyum stratejileri
Senkronizasyon, farklı hiyerarşilerde veya farklı uzay katmanlarında (örneğin 2D arayüz ile 3D sahne) bulunan nesnelerin aynı anlamlı hareketi veya pozu sergilemesidir. Pratikte çoğu hata, aynı karede yerel ile dünya verisini karıştırmaktan gelir; okuma tarafını netleştirmeden «kopyala» da işe yaramaz. Bunu çözmenin başlıca iki yolu vardır: hiyerarşik çözüm (parenting) ve manuel güncelleme (tracking — kopya, lerp / slerp).
Önerilen okuma sırası: sahne grafiği / runtime → model parenting → yerel ve dünya uzayı → bu sayfa. Önceki üç sayfa bağlam ve koordinat okumasını kurar; burada «aynı hareketi bu karede nasıl uyumluyorum?» sorusuna inilir.
Senkronizasyon senaryoları
A. UI + 3D hizalama (2D–3D köprüsü)
Bir 3D modelin (örneğin bir RPG karakterinin) üzerinde sağlık çubuğu veya isim etiketi göstermek yaygın bir senkron ihtiyacıdır.
- Zorluk: Model dünya koordinatlarında (x, y, z) yaşarken, DOM / CSS etiketi piksel veya yüzde uzayında yaşar.
- Çözüm yönü: Her karede (veya düşük frekansta) 3D
düğümün dünya konumunu okuyup kameranın projeksiyonu ile ekran
koordinatlarına taşımak; çoğu projede
Vector3.project(camera)ve ardındanrenderer.domElementboyutu ile devicePixelRatio ölçeğini hesaba katarak CSS pikseline çevirmek yeterlidir. - Düzen: Etiket genelde tuvalın üstünde ayrı bir katmandadır; tek kaynak gerçek 3D düğüm, UI yalnızca onun yansımasıdır — böylece sahne grafiğini şişirmeden kalırsınız.
B. Kamera takip (TPS / orbit)
Karakteri sabit mesafeden izleyen kamera, karakterin poz / yön verisinin kamera dönüşümüne sürekli yansıtılmasıdır. Hızlanınca kamera «geride kalmamalı»; veri yolu milisaniye gecikmeyle bile tutarsız hissedilir. Yumuşak takip istiyorsanız bu yansıtma genelde manuel olur: tam kilit için kopya, sinematik gecikme için lerp / slerp (aşağıdaki tablo).
C. Rig ve bağlı sistemler
Vinç kolları veya eklemli mekaniklerde bir parçanın hareketi diğerinin hem konumunu hem
yönelimini tetikler; çoğu zaman yalnızca position değil, dönüş ve bileşik
eksenler birlikte senkron tutulur. Bu sayfada detaylı rig matematiği
yok; fikir, «tek vektör yetmeyebilir» uyarısıdır.
Manuel güncelleme mi, parenting ile çözüm mü?
Yanlış yöntem ya CPU’yu gereksiz yorar ya da sahne grafiğini yönetilemez hale getirir. Ağaçta neyin nereye bağlandığı için çoklu model / runtime ve parenting sayfalarındaki disiplin burada da geçerlidir.
Ne zaman parenting?
- Fiziksel bağlılık: Obje birbirine «yapışıksa» (araba üstünde logo, elde silah) çoğu zaman parent–child doğru seçimdir.
- Avantaj: Motorun matris zinciri senkronu «bedava» yaklaşımda yapar.
- Risk:
scalemirası — ebeveyn büyürse çocuk da büyür; her zaman istenen değildir (yerel/dünya ve ölçek okumasını hatırlayın).
Ne zaman manuel update?
- Hiyerarşik bağımsızlık: Farklı ebeveynler veya biri UI diğeri 3D ise manuel senkron şarttır.
- Yumuşatma: Bir objenin diğerini gecikmeli / yumuşak takip etmesi için lerp / slerp gibi adımlar genelde manuel döngüde verilir.
- Avantaj: Tam kontrol — yalnızca konumu kopyalayıp dönüşü sabit
tutabilir, yalnızca dikey ekseni eşleyip yatayda bağımsız bırakabilir veya
lookAtile sınırlı bir eksen takibi seçebilirsiniz.
«Lagging» (gecikme) sorunu
Takip eden objenin bir kare geriden gelmesi sık görülür; çoğu zaman güncelleme sırası kaynaklıdır.
- Sorun: Takip kodu, lider objenin hareket kodundan önce çalışırsa takipçi bir önceki karenin verisini okur.
- Çözüm yönü: requestAnimationFrame döngüsünde
önce
ana hareketleri, en sonda senkron / UI projeksiyon adımlarını
çalıştırmak; gerekirse
updateMatrixWorldile okuma öncesi matris tazelendiğinden emin olun. - Pratik: Dağınık yerine tek bir
syncFollowers()(veya benzeri) fonksiyonunda toplamak, sırayı gözden kaçırmayı azaltır.
Aşağıdaki canlı lab ile aynı mantığı kare içinde açıp kapatabilirsiniz.
HoloDepth uygulama: kopya vs. lerp
Yöntem → mantık → kullanım
| Yöntem | Kod mantığı (özet) | Kullanım |
|---|---|---|
| Doğrudan kopya | leader.getWorldPosition(tmp); follower.position.copy(tmp);
(aynı ebeveyn uzayında değillerse dünya okuması şart) |
Keskin senkron; kare hizası kritik. |
| Lerp | follower.position.lerp(targetWorld, α) — α küçük
tutulur (frame başına sabit veya delta ile) |
Yumuşak takip, yaylanma hissi. |
| Quaternion slerp | follower.quaternion.slerp(targetQuat, α) |
Dönüşlerin pürüzsüz senkronu; Euler ile kare başı
copy bazen gimbal riski taşır.
|
HoloDepth özeti: karar
Takip eden, takip edilenin altında güvenle durabiliyorsa parenting düşünün. Yanında / üstünde bağımsız durmalıysa (UI etiketi gibi) manuel güncelleme yoluna gidin.
Canlı lab: dual object ve güncelleme sırası
Dual object system: sahnede biri lider (cyan, hafif parlak kapsül), biri takipçi (turuncu tel kafes). İkisi de kök seviyededir — parenting yok; tamamen manuel senkron. Üç takip modu ve «önce takip / önce lider» sırasını karşılaştırın; lag bölümündeki anlatım burada görünür hale gelir.
Canlı lab