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

Perspektif izdüşümde, kameradan çıkan görüş doğrultuları tek bir noktada birleşir gibi düşünülür; paralel koridor çizgileri uzakta kaçış noktasına yaklaşır. Aynı boyuttaki iki nesne, uzakta ekranda daha küçük, yakında daha büyük görünür; bu, gerçek göz ve fotoğraf makinesiyle aynı sezgidir. Three.js bunu PerspectiveCamera ile matematiksel olarak uygular; ölçek sabit kalan OrthographicCamera izdüşümünden temel fark budur.

Sonuç olarak sahnede derinlik, hacim ve mesafe hissi oluşur: ön plandaki obje arka plandan ayrılır, koridor “içeri doğru uzar”. Mimari gezinti, birinci şahıs oyun veya sinematik kamera gibi "dünyanın içindeymiş" deneyimlerinde bu tür varsayılan tercihtir; teknik çizim veya HUD düzlemi gibi oranın korunması gereken işlerde genelde ortografik kamera tercih edilir.

Aşağıdaki etkileşimli şema, bu mantığın görüş hacmi (frustum) karşılığını gösterir: kamera noktası, FOV açısı ve yakın / uzak düzlemler. Sayısal parametreler ve canlı önizleme sonraki başlıklarda.

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 / üçüncü şahıs gezinti, araç simülasyonu, VR önizleme gibi deneyimlerde oyuncu dünyayı perspektifle okur; koridor, kapı ve engellerin uzaklığı bu sayede anlaşılır. Kamera hareketi ve FOV ile gerilim veya geniş açı hissi verilir — teknik ayrıntılar yukarıdaki frustum ve parametre bölümlerinde.
• 3D sahne, ürün ve mimari: Konfigüratör, mobilya / iç mekân turu, dış cephe gezintisi, “ürünü masada döndürme” vitrinleri. Müşteri veya kullanıcı mekânın derinliğini ve ölçek hissini kavramak istediğinde perspektif doğal gelir; statik hero görsel yerine gezilebilir sahne hedefleniyorsa bu tür seçilir.
• Gerçekçi derinlik ve perspektif: Ön plan–arka plan ayrımı, kaçış çizgileri ve mesafe algısı önemliyse — sinematik kare, dramatik açı, “büyük salon” hissi — perspektif kamera kullanılır. Aksi halde sahne kartpostal gibi düz ve ölçek okunaklı kalması isteniyorsa aşağıdaki “kullanılmaz” listesine ve ortografik kameraya bakın.

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: Can barı, minimap çerçevesi, menü, imleç, etiketler — piksel başına aynı boyutta kalmalıdır. Perspektif kamerasıyla çizilen bir düzlem kameraya yaklaştıkça büyür, uzaklaştıkça küçülür; bu yüzden HUD çoğu projede CSS/HTML katmanında veya ikinci bir OrthographicCamera ile render edilir. Oyun dünyası perspektif kalır; arayüz ekran uzayında ayrılır.
• Teknik çizim, CAD ve izometrik düzlem: Ölçü çizgileri, kesit görünüşü, kat planı, fabrika yerleşimi veya strateji oyunundaki “harita” düzlemi — paralel kenarlar ve mesafelerin okunaklı kalması gerekir. Perspektifte uzak köşeler küçülür, duvarlar eğimli görünür; bu da ölçüyü yanıltır. Bu senaryolarda ortografik (veya özel izometrik) izdüşüm tercih edilir; ayrıntılar Ortografik Kamera sayfasında.

Ö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);

Kamera sahnede bir Object3D gibi davranır. Varsayılan olarak (0, 0, 0)'da oluşur; içerik görmek için genelde geri çekilir veya hedefe lookAt ile kilitlenir:

Aşağıdaki kod, bölüm 1’deki Perspective Effect Playground içindeki sabit kamera ile aynı position / lookAt değerlerini gösterir (bu demoda OrbitControls yok).

// Koridor demosu (diagram-perspective-playground.js) — sabit kamera, OrbitControls yok
const camera = new THREE.PerspectiveCamera(55, 1, 0.1, 75);

camera.position.set(0, 1.58, 5.4);
camera.lookAt(0, 1.42, -36);

// resize() sonrası aspect = viewport genişliği / yüksekliği

İnteraktif örneklerde kamerayı fareyle döndürmek için OrbitControls yaygın çözümdür; kamera ve renderer hazır olduktan sonra bağlanır, animasyon döngüsünde controls.update() çağrısı gerekir.

// Bu sayfadaki koridor playground'unda OrbitControls kullanılmıyor — genel örnek:
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement);

function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}