holodepth

Three.js · glTF pipeline · Yükleme sonrası

Scene graph: model içindeki hiyerarşik yapı

Bu sayfa, glTF / GLB dosyasını yükledikten sonra sahneye düşen ağacı okumak içindir: kapı gövdeye, tekerlek aksa bağlıdır; hareket ve animasyon bu ilişkiler üzerinden akar. Üç boyutta liste değil, ebeveyn–çocuk zinciriyle kurulmuş bir scene graph vardır — kurallar, elle kurduğunuz sahne ile aynıdır; yalnızca ağacı dışarıdan içeri aktarmış olursunuz.

Her düğüm bir Object3D türevidir; yerel konum ile dünya konumu karıştırılmamalıdır. Yüklenen modelin kökü genelde bir THREE.Group veya THREE.Scene altında yine Object3D ağacı olarak gelir.

Önce okuyun (çekirdek omurga): Sahne (Scene) — scene graph, Object3D ve ortak transform, Object3D & sahne hiyerarşisi. Materyal–mesh ilişkisi için Materyal girişi.

Sahne girişiyle aynı dil: kök, graf, düğüm

Sahne (Scene) sayfasında özetlendiği gibi THREE.Scene nesnelerin hiyerarşik listesini ve ortam özelliklerini tutar; görüntüleme ise kamera ve renderer ile tamamlanır. İçe aktarılan model, bu evrene alt ağaç olarak eklenir: yükleyicinin döndürdüğü kök Object3D üzerinde scene.add(model) dediğinizde, artık tüm düğümler sahnenin scene graph parçasıdır.

Scene graph bölümündeki ebeveyn–çocuk mantığı burada da geçerlidir: grubu ötelerseniz içindeki mesh ve boş node düğümleri birlikte hareket eder; bir parçayı yalnızca kendi ekseninde döndürmek için pivotu doğru yerde tutmanız gerekir (bu sayfanın ilerleyen bölümlerindeki Group ve pivot stratejileri, içe aktarılmış geometri için de birebir uygulanır).

glTF tarafında dosya içindeki «node» kavramı, Three.js’te yine Object3D hiyerarşisine map edilir; isimler, dönüşümler ve çocuk listeleri DCC aracından geldiği gibi korunur. Bu yüzden hata ayıklama sırasında konsolda gördüğünüz ağaç, hem format spesifikasyonunun hem de motorun iç temsilinin birleşimidir — ama oyun kuralları (yerel/dünya matrisi, traverse, matrixAutoUpdate) çekirdek Three.js kurallarıdır.

Bu omurgada sıradaki konular (özet kutusuyla aynı sıra)

Aşağıdaki sıra, yan menü ve sayfa sonu özetinde izlenecek yolu tanımlar: önce sahne grafiği (bu sayfa), ardından düğüm yönetimi ve içerik eşlemesi.

  • Scene graph: Modelin içindeki hiyerarşik yapı (ör. arabanın kapısı gövdeye bağlıdır) — şu an bu sayfadasınız.
  • Node hiyerarşisi: Object3D düzeyinde düğümlerin yönetimi.
  • Texture bağlama: Model kaplamalarının Three.js tarafında doğru eşleşmesi.
  • Material mapping: İçe aktarılan materyallerin kodda manipüle edilmesi.
  • Animation clips: Hazır animasyonları ( AnimationMixer ) oynatma.
  • Skinning: Karakter iskeleti (SkinnedMesh ve Bones) nasıl çalışır?

Ebeveyn ve çocuk ilişkisi (parent–child)

parent.add(child) bağı

Three.js’te bir objeyi başka bir objenin altına eklediğinizde (parent.add(child)) bir ebeveyn–çocuk bağı kurulur. Bu bağıntının en kritik kuralı: çocuk, ebeveyninin dönüşümlerini miras alır (zincirleme çarpım).

Position, rotation, scale

  • Position (konum): Ebeveyn ötelenirse çocuk da onunla birlikte taşınır.
  • Rotation (dönüş): Ebeveyn kendi ekseninde dönerse çocuk, ebeveynin merkezine göre yörünge çizer.
  • Scale (ölçek): Ebeveyn ölçeklenirse çocuk da aynı oranda etkilenir.

Yerel ve dünya koordinatları (local vs. world space)

Sahne grafiğinde iki «gerçeklik» vardır:

Local space (yerel uzay)

Objenin ebeveyne göre konumu ve yönelimi. Örneğin kılıcı karakterin eline (hand) bağlarsanız, kılıcın yerel konumu ele göre (0, 0, 0) civarında kalabilir.

World space (dünya uzayı)

Objenin tüm sahnenin köküne göre mutlak konumu. Karakter haritada koşarken kılıcın yerel konumu sabit kalır; dünya konumu her kare güncellenir.

HoloDepth notu

Gerçek dünya konumunu almak için object.getWorldPosition(hedefVector) kullanın. Doğrudan object.position yalnızca yerel ötelemedir (ebeveyn dönüşümü uygulanmamış).

Mantıksal gruplama: THREE.Group

Sahnede görünmeyen ama nesneleri bir arada tutan «hayali» konteynerlere sık ihtiyaç duyulur. THREE.Group, geometri veya materyal taşımayan, yalnızca dönüşüm ve hiyerarşi için kullanılan bir Object3D türevidir; çizim maliyeti doğrudan eklenmez, yalnızca matris güncellemesi zincirine bir düğüm daha eklenir.

Örnek: bir masa ve dört sandalyeyi tek grupta toplarsanız yalnızca grubu hareket ettirerek tüm takımı odada kaydırırsınız; sahne yönetimi sadeleşir. Aynı grubu seçip gizleme, katman etiketi (layers) veya toplu animasyon hedefi yapmak da kolaylaşır.

Group ne zaman?

Birden fazla mesh’i tek mantıksal varlık gibi taşımak, kamera veya ışığı bir alt sistemle birlikte kaydırmak, LOD kopyalarını aynı dalda tutmak için uygundur.

Group ile Mesh farkı

Grup çizim üretmez; yalnızca çocuklarının dünya matrislerine katkıda bulunur. Tüm grup için tek materyal istiyorsanız bu grupta değil, her mesh’te veya paylaşılan materyal örneğinde tanımlarsınız.

Pivot noktası (merkez) stratejisi

Sahne grafiğinin güçlü numaralarından biri pivotu taşımaktır. Dönüşümler varsayılan olarak nesnenin yerel kökenine (position sıfır noktasına) göre uygulanır; birçok dışa aktarılmış mesh’te bu köken geometrinin ortasında olduğu için kapı veya kol «kendi ekseni etrafında» döner — menteşe veya omuz beklediğiniz nokta olmayabilir.

Sorun

Kapı menteşe çevresinde açılmalı; mesh kökeni kapının ortasındaysa döndüğünüzde menteşe kayar gibi görünür.

Çözüm: grup ile pivot kaydırma

Boş bir Group oluşturun; grup düğümünü duvara menteşe konumuna yerleştirin. Kapı mesh’ini grubun çocuğu yapın ve mesh’in yerel position’ı ile geometriyi öyle öteleyin ki menteşe çizgisi grubun (0,0,0) yerel noktasına denk gelsin. Döndürmeyi group.rotation üzerinden yapın — dönüş artık menteşe etrafındadır.

Aynı teknik pervane, kalça veya silah namlısı gibi «ekseni geometri merkezinde olmayan» her dönüş için geçerlidir. Modeli DCC içinde kökeni doğru vererek de çözebilirsiniz; web tarafında grup ile düzeltmek sık ve hızlı bir yoldur.

İnteraktif: modüler araç (Group + menteşe)

Aşağıdaki laboratuvar harici .glb yüklemez; aynı hiyerarşi fikrini prosedürel bir Car düğümü üzerinde dener. Sol sütunda ağaçtan düğüm seçin veya sahnede sürükle — ebeveyn zinciri vurgulanır. Kapı: yanlış pivot ile dönüşün mesh merkezine kilitlendiğini, doğru modda ise menteşe grubunda kaldığını karşılaştırın.

Sahne grafiği lab · güvenli (model yok) · Three.js r170
Konum okuması

Hiyerarşi

Seçim: —

Amaç: Car döndüğünde tüm çocukların birlikte dönmesi (inheritance); tekerlerin kendi local ekseninde dönmesi; kapının menteşe etrafında açılması için boş bir Group kökeninin neden gerekli olduğunu görmek. Ağaçta tıklayın veya mesh üzerinde gezin — üst düğümler zincirde vurgulanır. Tekerlerde küçük AxesHelper yerel dönüş eksenini gösterir; menteşe kökeninde turkuaz küre, yanlış pivot modunda ise kapı merkezinde pembe küre görünür.

Sahne grafiği ve performans

Sahne grafiği yalnızca düzen için değildir; motorun sahneyi nasıl tarayıp dünya matrislerini güncelleyeceğini de şekillendirir.

Matrix güncellemeleri

Her karede Three.js ağacı yukarıdan aşağıya taranarak dünya matrisleri (worldMatrix) hesaplanır.

Optimize

Çok sayıda statik nesneniz varsa object.matrixAutoUpdate = false ile otomatik güncellemeyi kapatıp, gerektiğinde updateMatrixWorld() ile manuel güncelleme yaparak işlemciyi rahatlatabilirsiniz.

Görselleştirme: sahne yardımcıları

Geliştirme aşamasında hiyerarşiyi görmek için:

  • Konsol: scene.traverse(...) ile düğümleri listelemek veya hızlı inceleme yapmak.
  • AxesHelper: Önemli gruplara yerel eksen çizgileri ekleyerek ebeveyn–çocuk ilişkisini görsel olarak doğrulamak.

JavaScript örneği

const car = new THREE.Group();
    const wheel = new THREE.Mesh(geometry, material);

    car.add(wheel); // Tekerlek arabanın çocuğu
    scene.add(car); // Araba sahnenin çocuğu

    // Araba döndüğünde tekerlek de onunla döner
    car.rotation.y = Math.PI / 4;

HoloDepth «Scene Graph» checkpoint’i

Özet

Karmaşık sahnede kaybolmamak için ebeveyn–çocuk ilişkisini mantıksal olarak doğru kurun; hareket eden her parça zincirde net bir yerde dursun.

glTF yüklemesinde ağaç dosyadan geldiği için ilk bakışta «yabancı» görünebilir; yine de traverse ile düğümleri dolaşırken kurallar elle kurduğunuz scene graph ile özdeştir. Bir parçayı bulamazsanız önce üst grupların dönüşümünü, sonra isim (name) ve çocuk listesini kontrol edin — sırada Node hiyerarşisi konusuna geçiyoruz.

HoloDepth özet stratejisi

  • Hiyerarşi: Birlikte hareket eden her şeyi uygun bir Group altında toplayın.
  • Yerel koordinat: Çocuğu ebeveyne göre yerleştirirken dünya uzayını sürekli hesaplamak zorunda kalmazsınız.
  • Matris: Bir çocuğun dünya konumu beklenmedikse önce ebeveyn zincirinde ölçek ve dönüş birikimini kontrol edin.