Object3D ve sahne hiyerarşisi

Hiyerarşiyi kullanmanın ilk adımı, bir nesnenin konumunun neye göre ifade edildiğini bilmektir.

• Yerel uzay (local space): position, rotation ve scale değerlerinin okunduğu çerçevedir — nesne ebeveynine (parent) göre nerede ve nasıl durduğunu söyler. Üst öğe yoksa ebeveyn çoğu zaman doğrudan Scene'dir; tekerleği araba grubuna add ettiğinizde tekerleğin yerel konumu “yan tarafta biraz” kalır, araba grubunu hareket ettirdiğinizde dünya konumunu elle yazmanız gerekmez. İç içe gruplarda her seviye kendi yerel değerini tutar; birleşim üstten aşağı çarpılır.
• Dünya uzayı (world space): Sahne kökenine (genelde (0, 0, 0)) göre birikmiş gerçek konum ve yönelimdir; ebeveyn zincirindeki tüm dönüşümler bu sonuca yansır. Fizik, çarpışma, ışık gölgesi hedefi veya “kameradan kaç birim uzakta?” gibi sorular dünya uzayında sorulur. Okumak için getWorldPosition() kullanılır — ayrıntı dünya konumu ve matris bölümünde; dünya değerini doğrudan yazmak nadiren doğru API’dir, çoğu zaman yerel transform veya attach tercih edilir.

Örnek: Bir araba modelinde tekerlek, arabanın merkezine göre yan tarafta olabilir (yerel). Araba dünyada ilerlediğinde tekerleğin dünya konumu, arabanın dönüşümüyle birlikte güncellenir.

Tüm Object3D türevleri üç temel transform özelliği taşır: position, rotation ve scale. Bu değerler yerel uzayda tutulur ve ebeveyn–çocuk hiyerarşisi boyunca birleşerek dünya konumunu ve yönelimini oluşturur.

rotation özelliği Euler açılarıyla tutulur; değerler radyan cinsindendir.

Her Object3D için dönüş ve ölçekleme işlemleri, nesnenin kendi origin (pivot) noktasına göre uygulanır; bu nokta çoğu modelde yerel köken
(0, 0, 0) etrafındadır.

Bir nesnenin dünya koordinatlarındaki konumunu almak için getWorldPosition() kullanılır; sonuç, verdiğiniz vektöre yazılır:

object.getWorldPosition(new THREE.Vector3());

Üretilen vektörü her karede tekrar kullanacaksanız tek bir Vector3 örneğini saklamak daha verimlidir.

Three.js varsayılan olarak her karede transform matrislerini otomatik günceller (matrixAutoUpdate açık). Bu davranış kapatılarak; yalnızca dönüşümü seyrek değişen statik nesnelerde ve bilinçli senaryolarda; gereksiz matris yeniden hesaplaması azaltılabilir; bu ileri düzey bir optimizasyondur ve genelde manuel updateMatrix() ihtiyacı doğurur.

Bir nesneyi diğerine .add(çocuk) ile eklediğinizde, çocuk ebeveynin transform zincirine girer: konum, dönüş ve ölçek üstten aşağı etkiler.

İki kural, add sonrası davranışı özetler; yerel / dünya ayrımı yukarıda:

• Miras (üstten aşağı): Ebeveyn dönerse, ötelenirse veya ölçeklenirse çocuk (ve onun alt ağacı) dünya uzayında birlikte taşınır — çocuğun yerel değerleri aynı kalsa bile dünya sonucu değişir. Güneş sistemi örneğinde ay Dünya etrafında dönerken Dünya’nın yörüngesi de taşınır; hepsi zincirle gelir (uygulama). Negatif ölçek gibi uç durumlar ayna etkisi yaratır; çoğu projede ölçeği bilinçli ve pozitif tutun. visible gibi bazı bayraklar da hiyerarşide pratikte üstten etkilenir.
• Bağımsızlık (aşağıdan yukarı yerel): Çocuğun position / rotation / scale değerlerini değiştirmek yalnızca ebeveyne göre ilişkiyi günceller; ebeveynin dünya konumu veya rotasyonu değişmez. Karakter grubunu hareket ettirirken kola yerel açı vermek bu yüzden güvenlidir — tüm figür taşınmaz, kol eklemi yerelde döner. Ebeveyni değiştirmeden dünya konumunu korumak için tablodaki attach kalıbına bakın; kardeş çocuklar birbirinin yerel transformundan etkilenmez.

THREE.Group, geometrisi olmayan bir Object3D türevidir; parçaları mantıksal olarak toplamak için kullanılır.

Neden? Örneğin karakterin tüm mesh'lerini (baş, gövde, kollar) tek Group altında toplayıp characterGroup.position.x = 10 ile tüm figürü birlikte taşımak.

Dünya'nın güneş etrafında, ay'ın dünya etrafında dönmesi; üst grup dönünce alt grupların birlikte hareket etmesi için klasik bir örnektir. sunMesh, earthMesh, moonGeo / moonMat ve sahne kurulumu varsayılmıştır.

const solarSystem = new THREE.Group();
const earthGroup = new THREE.Group();
scene.add(solarSystem);

solarSystem.add(sunMesh);

solarSystem.add(earthGroup);
earthGroup.position.x = 10;
earthGroup.add(earthMesh);

const moonMesh = new THREE.Mesh(moonGeo, moonMat);
moonMesh.position.x = 2;
earthGroup.add(moonMesh);

function animate() {
  requestAnimationFrame(animate);

  solarSystem.rotation.y += 0.01;
  earthGroup.rotation.y += 0.02;

  renderer.render(scene, camera);
}

animate();