Three.js · Sahne grafiği · Object3D · Hiyerarşi
Model parenting: Hiyerarşik bağlamanın gücü
Model parenting, bir objeyi (child / çocuk) başka bir objenin (parent / ebeveyn) yerel uzayına sabitleyerek, ebeveynin tüm hareket, dönüş ve ölçeklenme verilerinin çocuğa aktarılmasıdır. Bu, objelerin yalnızca yan yana durması değil; matematiksel bir bağla birbirine kilitlenmesi demektir.
Three.js’te bu ilişki parent.add(child) veya sahne ağacında düğümleri yeniden
bağlama ile kurulur. Çocuğun ekrandaki dünya dönüşümü, zincirdeki her ebeveynin
position, rotation (veya quaternion) ve
scale değerlerinin sırayla birleşmesiyle oluşur; siz yalnızca
yerel değerleri yönetirsiniz, motor dünya matrisini türetir.
Çekirdek kavramlar için Object3D ve sahne hiyerarşisi ile Çoklu model ve runtime birleştirme sayfalarına bakın; bu sayfa özellikle «niçin böyle bağlarım?» ve «gündelik sahnede nelere dikkat ederim?» sorularına odaklanır.
Temel amaç: Bütünsel kontrol ve koordinasyon
3D dünyasında objeleri tek tek dünya uzayında hareket ettirmek hem zahmetli hem de hata payı yüksektir. Parenting mekanizmasının temel amacı, mantıksal birimler oluşturmaktır: oyuncu gövdesi, kapı seti, vinç gövdesi gibi «tek karar vereceğim» bloklar; alt parçalar bu bloğun içinde tanımlı kalır.
- Birlikte hareket: Ebeveyn hareket ettiğinde, çocuk objeler kendi
yerel konumlarını (
positionebeveyne göre) koruyarak ebeveynle birlikte taşınır. Animasyon veya kullanıcı girdisi tek bir kökte toplandığında, altındaki tüm bağlı parçalar aynı hikâyeyi paylaşır. - Bağıl dönüş: Çocuk, ebeveynin merkezi etrafında bir yörünge çizer. Bu, karmaşık mekanik sistemlerin (örneğin bir robot kolu) eklemlerini yönetmek için gereklidir; her eklem kendi yerel ekseninde dönür, üst eklemlerin dönüşü ise üstten alta doğru birikir.
- İç içe parenting: Aynı ilke zincirle devam eder — örneğin gövde → omuz → dirsek → el; her seviye bir üsttekinin uzayında tanımlıdır, böylece animasyon kırılımları (rig) okunaklı kalır.
Kısaca: dünya koordinatında yüz mesh’i sürekken güncellemek yerine, birkaç
anlamlı ebeveyn düğümünü hareket ettirmek hem zihinsel modeli hem de kodu sadeleştirir.
Gerçek dünya kullanım senaryoları
Parenting ilişkisi kurulurken «neyin neye bağlı olduğu» fiziksel veya tasarım gerçekliğine
uygun seçilmelidir. Yanlış ebeveyn seçimi, animasyonu zorlaştırır veya menteşe/pivot
hissinin kaybolmasına yol açar; gerekirse araya boş bir THREE.Group koyarak
dönüş merkezini model kökeninden ayırabilirsiniz.
A. Kapı ve kapı kolu
Kapıyı açtığınızda kolun havada asılı kalmaması gerekir. Kolun pivotu kapı kanadına göre doğru tanımlıysa, tek bir kapı dönüşü tüm görseli taşır.
- Parent: Kapı kanadı (mesh) veya menteşe noktasını temsil eden bir grup.
- Child: Kapı kolu (mesh).
Sonuç: Kapı kanadı menteşe etrafında döndüğünde, kol da onunla birlikte dairesel bir yay çizer. Kolu kendi yerel ekseninde döndürerek kapıyı açma animasyonu yapabilirsiniz; bu hareket kapı gövdesinin dünya konumunu değiştirmez — yalnızca kolun yerel dönüşümüdür. Pratikte kolu doğrudan kanada değil, «kol tabanı» adlı küçük bir alt gruba bağlamak, modelleme hatalarından kaynaklanan kaymaları daha kolay düzeltmenizi sağlar.
B. Araç ve tekerlekler
Bir aracı hareket ettirmek, tekerlekleri tek tek aynı dünya koordinatına taşımak demek değildir. Gövde tek otorite olduğunda, süspansiyon veya dönüş animasyonları tekerlek dallarında kalır; gövde yalnızca ileri–geri veya yalpalama gibi üst seviye hareketi taşır.
- Parent: Araç gövdesi (chassis).
- Child:
Tekerlek_FL,Tekerlek_FR,Tekerlek_BL,Tekerlek_BRvb.
Sonuç: Gövdeyi örneğin x ekseninde on birim
kaydırdığınızda, tekerlekler otomatik olarak taşınır. Tekerleklerin kendi eksenindeki dönme
(rotation) hareketi ise gövdeden bağımsız olarak yönetilir; direksiyon,
kanat veya silah gibi «gövdeye bağlı ama kendi ekseninde dönen» parçalar için aynı kalıp
geçerlidir.
Canlı demo: prosedürel robot kolu
Aşağıdaki sahne hiyerarşik parenting ile kurulur: basePivot
(taban dönüşü) altında gövde silindirleri; omuzda shoulder üst kol kutusu;
ucunda elbowPivot alt kol ve küre el. Tabanı çevirdiğinizde tüm kol dünya
uzayında birlikte döner; yalnızca dirseği büktüğünüzde ise üst kol sabit kalıp alt segment
yerel eksende kapanır — üstteki dönüşümün alta miras bırakılması budur.
Geometri RoundedBoxGeometry, CylinderGeometry,
TorusGeometry ve SphereGeometry; gövde
MeshStandardMaterial (hafif metalness /
roughness) ve çok düşük dozda prosedürel IBL
(RoomEnvironment). Harici .glb, doku veya
URL yoktur.
Tüm parçalar bu sayfada Three.js ile oluşturulur; ağdan model veya görüntü çekilmez. Solda parent zinciri (kaydırıcıyla kısa vurgu), sağda açılar ve isteğe bağlı yerel eksenler; sahneyi fareyle döndürebilirsiniz (OrbitControls).
Ne izliyorsunuz?
Kod tarafında zincir kabaca
robot → basePivot → shoulder → elbowPivot → hand; pratikte iki hareket
ayırın: Base (Y) tüm kolu (taban + üst segment +
dirsek + el) birlikte döndürür. Elbow (X) yalnızca
dirsek altındaki ön kol ve eli büker; üst kol dünyada sabit kalır, miras sadece aşağı
doğru akar.
Performans: Grup yönetimi ve matris optimizasyonu
Model parenting yalnızca organizasyonel bir kolaylık değil; aynı zamanda ciddi bir performans stratejisidir. Ağaç derinliği ve dalların güncellenme sıklığı büyüdükçe maliyet hissedilir; derin ağaç ve flatten karşılaştırması için çoklu model sayfasındaki performans bölümüne bakabilirsiniz — burada odak, parenting ile «hangi dalı ne sıklıkla oynatıyorum?» sorusudur.
- Tekil güncelleme yerine toplu işlem: Yüzlerce parçadan oluşan bir
avizeyi hareket ettirmek için her parçanın dünya
positiondeğerini ayrı ayrı yazmak yerine, yalnızca kök ebeveynin (root) dönüşümünü güncellemek yeterlidir; alt düğümlerin dünya matrisleri zincirden türetilir. Hareket eden tek dal ne kadar kısaysa, motorun işi o kadar öngörülebilir kalır. updateMatrixWorldzinciri: Three.js sahneyi çizmeden önce hiyerarşiyi tarar. Statik kabul edilen dallardamatrixAutoUpdate = falsegibi optimizasyonlar, gereksiz matris yeniden hesaplarını azaltmaya yardımcı olabilir (kullanım senaryosuna göre dikkatli uygulanmalıdır). Yanlış varsayımda ise çocuklar eski dünya matrisiyle çizilebilir; bu yüzden manuel güncelleme yoluna girerseniz testi sıkı tutun.- Traversal düzeni: Gruplandırılmış objeler, CPU
tarafındaki ağaç taramalarında daha okunabilir ve yönetilebilir
bir yapı sunar.
traverseile materyal ataması veya gölge bayrağı gibi toplu işlemlerde «mantıksal kök» seçmek, tüm sahneyi tek kökten taramaktan daha güvenlidir.
Teknik uygulama ve dikkat edilmesi gerekenler
Parenting yaparken yerel (local) ve
dünya (world) koordinatları arasındaki farkı
bilmek kritiktir. child.position dünyada gördüğünüz konum değildir; dünya
konumu için getWorldPosition gibi yardımcılar kullanılır — aksi halde
çarpışma, raycast veya kamera takibi beklenmedik sapar.
- Yerel uzay: Çocuğun ebeveyne göre konumudur. Bir tekerlek arabanın
merkezine göre örneğin
(2, 0, 5)konumundaysa, araba dünyanın neresine giderse gitsinchild.positionbu yerel ilişkiyi korur (ebeveyn hareketine göre dünya konumu değişir). Bir objeyiremoveedip başka ebeveyneaddederseniz, çocuğun yerel değerleri korunur; dünyada aynı yerde kalmasını istiyorsanız taşıma öncesi/sonrası dünya vektörleriyle hizalama gerekir. - Ölçek (scale) mirası: Ebeveyni
ölçeklendirdiğinizde çocuk da bu ölçekten etkilenir. Gövdeyi örneğin
y ekseninde basıklaştırırsanız, çocuk mesh’ler de görsel olarak uzar veya sıkışır. Profesyonel
iş akışlarında parenting kurarken ebeveynlerin birim ölçeğe yakın
(1, 1, 1)tutulması ve modelleme tarafında doğru oranların verilmesi sık tercih edilir; zorunlu olmayan ölçek animasyonlarını ise çoğu zaman çocuk dallarında tutmak, hata ayıklamayı kolaylaştırır.
Dünya konumunu koruyarak ebeveyn değiştirmek için scene.attach(object) gibi
yardımcıları kullanın; ayrıntı için
çoklu model
sayfasındaki detach bölümüne bakın. Bu sayfa oradaki
API tekrarını uzatmaz; yalnızca parenting kararını verirken hangi
uzayda düşünmeniz gerektiğini hatırlatır.
HoloDepth «Model parenting» özeti
Aşağıdaki tablo, parenting dilinde sık geçen dört «durumu» tek bakışta toplar. Tablo
özet olduğu için satırlar birbirini dışlamaz; aynı sahne hem birlikte hareket hem
hiyerarşik animasyon hem de Group ile okunabilirlik kazandırabilir.
Durum → ilişki → avantaj
| Durum | İlişki biçimi | Avantajı |
|---|---|---|
| Birlikte hareket | parent.add(child) |
Karmaşık sistemleri tek merkezden yönetmek. |
| Eksenel bağımlılık | Pivot / menteşe (hinge) | Çocuğun ebeveynin dönüş merkezine ve yerel eksenine sadık kalması. |
| Animasyon aktarımı | Hiyerarşik miras | Üst düğümdeki hareketin tüm alt dallara yayılması. |
| Kod yönetimi | THREE.Group kullanımı |
Sahne ağacının (scene tree) okunabilir olması. |