Web Sitenize 3D Ürün Görüntüleyici Ekleme: Başlangıç Rehberi

model-viewer Nedir?

model-viewer, Google tarafından geliştirilen açık kaynaklı bir web component'dir. 3D modelleri herhangi bir web sayfasında göstermek için tasarlanmıştır. WebGL bilgisi gerektirmez ve birkaç satır HTML ile çalışır.

Kurulum

model-viewer'ı sayfanıza eklemek için tek bir script etiketi yeterlidir:

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

Temel Kullanım

GLB formatındaki 3D modelinizi sayfada göstermek için:

<model-viewer
  src="/models/urun.glb"
  alt="Ürün 3D görünümü"
  camera-controls
  auto-rotate
  style="width: 100%; height: 400px;"
></model-viewer>

Bu kadar. Yukarıdaki kod, döndürülebilir ve yakınlaştırılabilir bir 3D görüntüleyici oluşturur.

Önemli Attribute'lar

• camera-controls: Kullanıcının modeli fare/dokunma ile döndürmesini sağlar
• auto-rotate: Model otomatik olarak döner, kullanıcı etkileşime geçince durur
• ar: AR butonunu aktif eder (desteklenen cihazlarda)
• ios-src: Apple cihazlar için USDZ dosyası belirtir
• poster: Model yüklenene kadar gösterilecek placeholder görsel
• loading="lazy": Sayfa performansı için lazy loading

AR Desteği Ekleme

<model-viewer
  src="/models/urun.glb"
  ios-src="/models/urun.usdz"
  ar
  ar-modes="webxr scene-viewer quick-look"
  camera-controls
  auto-rotate
>
  <button slot="ar-button">AR ile Gör</button>
</model-viewer>

Performans İpuçları

1. Poster kullanın: Model yüklenirken statik bir görsel gösterin. Bu hem algılanan hızı artırır hem de layout shift'i önler.
2. Lazy loading: Ekranda görünmeden modeli yüklemeyin. loading="lazy" veya reveal="interaction" attribute'larını kullanın.
3. Model boyutunu optimize edin: Draco sıkıştırma ile GLB dosya boyutunu küçültün.

Özelleştirme

model-viewer CSS ile stillenebilir ve JavaScript event'leri ile genişletilebilir. Renk değiştirme, hotspot ekleme ve animasyon kontrolü gibi özellikler API üzerinden erişilebilir.

Sonuç

model-viewer, web sitenize 3D görüntüleyici eklemenin en kolay yoludur. Herhangi bir framework bağımlılığı yoktur ve modern tüm tarayıcılarda çalışır.