Three.js · Etkileşim · TransformControls
TransformControls: interaktif manipülasyon ve gizmo mimarisi
TransformControls, nesneyi sahne içinde doğrudan taşımanızı, çevirmenizi ve ölçeklemenizi sağlayan görsel bir düzenleme katmanıdır. Orbit veya Fly gibi kontroller kamerayı kaydırırken, bu sınıfın hedefi seçilen Object3D düğümüdür: kullanıcı okları veya halkaları sürükleyerek pozisyon, rotasyon ve ölçek bileşenlerini günceller.
Üretimde «editör hissi» tam da buradan gelir: karmaşık matris çarpımlarını soğuk sayılar yerine gizmo dilinde okursunuz. Kamera ve nesne kontrollerinin çakışmaması için etkileşim modlarını (ör. düzenleme / gezinme) açıkça ayırın. Soyut hattı hatırlamak için Kontrol mantığı sayfasına bakın; ışın matematiği için Işın temeli ile bağ kuracağız.
Metin akışı: gizmo türleri, raycaster ve sürükleme geometrisi, kullanım alanları, uzay seçimi, snapping ve UX.
Gizmo tabanlı etkileşim
Gizmo, manipülasyonu küçük bir grafik sözleşmesine indirger: renkli eksenler yönü, halkalar dönüşü, küpler ise ölçeği hatırlatır. Kullanıcı hangi parçayı tuttuğunu bildiğinde motor da hangi matris bileşeninin güncelleneceğini bilir.
Translation (öteleme)
Üç boyutta eksen okları en yaygın görseldir; çoğu kurulumda X / Y / Z için kırmızı–yeşil–mavi ayrımı (veya proje standardına göre türev palet) kullanılır. Yalnız bir oka müdahale edildiğinde hareket, o eksenin doğrusal kombinasyonuyla sınırlı kalır — çapraz sürüklemeyi düzlem veya dünya eksenine projeksiyonla çözmek ayrı bir mod olabilir (düzlem yüzeyinde sürükleme gibi).
Rotation
Dönüş gizmolarda tipik olarak eksen etrafında halka temsil edilir; her halka, nesnenin ilgili yerel eksenindeki açısal değişimi kontrol eder. İç içe halkaların hangi Euler sırasına karşılık geldiği motor ve kullanıcı alışkanlığına bağlıdır — kaliteli bir arayüzde aktif eksen vurgulanır ve snap açıları görsel olarak işaretlenir.
Scale
Ölçek manipülatörleri çoğu zaman eksen uçlarında kutu veya tutamaç olarak çizilir; tek eksende süzdürme ile birlikte merkezden «uniform» büyütme için iç küre veya özel tutamacın olması yaygındır. Uniform ölçek, CAD benzeri düzenlerde modelin oranını korur; eksen bazlı ölçek ise asimetrik deformasyon ve örnek yerleştirme için gereklidir.
Teknik prensip: raycaster ve sürükleme düzlemi
Kullanıcı gizmo geometrisine tıkladığında, arka planda ışın–mesh kesişimi çalışır: hangi tutamacın seçildiği belirlenir ve o eksen ya da halka için etkileşim modu etkinleşir. Bu, sahne genelindeki picking ile aynı matematiktir; fakat burada aday kümesi çoğu zaman yalnızca kontrol yardımcılarının geometrisidir — böylece yanlışlıkla arka plandaki zemine çarpmak engellenir (katmanlama ve öncelik sırası kritiktir).
- Projeksiyon düzlemi: Sürükleme başladıktan sonra imleç hareketi doğrudan dünya uzayına taşınmaz; çoğu uygulama, seçilen eksene dik bir düzlem kurar ve imlecin ekran projeksiyonunu bu düzlem üzerinde takip eder. Böylece eksen boyunca anlamlı bir öteleme veya halka düzleminde anlamlı bir açı farkı üretilir.
- Delta birikimi: Ekrandaki önceki ve yeni temas noktaları düzlem üzerinde vektör farkına çevrilir; bu fark pozisyona doğrudan eklenir veya açısal hıza dönüştürülür. Kare süresi sabit değilse hızlandırma düzeltmesi (dt) unutulmamalıdır.
- Derinlik ve öncelik: Gizmo, geniş sahnede küçük görünse bile ışın önce ona çarpmalıdır; aksi halde kullanıcı zemini seçtiğini sanır. Z-buffer düzeninin ve renderOrder benzeri ipuçlarının kontrol listesinde olduğundan emin olun.
Kesişim testinin ayrıntılı sözleşmesi için Intersection test sayfasına başvurabilirsiniz; burada odak, manipülasyon döngüsünün «hangi tutamağı taşıyorum?» sorusuna indirgenmiş halidir.
Kullanım senaryoları: düzenleme kalbi
Bu kontrol sınıfı oyun motorunda level editor hissini web’e taşır; neredeyse her üretim hattında «orayı şuraya çek» ihtiyacıyla karşılaşırsınız.
- Sahne düzenleme: Işık, prop ve çarpışma hacimlerinin yerini milimetrik ayarlamak; prototipte hızlı iterasyon yapmak.
- Kullanıcı özelleştirmesi: Dekoratif nesneleri kullanıcı yerleştirdiğinde, snap ve dünya ekseni seçimleri yanlış yerleşimi azaltır.
- Veri görselleştirme: Graf düğümlerini veya 3B scatter noktalarını elle düzenlenebilir kılmak; bilimsel oturumlarda «bu kümenin merkezini kaydır» etkileşimi üretir.
Üç boyutta özgür bırakmak rahatlatıcıdır; fakat üretim ortamında kısıtlar (ör. zeminin üstünde kal, odanın içinde kal) genelde üst katman kurallarla eklenir — gizmo tek başına fizik veya oyun mantığı bilmez.
Kritik özellikler ve UX dokunuşları
Holodepth çizgisinde «editör» kalitesi, teknik doğrulukla birlikte konfor ve öngörülebilirlik getiren detaylardan oluşur.
Space: dünya ve yerel uzay
Dünya uzayı (world): Eksenler sahne genelinde sabittir; «yukarı» çoğu sahne için +Y (veya proje konvansiyonuna göre +Z) olarak kalır — kullanıcı zemine göre düşünür. Yerel uzay (local): Eksenler nesnenin mevcut yönelimine bağlıdır; eğik yerleştirilmiş bir mobilyayı «kendi önü» doğrultusunda kaydırmak için elverişlidir. Modları klavye kısayoluyla değiştirmek güç kullanıcıları sever.
Snapping
Izgaraya veya adım adım açıya kilitlemek, düzensiz kayan nesneleri engeller: örneğin ötelemede 0,25 birim grid, rotasyonda 15° adımlar. Snap etkinken bile ara değerleri göstermek (önizleme hayalet nesnesi) bazen daha güven verir — kullanıcı «şimdi yapıştı» anını görür.
Gizmo ölçek adaptasyonu
Kamera uzaklaştıkça gizmo piksel olarak küçülür; kontrol sınıfları çoğu zaman gizmonun dünya ölçeğini kameraya göre ayarlayarak ekran uzayında yaklaşık sabit kalınlık tutar — böylece hem yakından hem uzaktan tıklanabilir kalır. Aşırı yakında görsel örtüşme veya z-fighting riskini azaltmak için minimum/maksimum dünya ölçeği sınırları düşünün.
Holodepth teknik notu
Kamera kontrolü ile transform kontrolünü aynı anda açık bırakmayın: kullanıcı sahnede boşluğa tıkladığında hangi modun aktif olduğu net olmalıdır. Mobil dokunuşlarda tek parmak döndürme ile iki parmak kaydırma jestleri çakışabilir — düzenleme modunda jestleri geçici olarak devre dışı bırakmak veya onay diyaloğu göstermek sık çözümdür.