Rehber
3D Web Sitesi: Markanızı Üç Boyutta Anlatan Modern Web
KARNER ekibiYayın: Güncelleme:
Özet
3D web sitesi; ürünü veya markayı tarayıcıda gerçek zamanlı, döndürülebilir üç boyutlu sahnelerle sunan sitedir. WebGL ve Three.js ile çalışır, doğru optimize edildiğinde klasik site kadar hızlı açılır. Bu rehberde 3D web sitesinin ne olduğunu, hangi işletmelere değer kattığını, hız ve SEO ile ilişkisini ve üretim sürecinin nasıl işlediğini anlatıyoruz.
3D web sitesi nedir?
- 3D web sitesi
- Ziyaretçinin fareyle veya dokunuşla etkileşime girebildiği, tarayıcıda gerçek zamanlı çizilen üç boyutlu sahneler içeren web sitesidir. Sahne bir video değildir; ekran kartında o an hesaplanır ve ziyaretçinin hareketine anında tepki verir.
Bu deneyimi mümkün kılan teknoloji WebGL — tarayıcının ekran kartını kullanarak grafik çizmesini sağlayan, on yılı aşkın süredir tüm büyük tarayıcılarda bulunan web standardı. Üzerine kurulan Three.js ve React Three Fiber kütüphaneleri, 3D sahneyi modern bir web uygulamasının parçası hâline getirir. Yeni nesil WebGPU standardı da aynı kütüphanelerin altında yerini almaya başladı — bugün kurulan bir 3D site, teknoloji ilerledikçe aynı temelle güncel kalır.
Kritik ayrım şu: 3D web sitesi, sayfaya gömülmüş bir video veya hazır animasyon değildir. Gerçek zamanlı 3D sahne, ziyaretçiye izleyici değil katılımcı rolü verir. Ürünü kendisi döndüren, rengi kendisi değiştiren ziyaretçi, o ürünle fotoğrafa bakan ziyaretçiden daha uzun süre ilgilenir.
Klasik siteden farkı ne?
| Klasik site | 3D web sitesi | |
|---|---|---|
| Ürün sunumu | Sabit fotoğraf galerisi | Döndürülebilir, yakınlaştırılabilir gerçek zamanlı model |
| Ziyaretçi etkileşimi | Kaydır ve tıkla | Sahneyle oynama: döndürme, renk/varyant değiştirme, keşfetme |
| Akılda kalıcılık | Rakip sitelerle benzer deneyim | Sektöründe az rastlanan, hatırlanan deneyim |
| İçerik güncelleme | Fotoğraf çekimini yenilemek gerekir | Aynı model yeni renk/varyantla yeniden kullanılır |
| Yükleme davranışı | Sayfayla birlikte | Sahne yalnızca ekrana geldiğinde yüklenir; ilk açılış etkilenmez |
Fark yalnızca görsel değil, stratejik: 3D sahne, ürünün fotoğrafla anlatılamayan yönlerini satış argümanına çevirir. Bir koltuğun kumaş dokusu, bir yüzüğün işçiliği, bir binanın cephesindeki ışık — bunlar iki boyutta kaybolur, üç boyutta konuşur.
3D web sitesi hangi işletmelere uygun?
Kestirme cevap: ürünü veya mekânı gösterilerek satılan her işletmeye. Somut senaryolar:
Mobilya ve mimarlık
Ürün konfigüratörü: koltuğun kumaşını, masanın ahşabını ziyaretçi kendisi değiştirir; mekân tasarımı üç boyutta gezilir.
Emlak ve inşaat
Proje daha temeli atılmadan üç boyutlu gezilebilir; kat planları etkileşimli maket gibi sunulur.
Mücevher ve aksesuar
360° ürün görüntüleme fotoğrafın gösteremediği işçiliği gösterir; taşın ışıkla oyunu tarayıcıda izlenir.
Teknoloji ve endüstriyel ürün
Parçalarına ayrılan (exploded view) model, ürünün içindeki mühendisliği satış argümanına çevirir.
Marka ve ajans siteleri
Hero bölümündeki özel 3D sahne markanın karakterini ilk saniyede anlatır — bu sitenin açılışındaki robot sahnesi gibi.
Tersine, içeriği ağırlıklı metin olan bir haber sitesi veya randevu odaklı basit bir hizmet sayfası için 3D çoğu zaman gereksiz yüktür. Bu dürüstlük bizim üretim sürecimizin ilk adımıdır: 3D, markaya gerçekten katkı verecekse kurulur — vermeyecekse önermeyiz.
3D bir site hızlı olabilir mi?
Evet — ve bu, işin en çok yanlış bilinen tarafı. Doğru kurulmuş bir 3D site, Google'ın hız eşiklerini klasik siteler gibi geçer. Google, iyi kullanıcı deneyimi için en büyük içeriğin 2,5 saniye içinde görünmesini (LCP) ve etkileşim gecikmesinin 200 milisaniyenin altında kalmasını (INP) ölçüt alır. 3D sahne bu eşikleri şu tekniklerle korur:
- Sahne, sayfayla birlikte değil yalnızca ekrana geldiğinde yüklenir — ilk açılış 3D'den etkilenmez.
- Modeller Draco ile sıkıştırılır, dokular KTX2 formatında küçültülür; dosya boyutu büyük oranda düşer.
- Mobil cihazlara daha düşük çözünürlüklü doku ve daha sade model gönderilir.
- 3D'yi desteklemeyen cihazlarda sahnenin yerini aynı bilgiyi veren bir görsel alır.
- Hareket azaltma tercihi (prefers-reduced-motion) açık olan ziyaretçilere animasyonlar kapatılır.
3D web sitesini nasıl üretiyoruz?
1. Konsept kapısı
Önce şu soruya dürüst cevap verilir: 3D bu markaya gerçekten ne katacak? Katkı netse hangi sahnenin (ürün, mekân, marka karakteri) kurulacağı belirlenir; net değilse klasik ama güçlü bir tasarım öneririz.
2. Model ve sahne üretimi
Model; açık lisanslı kütüphanelerden seçilir, yapay zekâ destekli üretimle oluşturulur veya Blender'da özel modellenir. Ardından web için optimize edilir: poligon sayısı düşürülür, dokular pişirilir, dosya sıkıştırılır.
3. Web entegrasyonu
Sahne, React Three Fiber ile sitenin bir bileşeni olarak entegre edilir: yalnızca göründüğünde yüklenir, mobilde hafif sürümü çalışır, erişilebilirlik etiketleri eklenir.
4. Ölçüm ve teslim
Yayın öncesi sayfa hız testlerinden geçirilir; hedef, 3D'ye rağmen yüksek performans puanıdır. Teslimden sonra da sahne içerik gibi güncellenebilir — yeni renk, yeni varyant, yeni ürün.
Bu sürecin canlı örneği bu sitenin kendisi: açılıştaki robot sahnesi tarayıcınızda gerçek zamanlı çiziliyor, sıkıştırılmış GLB modelle yükleniyor ve sayfanın geri kalanını yavaşlatmıyor.
Maliyet neye göre değişir?
3D web sitesinde maliyeti belirleyen tek bir fiyat listesi değil, üç değişken vardır: sahne sayısı ve karmaşıklığı (tek hero sahnesi mi, ürün konfigüratörü mü), model kaynağı (elinizde hazır CAD/3D dosyası varsa süre kısalır; sıfırdan modelleme gerekiyorsa uzar) ve etkileşim derinliği (izlenen sahne ile renk/varyant değiştirilen konfigüratör aynı iş değildir). Projenizi dinledikten sonra bu üç değişkene göre net kapsam ve teklif çıkarırız.
Sık sorulan sorular
3D web sitesi telefonda çalışır mı?
Çalışır. WebGL, modern mobil tarayıcıların tamamına yakınında desteklenir. İyi kurulmuş bir 3D sitede mobil cihazlara daha küçük model ve doku gönderilir; 3D'yi kaldıramayan eski cihazlarda ise sahnenin yerine aynı bilgiyi veren bir görsel gösterilir. Ziyaretçi hiçbir durumda boş sayfayla karşılaşmaz.
WebGL ve WebGPU nedir?
WebGL, tarayıcının ekran kartını kullanarak üç boyutlu grafik çizmesini sağlayan web standardıdır ve on yılı aşkın süredir tüm büyük tarayıcılarda bulunur. WebGPU, aynı işin daha yüksek performanslı yeni nesli olarak tarayıcılara girmektedir. Three.js gibi kütüphaneler bu katmanların üzerinde çalışır; siteniz teknoloji değişse de aynı kütüphaneyle güncel kalır.
Hazır şablonla 3D site olur mu?
Hazır şablonlardaki 3D öğeler genellikle stok modellerdir; markayla bağı yoktur ve rakip sitelerde de aynıları görülür. Etki bırakan 3D, markanın ürününü veya hikâyesini anlatan özel sahneden gelir. Şablon 3D ile özel 3D arasındaki fark, stok fotoğrafla marka çekimi arasındaki farka benzer.
3D öğelerin SEO'ya etkisi ne?
3D sahnenin kendisi arama motoruna görünmez; sayfanın metni, başlıkları ve yapısal verisi sıralamayı taşır. Doğru kurulumda 3D sahne yalnızca ekrana geldiğinde yüklenir ve sayfanın hız puanını düşürmez. Dolaylı etkisi olumludur: etkileşimli sahne sitede geçirilen süreyi artırır; bu davranış sinyalleri arama motorlarının kaliteli sayfa değerlendirmesine girer.
Var olan siteme 3D eklenebilir mi?
Eklenebilir. 3D sahne, sayfanın bir bölümü olarak mevcut sitenin içine gömülebilir — sitenin tamamını yeniden yapmak gerekmez. Teknik altyapıya göre en temiz yol değişir; modern bir React/Next.js sitesinde bileşen olarak, diğer altyapılarda gömülü modül olarak entegre edilir.
3D modeller hangi formatta hazırlanır?
Web'in standart formatı glTF/GLB'dir — modeli, dokuları ve animasyonu tek dosyada taşır. Yayın öncesi model Draco ile sıkıştırılır, dokular küçültülür; böylece dosya boyutu büyük oranda düşer ve sahne mobil bağlantıda da hızlı yüklenir.
Bu konudaki rehberler
Ana rehberin açtığı soruları tek tek ele alan kısa rehberler.
- Web Sitesi Yaptırmadan Önce Ajansa Sorulacak 12 SoruWeb sitesi yaptırmadan önce sorulacak 12 soru: domain kimde kalır, kaynak kod teslim edilir mi, hız ölçütü ne, KVKK ve bakım nasıl? İyi cevap ölçütleriyle.
- Next.js mi WordPress mi? Kurumsal Site İçin Dürüst KarşılaştırmaKurumsal site için Next.js/Astro mu WordPress mi? Hız, güvenlik, bakım, içerik yönetimi, maliyet yapısı ve SEO açısından dürüst karşılaştırma ve karar tablosu.
- Core Web Vitals Nedir? LCP, INP ve CLS Eşikleri ve Düzeltme YollarıCore Web Vitals nedir? LCP, INP ve CLS tanımları, Google'ın resmi eşikleri, PageSpeed Insights ve Search Console ile ölçüm, en sık nedenler ve düzeltme yolları.
- Web Sitesi Hızı Neden Önemli? Kullanıcı, Sıralama ve Çözüm YollarıWeb sitesi hızı neden önemli? Hızın kullanıcı davranışı ve Google sıralamasıyla ilişkisi, AVIF/WebP, font self-host, lazy loading, CDN, önbellek ve hızlı site kontrol listesi.
Markanız üç boyutta nasıl görünürdü?
Projenizi konuşalım; 3D'nin size gerçekten katkı verip vermeyeceğini de dürüstçe söyleyelim.