KARNERKARNER

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 site3D web sitesi
Ürün sunumuSabit fotoğraf galerisiDöndürülebilir, yakınlaştırılabilir gerçek zamanlı model
Ziyaretçi etkileşimiKaydır ve tıklaSahneyle oynama: döndürme, renk/varyant değiştirme, keşfetme
Akılda kalıcılıkRakip sitelerle benzer deneyimSektöründe az rastlanan, hatırlanan deneyim
İçerik güncellemeFotoğraf çekimini yenilemek gerekirAynı model yeni renk/varyantla yeniden kullanılır
Yükleme davranışıSayfayla birlikteSahne 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. 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. 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. 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. 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.

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.