Döndürülebilir 3D Ürün Modelini Web Sitesine Nasıl Hazırlarım?

Neden döndürülebilir model?

Bir ürünün web sitesinde fareyle veya parmakla döndürülebilmesi, klasik ürün görsellerine göre bence çok daha güçlü bir sunum şekli.

Özellikle mobilya, reformer, elektronik ürün veya detayları önemli olan ürünlerde kullanıcı ürünü farklı açılardan inceleyebiliyor.

Ama burada önemli bir problem var. Blender'da çalışan ağır bir sahneyi olduğu gibi tarayıcıya göndermek iyi bir fikir değil.

Sorunu somutlaştırmak için bir fark düşünün: Blender'da bir kare render edilirken bilgisayar o kareyi saniyeler, hatta dakikalar süren hesaplarla üretebilir. Tarayıcıda ise aynı görüntünün saniyede onlarca kez, ziyaretçinin kendi cihazında çizilmesi gerekir. Bu, iki ayrı çalışma mantığı demek: biri "kaliteyi hesapla", diğeri "akıcılığı koru". Döndürülebilir model, ikinci mantıkta yaşar ve bu yüzden hazırlığı da farklı olmalıdır.

Web için baştan farklı davranmak

Ben web için düşündüğüm modellerde en baştan farklı davranıyorum. Gereksiz polygonları temizliyorum, texture boyutlarını kontrol ediyorum ve mümkün olduğunca sade bir materyal yapısı kuruyorum. Sonra modeli GLB formatına hazırlıyorum.

Asıl amaç şu: Kullanıcı sayfayı açacak, model hızlı şekilde görünecek ve kullanıcı hiçbir şey düşünmeden ürünü döndürmeye başlayacak.

"Hiçbir şey düşünmeden" ifadesi önemli. İyi bir etkileşimli modelde kullanıcıya bir kılavuz gerekmez: parmağını ya da fareyi hareket ettirdiğinde ürün beklediği gibi tepki verir. Bu doğallığı sağlayan şey, arkada yapılan birçok görünmez hazırlıktır: hafif bir dosya, akıcı bir çizim, mantıklı kamera sınırları ve dokunmatik ekran davranışı.

Blender sahnesinden tarayıcıya: adım adım

Ağır bir sahneden hafif bir web modeline giden yol, şu adımlarda özetlenebilir:

• Sahneyi sadeleştirin: ışıklar, zemin, kamera ve render için eklenmiş yardımcı nesneler web modeline taşınmaz. Yalnızca ürünün kendisi (ve gerekirse küçük bir zemin gölgesi dokusu) kalır.
• Ürünü tek bir hiyerarşide toplayın: parçalar mantıklı adlarla, düzenli bir yapıda duruyorsa hem kodla erişmek hem de sorun gidermek kolaylaşır.
• Geometriyi sadeleştirin: görünmeyen yüzeyleri ve aşırı ayrıntıyı temizleyin; kıvrımlı yüzeylerde gerekli noktaları koruyun.
• Modifier'ları ve ölçeği netleştirin: dışa aktarmadan önce nesnelerin ölçeği tutarlı olmalı, gerekli modifier'lar uygulanmış olmalıdır.
• Materyalleri birleştirin ve sadeleştirin: aynı karakterdeki yüzeyler aynı materyali paylaşsın; sadece seçilebilir renk gibi işlevsel ayrımlar ayrı kalsın.
• Dokuları küçültün: ürünün ekranda göreceği boyuta uygun çözünürlük seçin.
• GLB olarak dışa aktarın ve test edin.

Bu adımların her biri ayrı bir konu başlığı. Polygon konusunu web'de 3D model için kaç polygon kullanılmalı yazısında, dışa aktarım ayarlarını Blender'dan GLB export yazısında, tüm süreci ise 3D modeli web için optimize etme yazısında ayrıntılı ele aldım.

Render için model ile web için model

Bu nedenle web için 3D modelleme ile render için 3D modelleme arasında ciddi bir fark var.

Render alırken milyonlarca polygon kullanmak bazı durumlarda problem olmayabilir. Ama web'de aynı yaklaşım performansı doğrudan etkileyebilir. Bu fark, modelleme ile görselleştirme arasındaki fark konusuna da bağlanıyor.

Pratik sonuç şu: aynı ürün için iki sürüm tutmak sağlıklı bir yaklaşımdır. Yüksek ayrıntılı sürüm, görseller ve videolar için; hafifletilmiş sürüm ise web etkileşimi için. İkisini tek bir kaynaktan türetmek, tutarlılığı korur: ürünün şekli, renkleri ve malzemeleri iki çıktıda da aynı olur. Hangi çıktı için ne kadar ayrıntı gerektiği, işin kapsamını ve maliyetini de etkiler; bu yüzden hizmet tarafında bunları ayrı kalemler olarak ele alıyorum. İlgili sayfa: web için 3D ürün modeli.

Etkileşimli modelde dikkat ettiğim detaylar

• Model sayfa açılır açılmaz değil, kullanıcı ihtiyaç duyduğunda ya da sayfa hazır olduğunda yüklenmeli.
• Kamera sınırları ürünü kaybetmeyi engellemeli; kullanıcı yanlışlıkla modelin içine girmemeli.
• Dokunmatik ekranda sayfa kaydırma ile modeli döndürme birbirine karışmamalı.
• Yükleme sırasında boş bir alan yerine ürünün poster görseli görünmeli.

Ben bu yüzden web üzerindeki 3D'yi bir “görüntü” olarak değil, bir “deneyim” olarak düşünüyorum.

Model sadece gösterilmiyor. Kullanıcı modelle etkileşime giriyor.

Bu dört maddeyi tek tek açalım.

Yükleme zamanı. Model ağır bir dosya olduğu için ana içerikle yarışmamalı. Sayfanın ilk açılışında ürün adı, fiyat, açıklama ve sepete ekleme gibi öncelikli içerik hemen görünmeli; 3D model ise ya ekrana yaklaştığında ya da kullanıcı "3D gör" gibi bir düğmeye bastığında yüklenmelidir. Bu yaklaşım, ilk yükleme hızını korur ve veri kullanımını sınırlandırır.

Kamera sınırları. Serbest bir kamera, kullanıcıyı kolayca kaybolmuş hissettirir. Yakınlaştırma için hem alt hem üst sınır belirlenmeli: çok uzaklaşınca ürün nokta kadar kalmamalı, çok yaklaşınca da modelin içine girilmemeli. Dikey dönüş açısı da sınırlanabilir; örneğin zeminin altına bakmak çoğu üründe anlamsızdır. `model-viewer` bileşeninde bunun için `min-camera-orbit` ve `max-camera-orbit` öznitelikleri, yakınlaştırma sınırı için ise `min-field-of-view` ve `max-field-of-view` gibi ayarlar bulunur. Kontrollerin tasarımı web'deki 3D ürün görüntüleyicisinde kontroller nasıl tasarlanır yazısında daha geniş ele alınıyor.

Dokunmatik ekran davranışı. Mobilde sayfayı kaydırmaya çalışan parmak, model alanına denk gelirse kaydırma engellenebilir. Bu, modeli tam sayfa genişliğinde kullanan sitelerde ziyaretçinin sayfada "takılması" demektir. Çözümlerden biri, modelin yalnızca yatay hareketi yakalayıp dikey kaydırmayı sayfaya bırakmasıdır; `model-viewer` içinde `touch-action="pan-y"` bu işe yarar. Bir diğer çözüm, 3D alanı sayfa akışında belirgin bir kutu olarak sınırlamak ve altında/üstünde kaydırılabilir boşluk bırakmaktır.

Poster görseli. Model yüklenirken boş bir alan görmek, ziyaretçinin "çalışmıyor" diye düşünmesine yol açar. Ürünün hazır bir görselini poster olarak göstermek, hem bu belirsizliği ortadan kaldırır hem de sayfanın düzeninin kaymasını engeller. Poster, modelin yüklenmiş hali ile aynı kadrajda ve benzer ışıkta olursa, geçiş neredeyse fark edilmez. Bu görseller de aynı 3D modelden render edilebilir.

Kodla ilgili kısa bir iskelet

Aşağıdaki örnek, bu ilkelerin bir arada nasıl göründüğünü gösteren basit bir `model-viewer` kullanımıdır:

<model-viewer
  src="urun.glb"
  poster="urun-poster.webp"
  alt="Ürünün üç boyutlu modeli"
  camera-controls
  touch-action="pan-y"
  min-camera-orbit="auto 30deg auto"
  max-camera-orbit="auto 100deg auto"
  loading="lazy"
  reveal="interaction">
</model-viewer>

Açıları (30deg, 100deg gibi) ürününüze göre değiştirmeniz gerekir; ürünün tabanı görünmesin istiyorsanız alt sınırı buna göre ayarlarsınız. Adım adım kurulum ve ek ayarlar için model-viewer ile web sitesine 3D model ekleme yazısına bakabilirsiniz.

Döndürme hissini ayarlamak

Modelin hızlı açılması tek başına yetmez; döndürme hissi de ürünün kalitesini etkiler. Çok hassas bir kontrol, parmağın küçük bir hareketinde ürünü fırıldak gibi çevirir; çok ağır bir kontrol ise modeli yapışkan gösterir. Ayar, ürünün boyutuna ve ekranda kapladığı alana göre yapılmalı ve gerçek bir cihazda denenmelidir.

Kullanıcıya modelin döndürülebilir olduğunu söylemek için üç yaygın yol vardır. Birincisi, sayfa açıldığında kısa süren hafif bir otomatik dönüş (`auto-rotate`): hareket, dikkat çeker ve "bu bir fotoğraf değil" mesajını verir. Etkileşim başlayınca durması beklenir. İkincisi, modelin üzerinde küçük bir yönerge ya da simge göstermek (`model-viewer` bunun için `interaction-prompt` özelliğini sunar). Üçüncüsü ise yazılı bir ipucudur: "Sürükleyerek döndürün" gibi kısa bir metin, özellikle ilk kez 3D ile karşılaşan kullanıcılar için yararlıdır. Metni ekrandan fazla yer kaplamayacak şekilde, yüklenmeyi bekleyen kullanıcıya zarar vermeyecek biçimde tutmak gerekir.

Başlangıç kamerası da önemlidir. Ürünün en çekici ve en tanınır açısıyla açılması, ilk izlenimi belirler. Genellikle hafif yukarıdan, ürünün ön yüzünü ve bir yan yüzünü gösteren üç çeyrek açı iyi çalışır; çünkü hem formu hem de boyutları aynı anda gösterir. Bu açı, poster görseliyle de uyumlu seçilmelidir.

Son olarak, ölçeklendirme kararı var: kullanıcı yakınlaştırdığında modelin ne kadar ayrıntı barındırdığı görünür hale gelir. Eğer yakın plan dokuları net değilse, yakınlaştırma üst sınırını düşürmek bir çözümdür. Aksi halde "yaklaştıkça bozulan" bir model, ürünün kalitesi hakkında yanlış izlenim bırakır. Yakınlaştırma sınırı, doku çözünürlüğüyle birlikte planlanmalıdır.

Erişilebilirlik ve yedek içerik

Etkileşimli 3D, tüm ziyaretçiler için aynı şekilde çalışmaz. Bazı kullanıcılar hareket azaltma tercihi kullanır, bazıları fare yerine klavye ya da ekran okuyucu ile gezinir, bazılarının cihazı 3D'yi hiç çizemeyebilir. Bu yüzden sayfanın temel bilgisi model olmadan da eksiksiz olmalıdır: ürünün adı, açıklaması, ölçüleri ve birkaç statik görseli sayfada bulunmalıdır. Modele bir `alt` metni vermek ve otomatik dönüşü hareket azaltma tercihini dikkate alarak kapatmak, küçük ama değerli adımlardır.

Yedek içerik kavramı performans açısından da işe yarar. Model yüklenemezse, bağlantı yavaşsa ya da cihaz yetersizse, poster görseli devreye girer ve sayfa kırık görünmez. Böylece 3D bir tamamlayıcı katman olarak kalır, sayfanın tek taşıyıcısı olmaz.

Renk seçenekli ürünlerde ek hazırlık

Ürününüzde renk ya da kaplama seçeneği varsa, değişecek parçaların baştan ayrı materyal olarak tanımlanması gerekir. Böylece sitedeki bir renk seçici bu materyalin rengini anlık değiştirebilir ve her renk için ayrı bir model ya da dosya gerekmez. Bunun detayları ve ticari avantajı için renk seçenekli ürünler için 3D render avantajı yazısına, gerçek bir örnek için Aura Reformer çalışmasına bakabilirsiniz. Orada altı pilates ekipmanı döndürülüp yakınlaştırılabiliyor ve döşeme renkleri sitede seçilebiliyor; arkasındaki yaklaşımı renk seçici nasıl çalışır yazısında anlattım.

Sık yapılan hatalar

• Modeli sayfa yüklenirken hemen yüklemek. Ana içerik yavaşlar, ziyaretçi sabırsızlanır.
• Kamera sınırı koymamak. Kullanıcı modelin içinde kaybolur ya da ürünü bir noktaya kadar küçültür.
• Mobilde kaydırma çakışmasını test etmemek. Masaüstünde sorunsuz görünen bir sayfa telefonda kilitlenmiş hissettirebilir.
• Poster görseli koymamak. Boş alan, güven kaybettirir.
• Ürün dışındaki nesneleri de dışa aktarmak. Işıklar, kameralar ve yardımcı nesneler gereksiz yük ve karışıklık getirir.

Daha geniş bir hata listesi için 3D ürünü web'e taşırken en çok yapılan hatalar yazısına bakabilirsiniz. Ayrıca 3D'nin her sayfada anlamlı olmadığını unutmamak gerekir; bunu web sitesinde 3D ne zaman gereksiz yazısında tartıştım.

Yayından önce kontrol listesi

• Model, telefonda ve masaüstünde akıcı dönüyor mu?
• Sayfayı kaydırırken model alanına denk gelince sayfa kilitleniyor mu?
• Kameranın alt/üst yakınlık sınırları ürüne uygun mu?
• Poster görseli ile yüklü model aynı kadrajda mı?
• Model olmadığında (ya da yüklenemediğinde) sayfa hâlâ ürünü anlatıyor mu?
• Renk seçici her seçenekte doğru malzemeyi güncelliyor mu?

Son maddedeki "model yüklenemediğinde" durumu özellikle önemli. Yavaş ya da kesintili bir bağlantıda model gelmeyebilir; poster görseli ve metin bilgisi bu durumda sayfanın ana yükünü taşımaya devam etmelidir. 3D bir katmandır, sayfanın tek taşıyıcısı olmamalıdır.

Kendi ürününüzün web için nasıl hazırlanabileceğini konuşmak isterseniz teklif sayfasından brief'inizi iletebilirsiniz.

Sık sorulan sorular

Sonuç

Döndürülebilir bir ürün modelinin başarısı, modelin ne kadar ayrıntılı olduğundan çok, ziyaretçinin hiçbir şey düşünmeden kullanabilmesinde yatıyor. Hafif bir dosya, mantıklı kamera sınırları, doğru dokunmatik davranış ve bir poster görseli bu deneyimin görünmeyen temelini oluşturuyor.

Bir modeli yayına almadan önce kendinize şunu sorun: ziyaretçi ilk üç saniyede ne görüyor, ilk dokunuşunda ne oluyor, bağlantısı zayıfsa ne kalıyor? Bu üç sorunun cevabı net ve olumluysa model hazırdır. Değilse eksik olan çoğunlukla modelin kendisi değil, çevresindeki yükleme, kontrol ve yedek içerik kararlarıdır. Bunları iyileştirmek, modeli yeniden modellemekten çok daha az emekle büyük fark yaratır.

İlgili çalışmaAura ReformerÜrün Modelleme · Müşteri Çalışması · Blender · EEVEE · 6 ürün

İlgili çalışmaGemiSinematik kamera yolu · Blender · EEVEE · 1.500 kare · 24 fps