Babylon.js · GUI & UI
Control system: girişi tek düzen üzerinden yönetmek
«Kontrol sistemi» burada arayüz bileşenlerinin listesi değil; tarayıcıdan gelen işaretçi, dokunma, klavye ve oyun kolu sinyallerinin sahne davranışına — kamera hareketi, seçim, GUI tıklaması, oyun eylemi — hangi sırayla ve hangi koşulla bağlanacağını çözen katmandır. Dağınık dinleyici biriktirmek, «bazen döner bazen tıklanmaz» hatalarının ana kaynağıdır.
Holodepth Three.js tarafında bu rol çoğu zaman OrbitControls, PointerLockControls ve kendi event listener'larınızla anlatılır; Babylon.js tarafında kamera girişi, sahne olayları ve GUI genelde aynı motor gözlemi üzerinden akar — aynı kodu kopyalamazsınız, çakışan varsayımları yeniden üretmemeye dikkat edersiniz.
Özet: dört kural
| Kural | Ne işe yarar? | İhlal belirtisi |
|---|---|---|
| Tek sahiplik | Aynı ham olay için tek karar yolu. | Çift tetik: hem döner hem düğmeye basılır. |
| Öncelik katmanı | GUI mi, kamera mı, sahne pick mi? | Tıklama «yutuluyor» veya tam tersi. |
| Durum anahtarı | Menü açıkken gezinme kapalı gibi net kurallar. | Menü altından sahne kayıyor. |
| Odak ve yakalama | Klavye hangi yüzeye ait? | Yazı alanı varken WASD sahneyi hareket ettirir. |
Olay akışı ve gözlemlenebilir yapı
Özel yapı: Babylon.js sahnesinde birçok alt sistem ( pointer, keyboard, kamera, fizik) ortak zaman çizelgesinde güncellenir; kendi kodunuzda da ham DOM dinleyicileri ile motor içi abonelikleri aynı davranışı iki kez üretmeyecek şekilde ayırın. İzlenebilir ( observable) kalıplar, olayı yayınlayan tek kaynak ve ona bağlanan net eylemler düşünmeyi kolaylaştırır — «her yerde addEventListener» yerine tek giriş köprüsü hedeflenir.
Kare başına neyin önce işlendiği Render döngüsü · güncelleme ve çizim konusunda ayrı katmandır; giriş yönlendirmesi ise bu sayfada — ikisini karıştırmayın: biri «ne zaman çizilir», diğeri «hangi sinyal hangi eylemi tetikler». Motor gözlemleri ile kendi olay sözlüğünüzü ( menuOpened, selectionChanged gibi) ayrı tutmak, fizik veya kamera kodunun doğrudan DOM dinlemesini engeller.
Tek köprü disiplini
Ham pointerdown hem sahneye hem GUI'ye yayıyorsa, köprü katmanında «şu modda şu hedefe ilet» kuralını tek tabloda toplayın; modül başına dağınık if zincirleri aynı olayı iki kez tüketmeye veya hiç iletmemeye yol açar.
- Kaynak: ham tarayıcı olayını tek yerde dinleyin veya motor soyutlamasına tek delegasyon verin.
- Yayın: üst seviye durum değişimlerini gözlemlenebilir veya merkezi bir otobüse taşıyın.
- Abonelik: sahne parçası dispose olduğunda dinleyici sızıntısını kontrol listesine ekleyin ( Motor ömrü · dispose).
Kamera kontrolü ve GUI önceliği
Özel yapı: kameraya attachControl ( canvas'e bağlama) verildiğinde işaretçi sürükleme çoğu zaman orbit / gezinme için ayrılır. Aynı anda tam ekran GUI veya sahne içi panel ( Fullscreen UI · işaretçi, 3D GUI · katman önceliği) varsa, önce hangi katmanın olayı tüketeceği tasarım kararıdır — otomatik «doğru» sıra yoktur. Menü modunda gezinmeyi geçici kapatmak ( detach veya giriş bayrağı) sık kullanılan çözümdür.
Canvas bağlama ve motor yaşamı Motor ömrü · başlatma ve bağlantı ile hizalanır; kamera kontrolünü menü durumuna göre açıp kapatırken aynı dosyada «kim attachControl çağırıyor» sorusunu tekilleştirin — iki modülün sırayla bağlanması bazen çift dönüş üretir.
- Katman: önce tam ekran mı, sahne pick mi — ürün kararı; kodda sabit tablo.
- Gezinme: menü modunda attachControl / bayrak ile orbit kesin kapatılmalıdır.
- Teşhis: menü kapalıyken hâlâ dönüyorsa ikinci bir kontrol bağlantısı veya gizli dinleyici arayın.
Koşullu eylem: sahne nesnesi üzerinde tetik
Özel yapı: ActionManager gibi yapılar, belirli bir örgü için «bu olay geldiğinde şunu yap» kurallarını sahne nesnesine bağlı tutar — küresel dinleyici karmaşası yerine etki alanı netleşir. Aynı tıklama hem GUI hem örgü tarafında işlenecekse önce hangi isabetin ( pick) geçerli sayılacağını ( Raycast) bilinçli seçin; kural yoksa çift tetiklenme görülür.
Sahne içi panelde zincir 3D GUI · UV ve tıklama ile birleşir; doku tarafında isabet payı UI doku mantığı · örnekleme ve UV sayfasında ayrıntılanır — bu sayfada yalnızca «önce hangi sistem» kararı sabittir. Küresel bir scene.onPointerObservable ile örgü başına ActionManager aynı tıklamayı iki kez işliyorsa, köprüde «GUI tüketti mi?» kontrolünü tekilleştirin.
- Kapsam: eylemi mümkün olduğunca ilgili örgüye bağlayın; küresel dinleyici sayısını sınırlayın.
- Sıra: GUI isabeti geçerliyse sahne eylemini atlamayı ürün kuralı olarak yazın.
- Çift tetik: aynı olayda hem menü hem dünya yanıtı istenmiyorsa tek dalda karar verin.
Klavye, odak ve XR köprüsü
Özel yapı: klavye olayları tarayıcıda odak ( focus) ile ilişkilidir; metin kutusu veya form içeren HTML katmanı varsa, sahne kısayolları ( WASD) beklenmedik şekilde tetiklenir. Üretimde odak yönetimi ( tab order, tıklayınca canvas'e dönüş) ayrı bir kontrol konusudur. XR ortamında işaretçi yerine kontrol cihazı ( controller) baskındır — giriş soyutlaması bu yüzeyleri ortak bir modele indirgemeyi kolaylaştırır ( Controller input).
Motor içi tam ekran GUI ile gerçek DOM formu aynı sayfada birleşiyorsa, hangi yüzeyin «odak sahibi» olduğu kullanıcı akışıyla belirlenir; bu ayrım Fullscreen UI · Three okuması kutusunda özetlenen erişilebilirlik gerilimiyle de örtüşür — kısayol susturma kurallarını tek tabloda tutmak, «bazen yazı alanı bazen sahne» hatalarını azaltır.
Bağlam anahtarı
Uygulama durumunu «düzenleme / oyun / form» gibi net modlara ayırın; her modda hangi tuşların aktif olduğunu belgeleyin. Mod bilgisi dağınıksa, odak canvas'te olsa bile üstteki gizli input kısayolu yutabilir.
- Sahne odaklı: canvas aktifken hareket tuşları; tıklama ile odağı geri getirmeyi ürün akışına ekleyin.
- Form odaklı: yazı alanı aktifken kısayolları susturun veya bağlam değiştirin; tab sırasını erken test edin.
- XR: pointer varsayımlarını taşımayın; seçim ve ışın kuralını Controller input ile yeniden tanımlayın.
Üretimde sadeleştirme
Geliştirici kısayolları ( debug fly, serbest kamera) üretim derlemesinden çıkarılmalı veya bayrakla kilitlenmelidir; aksi halde hem güven hem kullanıcı deneyimi riski doğar. Teşhis için eklenen global dinleyiciler, özellik paketinde unutulduğunda bellek ve olay gürültüsü üretir.
Tek bir global true ile açılan hızlı yollar üretimde unutulur; yapı bayrakları, ortam değişkeni veya derleme zamanı şartlı çıkarma desenleri Debug visualization · üretimden çıkarma ile aynı disiplindedir — o sayfa çizim içindir, fakat «geliştirici girişi de paket dışında kalmalıdır» ilkesi buraya taşınır. Yayın öncesi kontrol listesine «ham window dinleyicisi var mı?» maddesini ekleyin.
- Derleme: debug kamera ve uçuş modlarını üretim paketinden ayırın.
- Bayrak: iç beta için kısayol ayrı; canlıda varsayılan kapalı.
- Temizlik: sahne kapanırken tüm harici dinleyicileri kaldırın ( dispose sırası ile birlikte).
Three.js ile üst üste okuma
Three.js tarafında OrbitControls gibi yardımcılar kendi içlerinde pointer dinleyicileri ekler; üzerine kendi raycaster köprünüzü koyduğunuzda sıra ve preventDefault davranışı tamamen sizin sorumluluğunuzdadır. Babylon.js'te kamera ve sahne gözlemleri aynı motor çatısında olduğu için «kim dinliyor» sorusu yine sizde kalır; fakat bağlantı noktaları ( attachControl, sahne gözlemleri) çoğu zaman tek çatı altında dokümante edilir.
Çakışmayı önleyen çerçeve
Three.js öğretilerinde kamera genelde bir kontrol nesnesi ( OrbitControls) ile sarılır; giriş tamamen sizin yazdığınız köprüdedir. Babylon.js'te kamera–canvas bağlantısı çoğu zaman motor tarafından tanınır ve GUI ile aynı sahne yaşam döngüsünde güncellenir — aynı fiziksel düğmeye iki bağımsız dinleyici kurmak Three tarafında olduğu kadar burada da tuzaktır; fark araçların varsayılanlarında değil, sizin katman kurallarınızda ortaya çıkar.
Taşınan beceri «hangi katman önce» tablosunu yazmaktır; motor adı değişse de kamera ve GUI önceliği ile sahne nesnesi eylemleri ayrımı aynı kalır. Sahne içi dokulu arayüzün Three karşılığı için 3D GUI · Three okuması tamamlayıcıdır.
- Ortak tuzak: aynı olayda çift dinleyici → çift hareket veya sessiz tüketim.
- Three: kontrol kütüphanesi + elle köprü; sıra sizin kodunuzda açıkça yazılmalıdır.
- Babylon: motor gözlemi ve kamera bağlantısı çoğu zaman tek çatı; kurallar yine sizde.
Sıradaki: tam ekran arayüz
Giriş kurallarını netleştirdikten sonra tam ekran HUD katmanı için Fullscreen UI sayfasına geçebilirsiniz. Önceki adım: 3D GUI.