Mobilya, yüksek fiyatlı ve fiziksel olarak görülmek istenen bir ürün grubu. Müşteri koltuğun arkasının nasıl durduğunu, kumaşın gerçekte nasıl göründüğünü ve modülün salonuna sığıp sığmadığını bilmeden karar vermek istemiyor. Düz ürün fotoğrafı bu üç soruyu da tam olarak yanıtlamıyor. Bu yazıda, bir mobilya koleksiyonu için kurduğumuz 3D görselleştirme altyapısının yapısını — neyin çalıştığı ve neyin henüz bağlanmadığı dahil — olduğu gibi anlatıyoruz.
Sistem Neyi Çözmek İçin Kuruldu?
Hedef basitti: ziyaretçi koleksiyondaki bir ürüne girdiğinde, o ürünü mağazaya gitmeden önce mümkün olduğunca eksiksiz inceleyebilsin. Bu üç şey demek — ürünü farklı açılardan görmek, modül ölçülerini net okumak ve kumaş/renk alternatiflerini karşılaştırmak. Üçü de satın alma öncesi en sık sorulan sorular; dolayısıyla üçü de satış ekibinin her gün tekrar tekrar yanıtladığı sorular.
Katalog Yapısı: İki Sayfa, Tek Veri Kaynağı
Sistem yalnızca iki sayfadan oluşuyor: koleksiyonun listelendiği ana sayfa ve tüm ürünlerin ortak kullandığı bir ürün detay sayfası. Her ürün için ayrı bir HTML dosyası yok; detay sayfası, adres satırındaki ürün anahtarına göre içeriğini kendisi kuruyor.
Bunu mümkün kılan şey, ürün verisinin arayüzden tamamen ayrılmış olması. Tüm ürünler tek bir veri dosyasında, her biri aynı alanlara sahip birer kayıt olarak duruyor:
| Alan | İşlevi |
|---|---|
title | Ürün adı — başlıkta ve katalog kartında görünür |
cat | Kategori — filtreleme ve kart etiketi için |
key | Görsel klasörünün adı — galeri yolları bundan üretilir |
files | Ürün görsellerinin listesi — galeri ve küçük görseller |
rows | Ölçü tablosu satırları — modül, genişlik, derinlik, yükseklik |
Buradaki kritik nokta rows alanı. Mobilyada ölçü, süs bilgisi değil; satın alma kararının doğrudan parçası. Bir köşe takımının sağ kollu modülü, ara modülü ve relax modülü ayrı ayrı ölçülere sahipse, bunları serbest metin olarak yazmak yerine yapılandırılmış satırlar hâlinde tutmak gerekiyor. Böylece aynı veri hem sayfada tablo olarak gösterilebiliyor, hem de ileride bir teklif formuna veya ürün otomasyonuna aynı biçimde aktarılabiliyor.
Galeri: Büyük Görsel ve Küçük Görsel Ayrımı
Her ürün klasöründe görsellerin iki sürümü tutuluyor: tam boyutlu sürüm ve thumb alt klasöründeki küçük sürüm. Katalog sayfası ve galeri şeridi yalnızca küçük sürümleri yüklüyor; tam boyutlu görsel ancak ziyaretçi o kareye geçtiğinde devreye giriyor.
On iki görselli bir ürün sayfasında bu ayrım olmadığında, ziyaretçi hiç bakmadığı on bir görseli de indirmiş oluyor. Mobil bağlantıda bu, sayfanın açılmasını doğrudan yavaşlatan bir maliyet. Görsel ağırlıklı bir katalogda performansın büyük kısmı, karmaşık optimizasyonlardan değil, bu tür basit ayrımlardan geliyor.
3D Görüntüleyici Sayfaya Nereden Bağlanıyor?
Burada dürüst olmak gerekiyor: bu sistemde 3D görüntüleme, sayfanın içine doğrudan gömülmüş bir motor değil. Ürün sayfasında bir "3D Görüntüle" butonu var; bu buton bir modal açıyor ve modalın içinde, görüntüleyicinin yerleşeceği boş bir kapsayıcı bulunuyor. Motorun bağlanacağı nokta ve açılış anında çağrılacak fonksiyon önceden tanımlı; 3D motorunun kendisi ise bu aşamada henüz bağlı değil.
Ürün sayfası
↓
[3D Görüntüle] butonu
↓
Modal açılır (ürün adı + kapatma)
↓
Boş mount kapsayıcısı → motor buraya yerleşir
↓
Açılış hook'u çağrılır (ürün nesnesi + kapsayıcı)Bu neden böyle kuruldu? Çünkü katalogun kendisi ile görüntüleme motoru birbirinden bağımsız iki karar. Motor tercihi zamanla değişebilir — WebGL tabanlı bir model görüntüleyiciden fotoğraf dizisi temelli bir 360° çözümüne geçilebilir ya da tersi. Bağlantı noktası sabit tutulduğunda bu geçiş yalnızca tek bir yeri etkiliyor; katalog, galeri ve ölçü tablosu kodu olduğu gibi kalıyor.
İkinci fayda performans tarafında: görüntüleyici sayfa açılışında değil, ziyaretçi butona bastığında yükleniyor. Yani 3D özelliği, o özelliği hiç kullanmayan ziyaretçinin sayfa hızına maliyet bindirmiyor.
Gerçek 3D Model mi, 360° Fotoğraf Dizisi mi?
Pratikte iki yol var ve ikisi de "3D görüntüleme" olarak pazarlanıyor — ama teknik olarak farklı şeyler:
- Gerçek 3D model (GLB/GLTF) — Ürünün geometrisi tarayıcıda gerçek zamanlı işlenir. Serbest açı, yakınlaştırma ve malzeme değiştirme mümkündür. Karşılığında her ürün için modelleme maliyeti ve daha ağır dosyalar gelir.
- 360° fotoğraf dizisi — Ürünün sabit açı aralıklarıyla çekilmiş fotoğrafları sırayla gösterilir. Kullanıcı sürükledikçe kare değişir, döndürme hissi oluşur. Modelleme gerektirmez ve gerçek ürün fotoğrafı olduğu için doku birebir doğrudur; ancak serbest açı ve yakınlaştırma sınırlıdır.
Mobilyada ilginç olan şu: kumaşın gerçekçiliği çoğu zaman serbest açıdan daha önemli. İyi çekilmiş bir fotoğraf dizisi, orta kalitede bir 3D modelden daha ikna edici olabiliyor. Karar, ürün sayısı ve bütçeyle birlikte verilmesi gereken bir tercih — otomatik olarak "3D model daha iyidir" denemez.
Ürün Sayısı Arttığında Ne Değişir?
Beş ürünlük bir koleksiyonda ürün verisini tek bir dosyada tutmak tamamen makul. Elli üründe ve düzenli fiyat/stok değişiminde ise aynı yapı elle bakım gerektiren bir yüke dönüşür. Bu noktada veri kaynağı bir tabloya ya da veritabanına taşınır ve güncelleme otomasyona bağlanır — n8n ile ürün ve stok yönetimi otomasyonu yazısında anlattığımız yapı tam olarak bu işi yapıyor.
Önemli olan, bu geçişin arayüzü etkilememesi. Ürün verisi baştan arayüzden ayrı tutulduğu için, kaynağın değişmesi katalog kodunu yeniden yazmayı gerektirmiyor. Küçük başlayıp büyütülebilir bir yapı kurmanın pratik karşılığı bu.
Kurarken Dikkat Edilecek Beş Nokta
- Veriyi arayüzden ayırın. Ürün adı, ölçü ve görsel listesi tek bir kaynakta dursun; sayfa bu kaynaktan üretilsin.
- Ölçüyü yapılandırılmış tutun. Serbest metin yerine satır/sütun yapısı, ileride teklif ve otomasyona aktarım için gereklidir.
- Görselleri iki boyutta hazırlayın. Küçük görsel listeleme için, tam boyut yalnızca görüntülenen kare için.
- Motoru sonradan bağlanabilir bırakın. Sabit bir mount noktası, motor değişikliğini tek dosyalık bir işe indirger.
- Talep yolunu açık bırakın. Ürünü inceleyen ziyaretçi aynı ekrandan teklif isteyebilmeli; görüntüleyici çıkmaz sokak olmamalı.
Ürün gamınızda 3D görselleştirmenin gerçekten işe yarayacağı kalemler varsa, hangi ürünle başlanacağını ve nasıl kurulacağını birlikte çıkarabiliriz — bkz. 3D ürün görselleştirme sayfamız. Diğer çalışmalarımız için AI otomasyon hizmetlerimize göz atabilirsiniz.