Three.js Giriş: Tarayıcıda İlk 3B Sahne

Bu Three.js giriş rehberinde tarayıcıda çalışan ilk üç boyutlu sahneni sıfırdan kuracaksın. Web'de 3B grafik denince akla gelen ilk teknoloji WebGL'dir; ancak ham WebGL ile çalışmak yüzlerce satır shader ve matris koduyla uğraşmak demektir. Three.js tam bu noktada devreye girer ve aynı işi birkaç anlaşılır satıra indirir.

WebGL nedir?

WebGL (Web Graphics Library), tarayıcının ekran kartına (GPU) doğrudan erişmesini sağlayan, JavaScript'ten çağrılan bir grafik API'sidir. OpenGL ES standardına dayanır ve eklenti gerektirmeden bir <canvas> elemanı üzerine donanım hızlandırmalı çizim yapar. Yani 3B modeller, parçacık sistemleri ve gerçek zamanlı ışıklandırma artık masaüstü uygulamalarına özel değil; bir web sayfasında da mümkün.

Sorun şu: WebGL çok alt seviyedir. Bir üçgeni ekrana çizmek için bile vertex ve fragment shader yazmak, tampon (buffer) oluşturmak ve projeksiyon matrislerini elle hesaplamak gerekir. Üretkenlik için bir soyutlama katmanı şart, işte Three.js bu katmanı sağlar.

Three.js neyi kolaylaştırır?

Three.js, WebGL'in üzerine oturan açık kaynaklı bir JavaScript kütüphanesidir. Sahne grafiği (scene graph) mantığıyla çalışır: nesneleri tek tek shader'a çevirmek yerine, mantıksal bir hiyerarşi içinde düşünürsün. Sana hazır olarak şunları verir:

• Geometriler: küp, küre, düzlem, silindir gibi hazır şekiller.
• Materyaller: ışığa tepki veren ya da vermeyen yüzey tanımları.
• Işıklar ve kameralar: perspektif kamera, yön ışığı, ortam ışığı.
• Yükleyiciler: .glb/.gltf gibi 3B model formatları için hazır araçlar.

Üç temel kavram: sahne, kamera, renderer

Her Three.js uygulamasının kalbinde üç nesne vardır. Sahne (Scene) tüm nesnelerin içine yerleştirildiği kaptır. Kamera (Camera) sahneye hangi açıdan baktığını belirler. Renderer ise sahneyi kameranın gözünden alıp canvas'a çizer. Bu üçlüyü kurduğunda iskelet hazırdır:

import * as THREE from 'three';

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  75,                                   // görüş açısı (derece)
  window.innerWidth / window.innerHeight, // en-boy oranı
  0.1,                                  // yakın kırpma düzlemi
  1000                                  // uzak kırpma düzlemi
);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

PerspectiveCamera insan gözüne benzer şekilde uzaktaki nesneleri küçük gösterir. Kamerayı z ekseninde geriye almazsak nesnenin tam içinde kalır ve hiçbir şey göremeyiz.

İlk küpü oluşturmak

Şimdi sahneye bir nesne ekleyelim. Three.js'te görünür bir nesne genelde bir Mesh'tir; Mesh, bir geometri (şekil) ile bir materyalin (yüzey) birleşimidir.

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00aaff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

MeshBasicMaterial ışıktan etkilenmez; her zaman düz renk gösterir, bu yüzden ilk denemeler için idealdir. Işıklandırmaya geçtiğinde MeshStandardMaterial kullanıp sahneye bir DirectionalLight eklemen gerekir, aksi halde nesne simsiyah görünür.

Animasyon döngüsü

Tek kare çizmek yetmez; akıcı bir animasyon için her ekran yenilemesinde sahneyi tekrar render etmeliyiz. Bunun doğru yolu requestAnimationFrame kullanmaktır, çünkü ekranın tazeleme hızıyla (genelde 60 FPS) senkron çalışır ve sekme arka plandayken otomatik olarak yavaşlar.

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}
animate();

Bu döngü çalıştığında mavi küpün iki ekseninde yavaşça döndüğünü göreceksin. Tebrikler, tarayıcıda ilk gerçek zamanlı 3B sahneni kurdun.

Pencere boyutuna uyum ve sonraki adımlar

Gerçek bir projede pencere yeniden boyutlandırıldığında görüntünün bozulmaması için kamera ve renderer'ı güncellemelisin:

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

Buradan sonra keşfedebileceğin başlıklar: OrbitControls ile fareyle sahneyi döndürme, GLTFLoader ile hazır 3B modeller yükleme, gölgeler, dokular ve son işlem (post-processing) efektleri. Temel iskelet hep aynı kalır; sadece sahneye eklediğin nesneler zenginleşir.

Sık Sorulan Sorular

Three.js öğrenmek için ileri matematik gerekir mi?

Başlamak için hayır. Sahne, kamera ve mesh mantığını kavramak yeterli. İleride özel shader yazmak ya da karmaşık kamera hareketleri istediğinde temel vektör ve trigonometri bilgisi işine yarar, ama ilk projeler için şart değildir.

Three.js'i React projesine ekleyebilir miyim?

Evet. react-three-fiber kütüphanesi Three.js'i React bileşenleri olarak yazmanı sağlar ve sahne grafiğini bileşen ağacıyla yönetir. Yine de altta çalışan mantık aynı Three.js olduğu için önce saf kütüphaneyi anlamak büyük avantaj sağlar.

Küpüm neden siyah görünüyor?

Büyük ihtimalle ışığa tepki veren bir materyal (örneğin MeshStandardMaterial) kullanıyorsun ama sahnede ışık yok. Ya sahneye bir ışık ekle ya da hızlı test için MeshBasicMaterial'a geç.

3B bir web deneyimi mi hayal ediyorsun? İnteraktif ürün görselleştirmeleri, animasyonlu açılış sahneleri veya WebGL tabanlı portföyler için birlikte çalışabiliriz. Benimle iletişime geç ve fikrini hayata geçirelim.