Three.js Nedir?
Three.js, tarayıcıda 3D grafik çizen açık kaynak bir JavaScript kütüphanesidir. Mr.doob olarak tanınan Ricardo Cabello tarafından başlatıldı ve ilk kez 2010'da GitHub'da yayımlandı; bugün üzerinde geniş bir katkıcı topluluğu çalışıyor. Tarayıcının cihazdaki ekran kartını kullanmasını sağlayan yerleşik arayüz WebGL üzerinden çalışır; eklenti ya da uygulama gerekmez.
Bir Three.js sahnesinin birkaç temel parçası vardır: nesneleri tutan sahne, ona bakan kamera ve onu sayfaya çizen çizici (renderer). Her nesne, bir biçim ile rengini, parlaklığını ve dokusunu belirleyen bir malzemenin birleşimidir; ışıklar ve gölgeler ona derinlik kazandırır. Yükleyiciler modelleri içeri alır, önerilen biçim glTF'tir; animasyon sistemi Blender gibi araçlarda hazırlanan hareketleri oynatır.
Three.js, MIT lisansıyla ücretsizdir ve ticari projelerde kullanılabilir. Proje, uzun süredir kullanılan WebGL çizicisinin yanında, tarayıcılardaki daha yeni grafik arayüzü WebGPU için de bir çizici geliştiriyor; bu çizici WebGPU'yu desteklemeyen cihazlarda WebGL 2'ye geri dönebiliyor. Müşteri projelerinde, projeye en güvenilir sonucu veren seçeneği kullanıyoruz.
Three.js'i Nerede Kullanıyoruz?
3D'yi bir fotoğrafın gösteremeyeceği bir şeyi gösterdiğinde kullanıyoruz. Müşteri projelerinde bu genellikle şu işler demek:
Etkileşimli Ürün Görünümleri
Ziyaretçi ürünü çevirir, ayrıntılara yakınlaşır, renk ya da malzeme seçenekleri arasında geçiş yapar. Biçimi, yüzeyi ya da mekanizması tek bir fotoğrafla anlatılması zor ürünler için çok uygundur.
3D Giriş Sahneleri
Ana sayfanın ilk ekranında fareye ya da kaydırmaya tepki veren bir 3D sahne yer alır. Metin ve butonlar önce yüklenir; marka da akılda kalan bir ilk izlenim bırakır.
Kaydırmaya Bağlı 3D Anlatım
GSAP'nin ScrollTrigger eklentisiyle, ziyaretçi kaydırdıkça kamera bir modelin etrafında hareket eder ve parçaları ya da adımları tek tek gösterir. Lansmanlar ve içi ilgi çekici ürünler için iyi bir yoldur.
3D Marka Öğeleri
Marka kimliği projelerinde logoyu ya da marka simgesini Blender'da 3D modele dönüştürüyoruz. Aynı model hem reklam görsellerinde hem de web sitesinde etkileşimli olarak yer alıyor.
Neden Three.js?
Tarayıcıda Çalışır
Ziyaretçi hiçbir şey kurmaz: sahne, telefon ya da bilgisayardaki modern bir tarayıcıda, doğrudan sayfanın içinde açılır.
Tam Yaratıcı Kontrol
Işık, malzeme, kamera hareketi ve etkileşim bir şablondan seçilmez, markanız için tasarlanır; her sahne anlatması gereken hikâyeye göre kurulur.
Açık ve Denenmiş
Kütüphane 2010'dan bu yana açık olarak geliştiriliyor; ayrıntılı belgeleri ve çok sayıda örneği var. Ücretsizdir ve glTF gibi standart biçimleri okur.
Projenizde Nasıl İlerliyoruz?
İşe, 3D'nin bir fotoğrafın gösteremeyeceği neyi göstereceğini sorarak başlıyoruz. Sahneyi Figma'da planlıyor, modelleri Blender'da hazırlıyor ya da optimize edip glTF olarak dışa aktarıyor, ardından sahneyi ışık, kamera hareketleri ve etkileşimle kodda kuruyoruz.
Yayından önce masaüstü bilgisayarların yanı sıra orta segment telefonlarda da test ediyor, yüklemeyi PageSpeed Insights ile ölçüyoruz. Sahnenin yalnızca ekrana girdiğinde yüklendiğinden, 3D'nin çalışamadığı yerde hareketsiz bir görselin göründüğünden ve “hareketi azalt” tercihinin gözetildiğinden emin oluyoruz.
