Three.js Nedir?
Three.js, web tarayıcılarında 3D grafikler oluşturmak için kullanılan güçlü bir JavaScript kütüphanesidir. WebGL API'sinin karmaşıklığını soyutlayarak geliştiricilerin kolayca 3D sahneler, animasyonlar ve etkileşimli deneyimler oluşturmasını sağlar. Ürün görselleştirmeden oyunlara, veri görselleştirmeden sanatsal projelere kadar geniş bir kullanım alanına sahiptir.
Three.js Temel Kavramları
Sahne (Scene)
Sahne, tüm 3D nesnelerin yerleştirildiği üç boyutlu uzaydır. Işıklar, kameralar, geometriler ve materyaller sahne içinde tanımlanır. Her Three.js uygulaması en az bir sahne içerir.
Kamera (Camera)
Kamera, sahneyi hangi açıdan ve perspektiften görüntüleyeceğimizi belirler. İki temel kamera türü vardır:
- PerspectiveCamera: Gerçekçi perspektif görünümü sağlar, uzaktaki nesneler küçük görünür
- OrthographicCamera: Perspektif olmadan, teknik çizim benzeri görünüm sunar
Renderer
Renderer, sahneyi ve kamerayı kullanarak 2D görüntü oluşturur. WebGLRenderer en yaygın kullanılan renderer'dır ve GPU hızlandırmalı render sağlar.
İlk Three.js Sahnesini Oluşturma
Bir Three.js projesi oluşturmak için şu adımlar izlenir:
- Three.js kütüphanesini projeye dahil edin (npm veya CDN)
- Sahne, kamera ve renderer oluşturun
- Geometri ve materyal tanımlayarak 3D nesne (mesh) oluşturun
- Nesneyi sahneye ekleyin
- Animasyon döngüsü başlatarak sahneyi render edin
Geometriler ve Materyaller
Temel Geometriler
| Geometri | Açıklama | Kullanım |
|---|---|---|
| BoxGeometry | Küp ve dikdörtgen prizma | Binalar, kutular |
| SphereGeometry | Küre | Gezegenler, toplar |
| CylinderGeometry | Silindir | Sütunlar, borular |
| PlaneGeometry | Düzlem | Zemin, duvarlar |
| TorusGeometry | Halka | Yüzükler, dekoratif objeler |
Materyaller
Materyaller, 3D nesnelerin yüzey görünümünü belirler:
- MeshBasicMaterial: Işıktan etkilenmeyen basit materyal
- MeshStandardMaterial: Fiziksel tabanlı render için standart materyal
- MeshPhongMaterial: Parlak yüzeyler için Phong aydınlatma modeli
- MeshLambertMaterial: Mat yüzeyler için Lambert aydınlatma
Aydınlatma
Gerçekçi 3D sahneler için doğru aydınlatma kritik öneme sahiptir:
- AmbientLight: Sahnedeki tüm nesneleri eşit şekilde aydınlatır
- DirectionalLight: Güneş ışığı gibi paralel ışınlar gönderir
- PointLight: Ampul gibi tüm yönlere ışık yayar
- SpotLight: Spot ışığı gibi belirli bir alana odaklanır
Animasyon ve Etkileşim
Three.js'te animasyonlar requestAnimationFrame döngüsü ile oluşturulur. Her karede nesnelerin pozisyonu, rotasyonu veya ölçeği güncellenerek hareket efekti sağlanır. GSAP gibi animasyon kütüphaneleri ile daha karmaşık animasyonlar oluşturulabilir.
Kullanıcı Etkileşimi
OrbitControls ile kamera kontrolü, Raycaster ile nesne seçimi ve fare/dokunma olayları ile etkileşimli 3D deneyimler oluşturulur. Ekolsoft, müşterilerine etkileyici 3D web deneyimleri sunmak için Three.js'in güçlü etkileşim özelliklerinden yararlanmaktadır.
3D Model Yükleme
Three.js, harici 3D modelleri yüklemek için çeşitli yükleyiciler sunar:
- GLTFLoader: glTF formatı, web için optimize edilmiş standart 3D format
- OBJLoader: Wavefront OBJ formatı desteği
- FBXLoader: Autodesk FBX formatı desteği
- DRACOLoader: Sıkıştırılmış 3D modeller için Draco desteği
Performans Optimizasyonu
3D web uygulamalarında performans hayati önem taşır:
- Düşük poligon sayılı modeller kullanın
- Texture boyutlarını optimize edin ve sıkıştırın
- Level of Detail (LOD) sistemi uygulayın
- Frustum culling ile görünmeyen nesneleri render etmeyin
- InstancedMesh ile tekrarlayan nesneleri verimli render edin
React Three Fiber
React Three Fiber, Three.js'i React ekosistemi ile birleştiren popüler bir kütüphanedir. JSX sözdizimi ile 3D sahneler oluşturmayı mümkün kılar ve React'in bileşen tabanlı mimarisinden yararlanır.
Three.js, web tarayıcılarında etkileyici 3D deneyimler oluşturmak için en güçlü araçtır. WebGL'in karmaşıklığını ortadan kaldırarak her seviyeden geliştiricinin 3D dünyasına adım atmasını sağlar.
Sonuç
Three.js ile web tarayıcısında sınırsız 3D deneyimler oluşturmak mümkündür. Ürün görselleştirme, mimari tasarım, oyun geliştirme ve sanatsal projeler için güçlü bir araç olan Three.js, modern web geliştirmenin en heyecan verici alanlarından birini temsil eder. Ekolsoft ekibi olarak, 3D web teknolojilerini projelerimize entegre ederek müşterilerimize benzersiz dijital deneyimler sunuyoruz.
