Three.js mi Spline mı? 3D Web Sitesi İçin Doğru Teknoloji Nasıl Seçilir (2026)

3D bir site yaptırmaya karar verdiğinizde ilk sorulacak soru “ne kadar tutar” değil, “hangi teknolojiyle” olmalı. Çünkü maliyeti, açılış hızını, güncellenebilirliği ve SEO sonucunu belirleyen şey bu seçim. Aynı görsel etkiyi beş farklı yoldan elde edebilirsiniz ve bu beş yolun bütçesi arasında on kat fark olabilir.

Önce doğru soru: kullanıcı kontrol edecek mi?

Teknoloji seçimini tek bir soru belirler: ziyaretçi sahneyi kontrol edecek mi, yoksa sadece izleyecek mi?

Kullanıcı ürünü döndürecek, rengini değiştirecek, kesitini açacak, ölçü seçecekse gerçek zamanlı 3D motoruna ihtiyacınız var. Kullanıcı yalnızca kaydırırken hoş bir hareket görecekse, gerçek 3D kullanmak parayı yanlış yere harcamaktır. Bu ayrımı baştan yapmayan projeler, gereğinden ağır ve gereğinden pahalı biter.

Seçenek 1 — Three.js (ve React Three Fiber)

WebGL üzerine kurulu, sektörün fiili standardı olan JavaScript kütüphanesi. React tabanlı projelerde React Three Fiber ile kullanılır.

Ne zaman doğru seçim: ürün konfigüratörü, 360 derece ürün gösterimi, makine kesiti, mimari gezinti, malzeme ve renk değiştirme. Kısacası kullanıcının ürünle oynadığı her senaryo.

Güçlü yanları: sınır yok. İstediğiniz her sahneyi kurabilirsiniz, model formatlarının hepsini destekler, topluluk ve dokümantasyon devasa. Uzun ömürlü ve taşınabilir; beş yıl sonra da bakımı yapılabilir.

Zayıf yanları: gerçek yazılım geliştirme işi. Sahne kurulumu, ışıklandırma, kamera, performans bütçesi ve mobil düşürme senaryolarının hepsi elle yazılır. Ucuz değildir ve tecrübesiz elde performans felaketine döner.

Seçenek 2 — Spline ve hazır 3D sahne araçları

Tarayıcı üzerinden görsel arayüzle 3D sahne kurup siteye gömmenizi sağlayan araçlar.

Ne zaman doğru seçim: bütçe sınırlı, sahne basit, etkileşim yüzeysel ve projenin hızlı ayağa kalkması gerekiyorsa. Bir kahraman görsel alanında dönen soyut bir obje için fazlasıyla yeterlidir.

Güçlü yanları: hız. Günler yerine saatler. Tasarımcı, geliştiriciye ihtiyaç duymadan sahneyi güncelleyebilir.

Zayıf yanları: dosya boyutları beklediğinizden büyük çıkar, sahne üçüncü parti bir servise bağımlı hale gelir ve o servis fiyat değiştirdiğinde ya da kapandığında siteniz etkilenir. Karmaşık etkileşimde duvara çarpar. Kurumsal bir marka için altyapıyı dışarıya emanet etmek stratejik bir risktir.

Seçenek 3 — CSS 3D dönüşümleri

Hiçbir kütüphane olmadan, saf CSS ile perspektif ve derinlik. GPU hızlandırmalı, kilobayt bile tutmaz.

Ne zaman doğru seçim: kart çevirme, katmanlı paralaks, hafif derinlik, menü ve geçiş animasyonları. Kurumsal sitelerin büyük çoğunluğunun ihtiyacı aslında budur.

Dürüst tavsiyemiz: “3D site istiyorum” diyen markaların yaklaşık yarısının aradığı şey, teknik olarak WebGL değil iyi kurgulanmış CSS derinliği ve hareket tasarımıdır. Aradaki bütçe farkını ürün fotoğrafına ya da reklama koymak daha çok kazandırır.

Seçenek 4 — Lottie ve SVG animasyon

Vektör tabanlı animasyon. Tasarım aracından çıkar, tarayıcıda oynar, dosya boyutu kilobaytlarla ölçülür.

Ne zaman doğru seçim: süreç anlatımı, adım adım şema, ikon animasyonu, veri görselleştirme. Metin DOM içinde kaldığı için arama motoru okur; SEO açısından en güvenli animasyon biçimidir.

Seçenek 5 — Kaydırmaya bağlı video kareleri

Ürünün 360 derece çekimi kare kare alınır, kaydırma ile oynatılır. 3D modelleme maliyeti olmadan benzer etkiyi verir.

Ne zaman doğru seçim: fiziksel ürünü olan ama CAD veya 3D modeli olmayan markalar. Mobilya, tekstil, gıda ambalajı, otomotiv aksesuar gibi alanlarda çok işe yarar.

Dikkat: kare sayısı ve çözünürlük bütçelenmezse toplam indirme boyutu gerçek 3D’den ağır olabilir. Kare dizisi mutlaka sıkıştırılmalı ve mobilde düşük çözünürlüklü sürüm servis edilmelidir.

Karşılaştırma özeti

• Gerçek etkileşim gerekiyor mu? Evetse Three.js veya React Three Fiber. Hayırsa aşağı inin.
• Bütçe dar, sahne basit mi? Spline tipi araçlar, ama bağımlılık riskini bilerek.
• Sadece derinlik ve hareket mi isteniyor? CSS 3D. En hızlı, en ucuz, en dayanıklı.
• Bir süreç mi anlatılacak? Lottie veya SVG.
• Fiziksel ürün var, 3D model yok mu? Kaydırmalı kare dizisi.

Seçim ne olursa olsun değişmeyen kurallar

Hangi teknolojiyi seçerseniz seçin, aşağıdakiler pazarlık konusu değildir. Bunları uygulamayan bir 3D site, güzel görünse bile ticari olarak zarar yazar:

• İlk ekran 3D’yi beklemez. Metin ve düzen önce gelir, sahne sonradan devreye girer.
• Görüş alanına girmeden çizim yapılmaz. Sayfanın altındaki sahne, kullanıcı oraya gelene kadar GPU harcamaz.
• Poster kare zorunludur. Sahne yüklenene kadar yerinde statik görsel durur; düzen kaymaz, LCP metriği korunur.
• Zayıf cihazda kapanır. Kötü çalışan 3D, hiç olmayan 3D’den kötüdür.
• Anlam taşıyan hiçbir metin canvas içinde kalmaz. Google canvas içini okumaz.
• Hareketi azalt tercihine saygı gösterilir. Erişilebilirlik açısından gereklidir.

Bu kuralların neden bu kadar kritik olduğunu ve her birinin nasıl uygulandığını 3D animasyonlu kurumsal web sitesi rehberimizde ayrıntılı anlattık. Hız tarafını ayrıca 3D sitelerde Core Web Vitals yazımızda ele aldık.

Maliyeti ne belirler?

Net konuşalım. Maliyeti belirleyen kalemler şunlar:

• CSS 3D ve hareket tasarımı: kurumsal site projesinin içinde, ayrı kalem olmadan çözülür.
• Lottie animasyon seti: sahne başına düşük maliyet; belirleyici olan tasarım süresidir.
• Kaydırmalı kare dizisi: çekim ve stüdyo maliyeti artı entegrasyon. Ürün başına hesaplanır.
• Three.js ürün konfigüratörü: en yüksek kalem. Model hazırlığı, malzeme kurulumu, etkileşim mantığı ve performans optimizasyonu ayrı ayrı iştir.

Güncel paket içerikleri için paketler sayfamıza bakabilir, projenizi iletişim sayfasından bize anlatabilirsiniz. Kurumsal site tarafında nelere dikkat ettiğimizi web tasarım hizmet sayfamızda bulabilirsiniz.

Sık sorulan sorular

3D site Google’da geriye düşürür mü?

Yanlış kurulursa evet. Sahne ilk yükte başlatılıyor, poster kare yoksa ve metin canvas içindeyse hem hız metrikleri hem de taranabilirlik bozulur. Doğru kurulduğunda, yani sahne geciktirilmiş, metin DOM içinde ve poster kare yerindeyse, 3D bir sitenin sıralaması statik bir siteden farksızdır.

Three.js yerine hazır araç kullanmak sorun olur mu?

Küçük ve basit sahnelerde olmaz. Ancak sahne büyüdükçe dosya boyutu ve üçüncü parti bağımlılığı ciddi sorun haline gelir. Kurumsal bir markanın ana sayfası başka bir şirketin servisine bağımlı olmamalıdır.

Mevcut siteme 3D eklenebilir mi?

Çoğu durumda evet. Sitenin mevcut altyapısı, tema yapısı ve performans durumu incelenir; 3D katman ayrı bir modül olarak eklenir. Ancak sitenin temel hızı zaten kötüyse önce o düzeltilmelidir.

3D sahne mobilde de çalışır mı?

Doğru kurulursa çalışır. Bizim standardımız: mobilde poligon sayısı ve doku çözünürlüğü düşürülür, kare hızı sınırlanır, çok zayıf cihazlarda sahne hiç başlatılmaz ve statik görsel kalır.

Ne kadar sürede teslim edilir?

CSS ve Lottie tabanlı çözümler kurumsal site takvimini uzatmaz. Three.js tabanlı bir konfigüratör, model hazırlığı dahil ayrı bir proje takvimi ister ve ürün karmaşıklığına göre değişir.