PerspectiveCamera (perspektif kamera) gerçek dünya görüşünü simüle etmek

Perspektif izdüşüm, insan gözünün ve fiziksel kameraların dünyayı algılama biçimini matematiksel olarak simüle eder. Bu modelde, kameradan çıkan tüm görüş doğrultuları (rays) tek bir odak noktasında birleşir; dolayısıyla paralel uzanan çizgiler (örneğin uzun bir koridorun duvarları) uzaktaki sonsuz bir kaçış noktasına (vanishing point) doğru birbirine yaklaşır.

Bu sistemin en belirgin özelliği mesafe tabanlı ölçeklemedir: Aynı gerçek boyuta sahip iki nesneden, kameraya yakın olan ekranda devasa görünürken, uzak olan nesne orantısal olarak küçülür. Three.js, bu doğal derinlik ve hacim algısını PerspectiveCamera sınıfı ile uygular. Boyutun mesafeden bağımsız olduğu (nesne ne kadar uzak olursa olsun boyutunun aynı kaldığı) OrthographicCamera (ortografik) izdüşümünden ayrıldığı temel nokta tam olarak budur.

Kullanım Senaryoları:
Derinlik, hacim ve mesafe hissinin kritik olduğu tüm "dünyanın içindeymiş" deneyimlerinde mimari gezintiler, birinci şahıs oyunlar veya sinematik kamera hareketleri perspektif kamera varsayılan ve en doğru tercihtir. Buna karşın, ölçeğin korunması gereken (boyutların ekrana yansırken asla bozulmadığı) teknik çizimler, 2D oyun haritaları veya sadece kullanıcı arayüzü (HUD) öğelerini hizalamak gibi "matematiksel netlik" gerektiren işlerde genellikle ortografik izdüşüm tercih edilir.

Yukarıdaki şema, bu mantığın görüş hacmi (frustum) üzerindeki izdüşümünü özetlemektedir: Kameranın durduğu nokta, lensin genişliği (FOV) ve kırpma düzlemleri (near/far). Bir sonraki bölümde bu teknik parametrelerin canlı önizlemesini ve sahnede yarattıkları matematiksel farkları inceleyeceğiz.

Bu WebGL önizlemesi kameranın görüşünü gösterir; sahne ve kamera konumu sabittir; oynanan tek şey PerspectiveCamera’nın FOV, near ve far değerleri. Uzun koridor, zeminde paralel ızgara çizgileri ve yinelenen sütunlar: FOV yükseldikçe yan duvarlar ve ızgara hızlı “içeri kapanır” (geniş açı); düşürdükçe sahne daha düzleşmiş (telefoto) görünür. Near’ı büyütünce yakın kırpma belirginleşir; far’ı küçültünce uzak uçlar kesilir; z-fighting riski için near’ı aşırı küçültme. Aşağıdaki senaryo kartları aynı FOV fikrini üstteki şemadaki Oyun · Mimari · Sinematik örnekleriyle bağlar; kart seçince hem açı hem neden birlikte gelir.

Üstteki Perspective Effect Playground (diagram-perspective-playground.js, data-material-demo="perspective-playground") ile aynı sayıları ön harita tabloda topladık. Sürgüler ve senaryo kartlarıyla değişenler HUD satırında; kalan satırlar dosyadaki sahne sabitleridir. Tür sütunu: ekrandaki kontroller ile kaynak koddaki sabitleri ayırır.

Bir PerspectiveCamera örneği oluştururken verdiğiniz dört değer, kameranın görüş hacmini (frustum) matematiksel olarak tanımlar (şema). Aynı parametreleri 3B uzayda denemek için Perspective Effect Playground’a bakın.

Üstteki koridor demosunda bu dört değişkenin etkisini teoriye dokmadan görürsünüz: FOV arttıkça yan duvarlar ve ızgara hızla içeri kapanır (geniş açı hissi); near büyüdükçe kameraya çok yakın yüzeyler kesilir; far küçüldükçe koridorun sonu ve uzak sütunlar görünmez hale gelir. Aspect bu demoda viewport en/boy oranına kilitlenir; pencereyi genişletince sahne basık veya uzun kalmaz.

• FOV (field of view): Three.js'te varsayılan olarak dikey bakış açısıdır (derece). Açı büyüdükçe daha geniş bir koni görürsünüz sahne “yakınlaşmış” gibi hissedilir; bu, kamerayı fiziksel olarak kaydırmadan elde edilen dijital zoom etkisidir. Pratik aralık çoğu projede 45°–75° civarıdır: 50–60° nötr, 70°+ geniş açı (kenarlarda belirgin distorsiyon, balık gözü), 35°–45° telefoto / sinematik sıkışıklık. Değeri kodda veya playground sürgüsünde değiştirdikten sonra camera.updateProjectionMatrix() çağrılmazsa ekrana yansımaz.
• Aspect (en–boy oranı): Görüntü alanının genişlik / yükseklik oranıdır; dairelerin yuvarlak, insan figürlerinin orantılı kalması buna bağlıdır. Canvas penceresi yeniden boyutlandığında camera.aspect güncellenmezse küreler elips, zemin ızgarası dikdörtgen görünür tam ekran uygulamalarda resize olayında renderer.setSize ile birlikte aspect’i senkron tutmak standarttır. İlk kurulumda geçici olarak 1 verip ilk resize’ta gerçek oranı yazmak yaygın bir kalıptır (aşağıdaki örnek kodda da böyledir).
• Near (yakın kırpma): Kameranın görmeye başladığı en yakın düzlem; frustum piramidinin ön yüzüdür. Bu düzlemden daha yakındaki geometri çizilmez (kamera içinde kalmış gibi kesilir). Başlangıç için 0.1 sık kullanılır; sahne birimlerinize göre ölçekleyin. near gereğinden küçük (ör. 0.001) seçilirse derinlik tamponu hassasiyeti dağılır yüzeylerde titreme ve z-fighting artar. Çok büyük near ise kameraya yakın duvar veya zemin aniden kaybolur; playground’da near sürgüsü bunu gösterir.
• Far (uzak kırpma): Görüşün kesildiği uzak düzlem; frustum’un arka yüzü. Bu mesafeden ötesi çizilmez (gökyüzü kutusu veya sis ile gizlenir). Infinity teoride mümkün olsa da derinlik aralığı GPU’da sınırlı çözünürlükle paylaşılır; near ile far arasındaki fark ne kadar genişse, yakın derinlikteki ayrım o kadar kötüleşir. Sahne boyutuna uygun üst sınır (ör. birimler metre ise 500–2000) genelde 1e6 veya sonsuzdan iyidir hem performans hem görsel tutarlılık için. Koridor demosunda uzak kesiti göstermek için far bilinçli olarak sıkı tutulmuştur; üretim sahnenizde genelde daha geniş seçersiniz.

Aşağıdaki kurucu satırı, bölüm 1’deki Perspective Effect Playground başlangıcıyla (diagram-perspective-playground.js ve üstteki tablo) hizalıdır. Genel örneklerde far sıkça daha büyük seçilir; koridor demosunda uzak uç kesilmesini görmek için 75 civarı bilinçli sıkı tutulmuştur.

// diagram-perspective-playground.js  başlangıç (aspect ilk resize’ta viewport’tan yazılır)
const camera = new THREE.PerspectiveCamera(
  55, // FOV (°)  HTML sürgü başlangıcı; kod içi clamp 18…110
  1, // aspect  ilk ctor; resize() ile w / h güncellenir
  0.1, // near  başlangıç; clamp 0.02…4
  75 // far  başlangıç; clamp 12…140
);
// syncCameraFromDom: .fov / .near / .far yazıldıktan sonra mutlaka:
// camera.updateProjectionMatrix();  yoksa yeni clip / açı ekrana yansımaz

Ne zaman kullanılır? Kısaca: izleyici sahneyin içinde veya gerçek bir kamera kadrajıyla bakıyorsa; ölçülerin ekranda “yakınlaşıp uzaklaşması” isteniyorsa; PerspectiveCamera doğru varsayılandır.

• Oyunlar ve etkileşimli 3D: Birinci veya üçüncü şahıs gezinti, araç simülasyonu ve VR gibi deneyimlerde kullanıcı, dünyayı gerçekçi bir perspektif algısıyla deneyimler. Koridor derinliği, kapı aralıkları ve nesnelerin birbirine olan uzaklıkları ancak bu izdüşüm sayesinde sezgisel olarak anlaşılabilir. Kamera hareketi ve FOV değerleri ile oyuncuya "gerilim" veya "geniş açı" gibi mekansal hisler aktarılabilir; bu teknik parametrelerin detayları, önceki frustum ve kurulum bölümlerinde açıklanmıştır.
• 3D Sahne, Ürün ve Mimari: Konfigüratörler, mobilya tasarım araçları, iç mekan turları veya dış cephe gezintileri gibi projelerdir. Kullanıcının bir mekânın derinliğini ve nesnelerin ölçek hissini doğru kavraması, ikna edici bir deneyim için kritiktir. Statik bir görsel yerine kullanıcıya "gezilebilir bir sahne" sunmak istiyorsanız, perspektif kamera en doğal ve güvenilir tercihtir.
• Gerçekçi Derinlik ve Perspektif Algısı: Ön plan ile arka planı birbirinden ayırmak, kaçış çizgileriyle yönlendirme yapmak veya "büyük bir salon" hissi yaratmak gibi sinematik veya dramatik kareler için perspektif kamera vazgeçilmezdir. Eğer sahnenizin "kartpostal gibi" düz, ölçekleri her noktada birebir aynı ve hatasız kalması gerekiyorsa, bu durumda "kullanılmaz" listesindeki ortografik kamera tercihlerini incelemeniz önerilir.

Hızlı karşılaştırma: PerspectiveCamera uzaklaştıkça küçülen, yaklaştıkça büyüyen çizgilerle gerçek dünyaya benzer bir görünüm verir. OrthographicCamera ise paralel izdüşümle ölçü ve oranların daha "düz" ve okunaklı kalmasını sağlar; derinlik hâlâ vardır ama perspektif distorsiyonu yoktur.

Ne zaman kullanılmaz? Dünya sahnesi için perspektif doğru olsa bile, ekran uzayında sabit ölçek veya paralel çizgilerin bozulmaması şart ise tek bir PerspectiveCamera ile her şeyi çözmeye çalışmayın; ayrı kamera katmanı veya farklı kamera türü gerekir.

• UI / HUD ve Overlay Bileşenleri: Can barı, minimap, menü öğeleri veya imleç gibi arayüz elemanları, kameranın hareketinden bağımsız olarak her zaman sabit boyutta ve piksel hassasiyetinde görünmelidir. Perspektif kamerasıyla çizilen bir düzlem, kameraya yaklaştıkça büyür veya uzaklaştıkça küçülür; bu da arayüzün tutarsız görünmesine yol açar. Bu nedenle HUD veya arayüz tasarımları, projelerin çoğunda CSS/HTML katmanlarında ya da ikinci bir OrthographicCamera (Ortografik Kamera) kullanılarak render edilir. Böylece oyun dünyası perspektif derinliğini korurken, arayüz tamamen ekranın sabit koordinat düzlemine kilitlenmiş olur.
• Teknik Çizim, CAD ve İzometrik Düzlem: Ölçü çizgileri, yapısal kesitler, kat planları, fabrika yerleşim şemaları veya strateji oyunlarındaki harita görünümleri gibi uygulamalarda, paralel kenarların korunması ve mesafe ölçümlerinin hatasız okunabilmesi şarttır. Perspektif izdüşümde uzak köşeler daralarak küçülür ve duvarlar eğimli görünür; bu optik yanılsama ölçülerin doğruluğunu bozar. Bu tür teknik gereksinimlerde, mesafeden bağımsız olarak paralel çizgileri koruyan ortografik (veya izometrik) izdüşüm tercih edilir. Detaylı teknikler için Ortografik Kamera sayfasını inceleyebilirsiniz.

Özet: yukarıdaki iki grupta amaç distorsiyonsuz, ölçülü veya ekrana kilitli görünümdür. Kamera türleri ve frustum bağlamı için Kamera Giriş sayfasına dönebilirsiniz.

Gerçek bir web projesinde kamera statik değildir. Pencere yeniden boyutlandığında aspect güncellenmelidir; yalnızca özelliği değiştirmek yetmez; camera.updateProjectionMatrix() ile projeksiyon matrisi yeniden hesaplanmalıdır. Aynı çağrı, kodla .fov / .near / .far değiştirdiğinizde de zorunludur; atlanırsa kamera özellikleri güncellenmiş olsa bile görüntü eski projeksiyonda kalır. Çıktı boyutunu güncellemek için Renderer tarafında da setSize çağrısı gerekir. Tam sayfa yerine bir konteyner içinde canvas kullanıyorsanız (ör. bölüm 1 playground), ResizeObserver ile o konteynerin boyutunu izlemek yaygın bir kalıptır.

// diagram-perspective-playground.js  ResizeObserver + viewport (tam pencere değil)
function resize() {
  const w = viewportEl.clientWidth || 640;
  const h = viewportEl.clientHeight || 360;
  renderer.setSize(w, h, false);
  camera.aspect = w / Math.max(h, 1);
  camera.updateProjectionMatrix();
  // FOV, near, far veya aspect değişince zorunlu  yoksa projeksiyon / görüntü güncellenmez
}

const ro = new ResizeObserver(() => {
  resize();
  syncCameraFromDom(); // FOV/near/far sürgüleriyle projeksiyonu tazele
});
ro.observe(viewportEl);

Three.js kamerasını bir Object3D olarak düşünmelisiniz. Sahneye ilk eklendiğinde varsayılan olarak (0, 0, 0) koordinatında, yani tam merkezde oluşur. İçerideki objeleri görüntülemek için kamerayı genellikle sahnenin dışına doğru "geri çekmeniz" ve hedefe kilitlenmesini sağlamanız gerekir.

Aşağıdaki yapı, bölüm 1'de yer alan Perspective Effect Playground örneğindeki kamera kurulumunun birebir aynısını içerir. Bu spesifik örnekte kamera sabittir ve herhangi bir fare etkileşimi (OrbitControls) içermez.

// Koridor demosu için kamera kurulumu (sabit konum)
const camera = new THREE.PerspectiveCamera(55, 1, 0.1, 75);

// Kamerayı sahnenin dışına yerleştir ve koridorun içine doğru kilitlen
camera.position.set(0, 1.58, 5.4);
camera.lookAt(0, 1.42, -36);

// resize() olayında aspect oranı pencere boyutuna göre güncellenmelidir

Kullanıcının kamerayı fareyle döndürmesi veya yakınlaşıp uzaklaşması gereken etkileşimli sahnelerde OrbitControls standardı kullanılır. Bu eklenti, kamera ve renderer nesneleri oluşturulduktan sonra onlara bağlanır; ancak en önemli nokta, animasyon döngüsünün her karesinde güncellenmesidir.

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// Kamera kontrolcüsünü bağla
const controls = new OrbitControls(camera, renderer.domElement);

function animate() {
  requestAnimationFrame(animate);
  // Kontrollerdeki güncellemeleri (dönüş/zoom) her karede uygula
  controls.update();
  renderer.render(scene, camera);
}