Three.js · Etkileşim · OrbitControls
OrbitControls: nesne odaklı keşif mekanizması
OrbitControls, kamerayı uzayda kapalı bir yörünge ailesi içinde tutup, seçilen bir hedef nokta (target) etrafında dolaştıran hazır bir kontrol katmanıdır. Sezgisel imgelerle: kamera uyduya, incelenen nesne veya odak bölgesi ise çekim merkezine yakın duran bir «gezegen»e benzer — bakış çizgisi sürekli merkeze kilitlenir.
Three.js ekosisteminde bu sınıf, ürün vitrinlerinden mimari önizlemelere kadar en yaygın «sergi kamerası»dır; çünkü kullanıcıyı dünya içinde özgürce koşturmaz, nesneyi kaybetmeden çevresinde döndürür. Soyut çerçeve için Kontrol mantığı sayfasına; yumuşatma ve zaman için Lerp & easing içeriğine dönebilirsiniz.
Aşağıda önce üç taşıyıcı eksen (dönüş, zoom, pan), ardından hedef merkezli mimari, kullanım senaryoları ve üretim ayarları açılır.
Üç temel sütun: döndürme, zoom, pan
Kontrolcü, kullanıcının uzamsal ihtiyaçlarını üç bağımsız ama aynı hedefe bağlı kanala böler. Bu kanalların her biri farklı bir girdiyle beslenir (sürükleme, tekerlek, orta tuş veya jest); birleşik sonuç ise tek bir kamera konumu ve bakış vektörüdür.
Rotate · yörünge hareketi
Döndürme, gözün hedef etrafında yatay ve dikey eksende süzülmesidir. Three.js tarafında bu çoğu zaman iç bir Spherical temsil ile yürütülür: azimut (θ) sağ–sol gezinmeyi, polar (φ) yukarı–aşağı «kutup» hareketini temsil eder; kameranın hedefe uzaklığı ise üçüncü boyut r ile tamamlanır.
- Kutup sıçraması önlemi: φ tam 0° veya 180°’ye yaklaştığında bakış vektörü teğetselleşir; yön hissi zayıflar ve bazı projeksiyonlarda sayısal titreşim artar. Bu yüzden minPolarAngle / maxPolarAngle ile «üst ve alt kavanoz» konur — kullanıcı zeminden gökyüzüne tam dik bakış sınırına yaklaşır ama tanımsızlığa düşmez.
- Gimbal algısı: Euler zinciri yerine küresel parametreler bu modda daha stabil çalışır; yine de dik bakış bölgelerinde hassasiyeti düşürmek bazen daha iyi UX verir.
Zoom · mesafe veya ölçek
Zoom, gözün hedefe olan mesafeyi (r) değiştirmektir; kamera türüne göre aynı kullanıcı jestinin altında yatan matematik farklılaşır.
- PerspectiveCamera: Tipik «ileri–geri» hareketidir: kamera hedefe yaklaşır veya uzaklaşır; görüş alanı (FOV) sabit kalırken nesne projeksiyonda büyür/küçülür. Perspektif kamera bağlamında düşünün.
- OrthographicCamera: Mesafe tek başına ölçeği değiştirmez; yakınlaştırma genelde projeksiyon penceresinin (zoom / görünür genişlik) sıkıştırılmasıyla yapılır — kullanıcı deneyimi «yaklaşıyorum»dur ama motor içinde odak mesafesi sabit kalabilir. Ortografik kamera sayfası bu farkı netleştirir.
- Sınırlar: minDistance ve maxDistance (perspektifte) veya eşdeğer zoom kısıtları, modelin içine gömülmeyi ve ufkun sonsuzluğunda kaybolmayı engeller.
Pan · kaydırma
Pan, hem kamerayı hem hedefi bakış düzlemine paralel olarak birlikte öteler. Böylece kullanıcı yörüngeyi «kırmaz»; merkez nokta sahneye göre kayar ve inceleme odağı bir otomobilin önünden arka aksına, bir molekülün bir ucundan diğerine taşınır.
Matematiksel olarak bu, çoğu kurulumda görüntü düzlemine teğet iki eksende bileşke ötelemedir; hangi eksenlerin seçildiği ekran uzayı vs dünya zemini tercihiyle belirlenir.
Target merkezli mimari
OrbitControls’ü diğer bakış modlarından ayıran şey, sürekli güncellenen bir odak vektörüdır. Kamera konumu küresel parametrelerden üretilse bile, bakış yönü pratikte hep «hedefe doğru» kalır — bu, kullanıcı fareyi çevirdiğinde nesnenin görüntü merkezinden kolayca düşmemesini sağlar.
- lookAt disiplini: Her güncellemede kamera–hedef hizası korunur; dönüş komutları gözü çevirirken merkez sabitlenmiş hissiyat üretir.
- Hedef animasyonu: Kullanıcı arayüzünden başka bir parçaya «odaklan» dendiğinde hedef konumu kademeli güncellenirse geçiş sinematik hâle gelir; ani sıçrama yerine vektör bazlı lerp veya kısa süreli easing kullanımı yaygındır (bkz. Lerp & easing).
- Kısıtlı deneyimler: Hedefi kodla sabitlemek, bir müze vitrininde eserin dışına taşmayı engeller; serbest gezinti istenen ürün sayfalarında ise hedef ortalanmış bounding box merkezinden başlatılır.
Senaryolar ve deneyim tasarımı
«Neden ilk şahıs değil de yörünge?» sorusunun yanıtı odak ekonomisindedir: kullanıcıya hangi nesnenin hikâyenin kahramanı olduğunu söylersiniz ve navigasyon bu kahramanın etrafında döner.
- Ürün ve e‑ticaret: Ayakkabı, saat veya mobilya görsellerinde nesnenin kadrajdan düşmemesi satış algısını güçlendirir; döngüsel gezinme, malzemeyi farklı açılardan «elle tutma» fantezisini tetikler.
- CAD / mimari önizleme: Ölçülü modellerde tek bir bağlantı detayına yaklaşıp geri çekilme ritmi stabil kalır; ölçek küçükken yanlışlıkla sahneyi terk etme riski azalır.
- Kısıtlı alan ve vitrin: Konferans kiosk’ları veya eğitim demolarında, kullanıcının kaybolmaması gereken senaryolarda yörünge + sabit hedef bir güvenlik örgüsü gibi işler.
- Erişilebilirlik ve konfor: Bazı kullanıcılar için sürekli baş hareketi gerektiren ilk şahıs bakış bulantı tetikleyebilir; nesne etrafında dönmek daha yumuşak bir görsel akış sunar — yine de döndürme hızını abartmamak gerekir.
Üretim ayarları: damping, otomatik dönüş ve pan uzayı
Ham kontrol verisi işlevseldir; fakat Holodepth çizgisinde bir deneyimi «tamamlayan» katman, hareketin kütlesi ve davetkarlığıdır.
enableDamping
Yumuşatma açıkken sürükleme bırakıldığında kamera anında donmaz; ivmeli bir süzülme ile durur. Three.js uygulamasında bu mod, animasyon döngüsünde kontrol örneğinin update() çağrısına bağımlıdır — bir kare atlanırsa his kayabilir. dampingFactor ile sürtünme gücü ayarlanır; düşük gecikme hedefleniyorsa faktörü aşırı küçültüp «yapışkanlık» üretmeyin.
autoRotate
Sahne yüklendiğinde veya kullanıcı beklerken hafif bir yörünge hızı vermek, «bu sahne 3B ve canlı» mesajını ilk saniyede iletir. Üretimde kullanıcı müdahalesi başladığında otomatik dönüşün durması veya yavaşça sönmesi beklenir; aksi halde kontrol çekişmesi oluşur.
screenSpacePanning
Bu bayrak, pan vektörünün ekran X/Y düzlemine mı yoksa zemine yakın dünya eksenlerine mi projeksiyonunu seçtirir. Mimari modellerde zemine hizalı kaydırma daha doğal olabilir; UI ağırlıklı ürün sayfalarında ekran uzayı bazen daha öngörülür. Yanlış kombinasyon, kullanıcıya «kaydırma ekseni kaydı» hissi verir; prototipte iki modu da deneyin.
Holodepth teknik notu
Yörüngeyi sahneye gömmek için hedefi ve mesafe sınırlarını içerik ekibinin ölçüleriyle birlikte düşünün: küçük ürünlerde maxDistance fazla gevşek kalırsa kullanıcı nesneyi kaybeder; geniş şehir maketlerinde ise minDistance çok sıkı olursa frustrum içinde kalınamaz. Pan modunu seçtikten sonra mobil jestleri ayrı doğrulayın — parmakla pan ve döndürmenin çakışması, desktop fare davranışından farklı hissiyat üretir.