Web Sitesine 3D Model Ekleme: model-viewer ile Döndürülebilir Ürün (Kod Örnekli)

Neden web sitesinde 3D model?

Ziyaretçi ürünü fotoğraflardaki sabit açılardan değil, kendi bakmak istediği açıdan görebilir. Özellikle renk seçeneği olan, parçalı ya da ölçeği önemli ürünlerde bu fark yaratır. Bu yazıda en az kodla çalışan yöntemi anlatıyorum: Google'ın açık kaynaklı model-viewer web bileşeni ve GLB formatındaki bir model.

Önce dosya: GLB neden tercih edilir?

GLB, glTF formatının tek dosyada toplanmış halidir; geometri, malzeme ve dokular tek dosyada gelir ve tarayıcıda doğrudan okunur. Formatlar arasındaki farkları format karşılaştırma yazısında, GLB'nin ne olduğunu GLB yazısında anlattım. Önemli olan, dosyanın web için hazırlanmış olması: poligon sayısı ve doku boyutu makul olmalı. Bunun için optimizasyon yazısına ve polygon bütçesi yazısına bakın.

En kısa kod örneği

Aşağıdaki örnek, bir GLB dosyasını sayfada döndürülebilir hale getirir. Betik adresi ve sürüm numarası zamanla değişebilir; güncel adresi model-viewer dokümantasyonundan kontrol edin.

<script type="module"
  src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>

<model-viewer
  src="/modeller/urun.glb"
  alt="Ürünün 3D modeli: ahşap gövdeli, deri minderli reformer"
  camera-controls
  auto-rotate
  shadow-intensity="1"
  style="width:100%;height:480px">
</model-viewer>

Önemli öznitelikler

• src: GLB dosyasının adresi.
• alt: ekran okuyucular ve arama motorları için modelin metin açıklaması. Boş bırakmayın.
• camera-controls: sürükleyerek döndürme ve yakınlaştırma.
• auto-rotate: kullanıcı dokunmadan önce yavaş dönüş; hareketi azaltmayı tercih eden kullanıcılar için kapatmayı düşünün.
• poster: model yüklenene kadar gösterilecek görsel. İlk açılış hissini ciddi ölçüde iyileştirir.
• loading="lazy": model ekrana yaklaşana kadar yüklenmesin.

Performans: sayfayı yavaşlatmadan nasıl kullanırım?

• Model dosyasını mümkün olduğunca küçük tutun; birkaç MB'ı geçmemek iyi bir hedeftir.
• Dokuları gereğinden büyük yapmayın; çoğu ürün için 1024 ile 2048 piksel arası yeterlidir.
• Aynı sayfada birden çok model yerine, kullanıcı seçtikçe yüklenen tek bir görüntüleyici kullanın.
• Poster görseli ve lazy yükleme ile ilk boyama hızını koruyun.
• Mobil cihazlarda daha hafif bir model sunmayı düşünün.

Mobilde dikkat edilecekler

Dokunmatik ekranda sayfa kaydırma ile modeli döndürme birbirine karışabilir. Görüntüleyiciyi tüm ekranı kaplamayacak şekilde konumlandırın ya da bir "etkinleştir" düğmesi ekleyin. Dokunma hedeflerini en az 44 piksel tutun. Denetimlerin tasarımı için görüntüleyici kontrolleri yazısı işinize yarar.

Renk seçeneği eklemek

Model-viewer'da malzeme özelliklerine JavaScript ile erişip taban rengini değiştirebilirsiniz; böylece aynı modeli farklı renklerle sunmak için yeni görsel üretmeniz gerekmez. Bunun gerçek bir örneği için Aura Reformer vaka sayfasına bakabilirsiniz: orada deri ve keçe renkleri modelin üzerinde anında değişiyor.

Sık yapılan hatalar

• Dosyanın web için sıkıştırılmaması ve onlarca MB'lık model yüklenmesi.
• `alt` metninin boş bırakılması.
• Modelin ölçeğinin ve başlangıç kamerasının ayarlanmaması; ürün yanlardan taşar ya da çok küçük görünür.
• Işık ve ortam ayarının unutulması; metal yüzeyler siyah görünebilir. Bunun için ortam haritası eklemek gerekir.

Hazır model yoksa ne yapmalı?

Ürününüzün web için hazırlanmış bir GLB modeli yoksa, ürün fotoğraflarından ve ölçülerden bu modeli kurmak mümkündür. Bu hizmetin kapsamını, teslim formatlarını ve sürecini web için 3D ürün modeli sayfasında bulabilirsiniz.

Blender'dan GLB'ye: dışa aktarırken dikkat edilecekler

Model-viewer'ın okuyacağı GLB dosyasını çoğu zaman Blender'dan alırsınız. File > Export > glTF 2.0 menüsünde format olarak "glTF Binary (.glb)" seçin. Dışa aktarmadan önce nesnelerin ölçeğinin ve dönüşümlerinin uygulanmış (Apply Scale, Apply Rotation) olduğundan emin olun; aksi halde model web'de beklenmedik boyut ya da yönde açılabilir. Seçili nesneleri dışa aktarmak (Selection Only) kamera ve ışık gibi gereksiz sahne öğelerini dosyadan çıkarır. Malzemeler Principled BSDF ile kurulduysa glTF dışa aktarıcı bunları PBR malzemesi olarak taşır; ancak her Blender düğüm yapısı glTF'e birebir çevrilmez. Prosedürel dokular ve karmaşık düğüm ağları için dokuyu görüntü olarak bake etmek gerekir.

Dışa aktarma sonrasında dosyayı mutlaka bir görüntüleyicide açıp kontrol edin. Ağır geliyorsa, doku boyutlarını ve poligon sayısını düşürüp yeniden dışa aktarın ya da bir optimizasyon aracıyla sıkıştırın. Bu konuda ayrıntılı adımları GLB export yazısında anlattım.

Poster ve yükleme deneyimi

Model dosyası yüklenirken ziyaretçi boş bir alan görmemeli. Poster özniteliği, model hazır olana kadar gösterilecek bir görsel belirler; bu görsel, modelin en iyi açıdan alınmış bir render'ı olabilir. Böylece sayfa açıldığında ürün hemen görünür, model arka planda yüklenir ve hazır olduğunda yumuşak bir geçişle etkileşimli hale gelir. Yükleme sırasında bir ilerleme göstergesi vermek de beklemeyi daha az rahatsız edici yapar. Birden çok model içeren sayfalarda yalnızca ekrana girenleri yüklemek (lazy loading) başlangıç hızını korur.

Renk seçeneği için kod örneği

Aşağıdaki örnek, modelin ilk malzemesinin taban rengini düğmelerle değiştirir. Hangi malzemenin değişeceği modelinize bağlıdır; malzeme adlarını model yüklendikten sonra konsolda listeleyerek doğrusunu seçebilirsiniz.

<model-viewer id="urun" src="/modeller/urun.glb"
  alt="Renk seçeneği olan ürün" camera-controls></model-viewer>

<button data-renk="#8c1d2b">Bordo</button>
<button data-renk="#1d2f5a">Lacivert</button>

<script>
  const viewer = document.querySelector('#urun');
  viewer.addEventListener('load', () => {
    const malzeme = viewer.model.materials[0];
    document.querySelectorAll('[data-renk]').forEach((b) => {
      b.addEventListener('click', () => {
        malzeme.pbrMetallicRoughness.setBaseColorFactor(b.dataset.renk);
      });
    });
  });
</script>

Bu yaklaşım, aynı modeli birkaç renkte göstermek için yeni görsel üretme ihtiyacını ortadan kaldırır. Gerçek bir uygulamasında renk grupları ve parçalara göre ayrı seçim bile yapılabilir; bu tür bir yapı için renk seçici yazısına bakabilirsiniz.

Erişilebilirlik: herkes için kullanılabilir 3D

3D görüntüleyici yalnızca fareyle ya da dokunmayla kullanılabilen bir araç olmamalı. Alt metni ürünün ne olduğunu anlatacak şekilde yazın; klavye kullanıcıları için görüntüleyiciye odaklanılabildiğinden ve ok tuşlarıyla döndürülebildiğinden emin olun. Hareketi azaltmayı tercih eden kullanıcılar için kendiliğinden dönen animasyonu kapatın. Modelin bilgilerini (ölçüler, malzeme, renk seçenekleri) sayfada metin olarak da verin; bu hem ekran okuyucu kullananlara hem arama motorlarına yardım eder.

Arama motorları için 3D modelli ürün sayfası

Arama motorları 3D modelin içeriğini okuyamaz; sayfanın metni onlar için belirleyicidir. Bu yüzden 3D görüntüleyicinin yanında ürünü anlatan gerçek bir metin, başlıklar ve ürün özellikleri bulunmalıdır. Poster görselini anlamlı bir dosya adıyla ve alt metinle verin. Ürün sayfalarında yapısal veri (Product şeması) kullanmak, görüntüleyiciden bağımsız olarak ürününüzün arama sonuçlarında doğru anlaşılmasını sağlar. 3D, sayfanın anlatımını güçlendirir ama metnin yerini almaz.

Sorun giderme: model görünmüyorsa

• Konsolda dosya yolu hatası var mı? Yol göreli mi, sunucuda gerçekten orada mı?
• Dosyayı yerel dosya sistemi üzerinden mi açıyorsunuz? Tarayıcılar güvenlik gereği dosyayı bir sunucu üzerinden yüklemenizi ister.
• Model çok mu büyük ya da çok mu küçük? Ölçek uygulanmamış olabilir.
• Model tamamen siyah mı? Ortam ışığı ya da ortam haritası ekleyin.
• Dokular görünmüyor mu? GLB içine gömülü olup olmadığını ve doku boyutlarını kontrol edin.
• Sadece bir cihazda sorun mu var? Daha hafif bir model ve daha düşük çözünürlük deneyin.

Yayına almadan önce gerçek cihazda test

Geliştirme bilgisayarında sorunsuz çalışan bir model, orta seviye bir telefonda başka davranabilir. Yayına almadan önce modeli en az bir Android ve bir iPhone'da deneyin: ilk açılış süresi, döndürme akıcılığı, yakınlaştırma ve sayfa kaydırmayla çakışma gibi şeyleri kendiniz hissedin. Yavaş bir bağlantıyı simüle etmek için tarayıcının geliştirici araçlarındaki ağ kısıtlama seçeneğini kullanabilirsiniz. Model dosyası yüklenirken sayfanın geri kalanı kullanılabilir kalmalı; görüntüleyici sayfayı kilitliyorsa dosya çok ağırdır ya da yükleme stratejisi yanlıştır. Bu testleri yaparken ayrıca ışık ayarını kontrol edin: ekranın parlaklığı ve ortam, modelin görünümünü hissedilir biçimde değiştirir.

Son olarak, görüntüleyiciyi sayfa genelinde bir kez yerleştirdikten sonra gerçek ziyaretçi davranışına bakın. Ziyaretçiler modeli döndürüyor mu, yakınlaştırıyor mu, yoksa görmezden mi geliyor? Sayfaya basit bir ipucu ("sürükleyerek döndürün") eklemek çoğu zaman etkileşimi artırır. Etkileşim yoksa sorun modelde değil, görüntüleyicinin sayfadaki yerinde ya da boyutunda olabilir.

Çalışan bir web sayfasına entegrasyon planı

Model-viewer'ı mevcut bir ürün sayfasına eklemek için şu sırayı önerebilirim. Önce modeli ve poster görselini hazırlayın ve bir test sayfasında deneyin. Sonra görüntüleyicinin ürün sayfasındaki yerini belirleyin: ürün galerisinin içinde, fotoğrafların yanında ayrı bir sekme olarak yer alması çoğu zaman iyi çalışır. Ardından görüntüleyicinin boyutlarını ve oranını sayfa tasarımına uydurun; modelin kırpılmaması için çerçevenin oranını modele göre ayarlayın. Mobil görünümde görüntüleyicinin yüksekliğini sınırlayın ki sayfa kaydırma bozulmasın. Daha sonra yükleme ve hata durumlarını tasarlayın: model yüklenmezse ziyaretçi poster görselini ve ürün fotoğraflarını görmeye devam etmelidir; bu, görüntüleyiciyi bir iyileştirme olarak konumlandırır, tek bağımlılık değil. Son olarak sayfa hızını önce ve sonra ölçün; 3D eklemek ilk yüklemeyi gözle görülür biçimde kötüleştiriyorsa, lazy yükleme ve daha küçük model gibi önlemleri uygulayın.

İçerik güncellemesi: ürün değişince model ne olur?

Ürün tasarımı değiştiğinde, sitedeki modelin de güncellenmesi gerekir; eski modelin yeni ürünün yanında durması güveni zedeler. Modelleri sürüm numarasıyla adlandırmak ("urun-v2.glb") ve sayfada yalnızca güncel sürümü göstermek iyi bir uygulamadır. Tarayıcı önbelleği eski dosyayı gösterebileceği için, yeni sürümü yeni bir dosya adıyla yayınlamak ya da dosya adresine bir sürüm parametresi eklemek sorunu önler. Eski modeli hemen silmek yerine bir arşiv klasöründe tutmak, gerektiğinde geri dönmeyi sağlar. Birden çok ürününüz varsa, modellerin ve poster görsellerinin listesini bir tabloda tutmak, güncellemeleri izlemeyi kolaylaştırır.

model-viewer dışında seçenekler: ne zaman başka bir yol?

Model-viewer basit ve hızlı bir başlangıçtır, ama her proje için doğru araç olmayabilir. Çok özel etkileşimler gerektiren (parçalar arasında animasyonlu geçişler, karmaşık sahne mantığı, birden çok nesne) projelerde daha esnek bir 3D kütüphanesiyle (örneğin Three.js) doğrudan çalışmak gerekebilir. Bu yaklaşım daha fazla kod ve bakım demektir, ama tam kontrol sağlar. Öte yandan sadece ürünü döndürüp yakınlaştırmak ve renk değiştirmek istiyorsanız, model-viewer çoğu zaman yeterlidir ve kodu çok daha sade tutar. Karar verirken şu soruyu sorun: sayfanın 3D'den beklentisi bir ürün görüntüleyicisi mi, yoksa özel bir deneyim mi? Birincisi için hazır bileşen, ikincisi için özel kod doğru seçimdir. Seçtiğiniz yol ne olursa olsun, ağır bir model ve eksik alt metin hep aynı sorunları üretir.

Mobilde ve yavaş bağlantıda deneyimi koruma

Ziyaretçilerin önemli bir kısmı mobil ve zaman zaman yavaş bir bağlantıda olacaktır. Bu yüzden 3D'nin başarısız olması durumunda sayfanın hâlâ işlevsel kalması gerekir. Poster görseli ve ürün fotoğrafları, model yüklenemediğinde ziyaretçinin gördüğü yedek içeriktir. Yükleme ilerlemesini göstermek, beklemeyi daha az rahatsız edici yapar. Veri tasarrufu modunda ya da çok yavaş bağlantıda modeli otomatik yüklememek ve ziyaretçiye "3D'yi yükle" düğmesi sunmak, hem hızı hem kullanıcı kontrolünü korur. Bu tür bir "kademeli iyileştirme" (progressive enhancement) yaklaşımı, 3D'yi her ziyaretçi için kullanılabilir bir bonus haline getirir.

Sonuç

Model-viewer, web'de 3D'ye başlamanın en düşük engelli yoludur: bir GLB dosyası, bir HTML etiketi ve birkaç öznitelik yeterlidir. Asıl emek dosyanın hazırlanmasındadır: doğru ölçek, makul poligon, küçük doku, iyi bir poster ve ürünü anlatan sayfa metni. Bu parçaları doğru kurduğunuzda ziyaretçi ürünü hem hızlı hem de gerçekçi bir şekilde inceler. Kendi ürününüz için web'de çalışan bir model hazırlatmak isterseniz, web için 3D ürün modeli sayfasındaki kapsamı inceleyebilirsiniz.

Sık sorulan sorular

İ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