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

Perspektif kamera, 3D uzaydaki noktaları ekran düzlemine aktarırken bir kaçış noktası kullanır. Bu, sahnede doğal bir derinlik, hacim ve mesafe hissi yaratır. Mimari görselleştirme veya oyun gibi "dünyanın içindeymiş" hissi vermek istediğiniz projelerde bu kamera türü varsayılan tercihtir.

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): Dikey bakış açısı (derece). Pratik aralık: genelde 45°–75°. Çok yüksek değerler kenarlarda güçlü distorsiyon hissi verir; çok düşük değerler sahneyi "düzleşmiş" gösterebilir.
• Aspect (en–boy oranı): genişlik / yükseklik (canvas veya görüntü alanı). Ekran boyutuyla senkron kalmazsa objeler basık veya uzun görünür.
• Near (yakın kırpma): Kameranın görmeye başladığı en yakın düzlem; sık değer 0.1.
• Far (uzak kırpma): Görüşün kesildiği uzak düzlem. Performans ve derinlik hassasiyeti için "sonsuz" yerine sahne ölçeğine uygun bir üst sınır (ör. 1000) seçmek genelde daha iyidir.

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?

• Oyunlar ve etkileşimli 3D deneyimler
• 3D sahneler, ürün görselleştirme, mimari / iç mekân önizlemeleri
• Gerçekçi derinlik ve perspektif hissi gerektiren her türlü görselleştirme

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?

• UI / HUD katmanları, ekran uzayı sabit ölçek isteyen overlay'ler
• Teknik çizim, CAD tarzı ölçülü görünüm, izometrik "oyun haritası" düzlemi

Bu ikinci grupta genelde OrthographicCamera tercih edilir; perspektif distorsiyonu olmadan paralel izdüşüm elde edersiniz. Kamera türleri 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);
}