Uygulama Olmadan Web Sitenize 3D ve AR Nasıl Eklenir?
Web sitenize uygulama gerektirmeden 3D ve AR eklemek için ürününüzü BASE 3D-AR Studio'da bir 3D-AR sayfası olarak yayınlamanız ve bu sayfanın gömme kodunu sitenize yapıştırmanız yeterli. Ziyaretçiler modeli doğrudan sayfanızda döndürüp yakınlaştırabilir. AR düğmesi iPhone ve iPad'de Apple AR Quick Look'u, Android'de Chrome üzerinden WebXR'ı açar; masaüstünde ise ziyaretçinin deneyime telefonunda devam etmesini sağlayan bir QR kodu gösterir.
Öne çıkanlar
- Studio'daki her modelin, sizin için barındırılan kendi 3D-AR sayfası vardır; bu nedenle bir görüntüleyiciyi kendiniz geliştirmeniz ya da barındırmanız gerekmez.
- Tek sayfa, üç paylaşım yolu: herkese açık bağlantı, QR kod ve kopyalayıp yapıştırabileceğiniz iframe gömme kodu. Hepsi Share & Embed açılır penceresinde yer alır.
- AR, telefonun kendi tarayıcısında ya da yerleşik AR görüntüleyicisinde açılır: iPhone ve iPad'de USDZ dosyasıyla Apple AR Quick Look, Android'de Chrome üzerinden WebXR.
- Gömülü görünümde AR'ın çalışması için sayfanın HTTPS üzerinden sunulması ve iframe'in allow özniteliğindeki izinlerin korunması gerekir. Studio'nun verdiği gömme kodu bu izinleri zaten içerir.
- Yayınlamadan önce Model Scale değerini ayarlayın; böylece yüzey takibi ürünü gerçek bir yüzeye gerçek ölçüsüyle yerleştirir.
“Uygulama olmadan 3D ve AR” ne anlama geliyor?
Web sitesine uygulama olmadan 3D ve AR eklemek, ziyaretçilerin etkileşimli bir 3D modeli web tarayıcısında görüntülemesi ve telefon kamerasıyla kendi mekânlarına yerleştirmesi demektir. Bunun için önceden hiçbir şey indirmeleri ya da kurmaları gerekmez.
BASE BROS'un geliştirdiği BASE 3D-AR Studio'da bu deneyim, barındırılan bir 3D-AR sayfasında yer alır. Her modelin tek bir sayfası vardır. Sayfa, BASE 3D Viewer üzerinde çalışır (WebGPU tabanlıdır, gerektiğinde otomatik olarak WebGL'e geçer) ve yerleşik bir artırılmış gerçeklik (AR) düğmesi içerir. Sayfayı görüntülemek için hesap gerekmez; bağlantıya, QR koda ya da gömülü sayfanıza erişebilen herkes açabilir.
AR her cihazda nasıl açılır?
Aynı sayfa, her ziyaretçinin cihazına otomatik olarak uyum sağlar. Ziyaretçi, varsayılan metni View in AR olan AR düğmesine dokunduğunda ya da tıkladığında şunlar olur:
| Cihaz | Ne açılır | Kullanılan dosya |
|---|---|---|
| iPhone ve iPad | Apple AR Quick Look (iPhone ve iPad'in yerleşik AR görüntüleyicisi) | Studio'nun GLB'nizden oluşturduğu USDZ ya da kendi yüklediğiniz .usdz dosyası |
| Android telefonlar | Chrome'da ARCore destekli WebXR | En güncel malzeme düzenlemelerinizi içeren GLB dosyanız |
| Masaüstü ve dizüstü bilgisayar | Bir QR açılır penceresi; kod okutulduğunda AR telefonda başlar | AR için dosya kullanılmaz: sayfa etkileşimli 3D görünümü gösterir |
iPhone, iPad ve Android'de yüzey takibi ürünü gerçek bir yüzeye gerçek ölçüsüyle yerleştirir; ziyaretçiler ürünü dokunma hareketleriyle taşıyıp döndürebilir. Gerçek boyut belirlendiyse ölçek bu boyutta sabit kalır. Android'deki tarayıcı WebXR'ı desteklemiyorsa sayfa, ziyaretçiden sayfayı Chrome'da açmasını ister. iPhone ile Android'in neden farklı dosyalara ihtiyaç duyduğunu GLB mi USDZ mi? 3D Modeli Web ve AR İçin Hazırlama Rehberi yazımızda bulabilirsiniz.
Web sitenize 3D ve AR adım adım nasıl eklenir?
Kurulumun tamamı tarayıcıda yapılır; kod yazmanız gerekmez, yalnızca tek bir kod parçasını sitenize yapıştırırsınız:
1. Adım: Ürününüzü Studio'ya 3D model olarak ekleyin
50 MB'a kadar bir .GLB dosyası yükleyin ya da 3D Generator ile ürün fotoğraflarından veya bir metin isteminden model oluşturun. Yeni yüklenen ya da yapay zekâ ile oluşturulan bir model, Save'e basmanıza gerek kalmadan kendi 3D-AR sayfasıyla yayına girer. Yükleme, model oluşturma ve düzenleme adımlarının tamamını BASE 3D-AR Studio ile 3D ve AR Ürün Sayfası Nasıl Oluşturulur? rehberimizde, iyi sonuç veren fotoğrafları seçmeye dair ipuçlarını ise Görselden 3D: Ürün Fotoğrafları Yapay Zekâ ile 3D Modele Nasıl Dönüştürülür? yazımızda bulabilirsiniz.
2. Adım: Gerçek boyutu ve ilk görünümü belirleyin
Model Editor'de Controls sekmesini açın ve Model Scale değerini ayarlayın: ürünün en uzun kenarını santimetre cinsinden girin ya da çarpanı kullanın. 3D görünüm değişmez, ancak model AR'da tam olarak bu boyutta görünür. Aynı sekmedeki Set Start View, ziyaretçilerin ilk gördüğü açıyı sabitler. Görüntüleyicinin sayfanızla bütünleşmesini istiyorsanız Scene sekmesinde No Background'u seçerek arka planı şeffaf yapabilirsiniz.
3. Adım: AR düğmesini Page Designer'da biçimlendirin
Page Designer'daki AR Button sekmesinde, düğmenin görünüp görünmeyeceğini belirleyen Show AR button seçeneğinin yanı sıra düğme metni (en fazla 40 karakter), konum, yazı tipi, renkler, köşe yuvarlaklığı ve opaklık ayarları bulunur. QR Popup Editor ise masaüstündeki ziyaretçilerin gördüğü açılır pencerenin başlığını, metnini ve dört rengini belirler. Masaüstü ve mobil görünümü ayrı ayrı biçimlendirebilir ya da Use the same on desktop and mobile onay kutusuyla ikisini birebir aynı tutabilirsiniz. Yayınlamak için Save'e basın. Studio'da kaydetmek yayınlamak demektir; kaydetmediğiniz hiçbir değişiklik canlı sayfaya yansımaz.
4. Adım: Gömme kodunu Share & Embed'den kopyalayın
Share & Embed açılır penceresini modelin üç nokta menüsünden, Library'den ya da Page Designer veya More Details içindeki Share Page düğmesinden açın. İhtiyacınız olan her şey tek bir kartta yer alır: Download PNG seçeneğiyle QR kod, Copy düğmesiyle herkese açık bağlantı, Copy embed code düğmesiyle yapıştırmaya hazır gömme kodu ve Open live page düğmesi.
5. Adım: Gömme kodunu HTTPS üzerinden sunulan bir sayfaya yapıştırın
Gömme kodunu, 3D görüntüleyicinin yer almasını istediğiniz alana, örneğin ürün açıklamanıza ya da açılış sayfanızdaki bir bölüme yapıştırın. Kod parçasını Studio'nun verdiği şekliyle, hiç değiştirmeden kullanın:
- allow özniteliğini koruyun. AR'ın çalışması için gereken camera, gyroscope, accelerometer ve xr-spatial-tracking izinleri bu özniteliktedir. Bu izinler olmadan tarayıcılar sensörlere erişimi engeller.
- Sayfayı HTTPS üzerinden sunun. AR, kamera erişimi için güvenli bağlantı gerektirir ve HTTP üzerinde hiçbir zaman çalışmaz.
- loading="lazy" değerini koruyun. Böylece 3D motor yalnızca gömülü alan ekrana geldiğinde başlar.
- Mobilde sabit piksel yüksekliği kullanmayın. Bunun yerine iframe'i 4:3 en boy oranlı bir kapsayıcıya (aspect-ratio: 4 / 3) yerleştirin; böylece görünüm ekran boyutuna göre ölçeklenir.
6. Adım: iPhone, Android telefon ve masaüstünde test edin
Sayfanızı bir iPhone ya da iPad'de açın ve Quick Look'u denemek için AR düğmesine dokunun. Android'de WebXR'ı denemek için sayfayı Chrome'da açın. Masaüstünde düğmeye tıklayın ve QR kodu okutun. Her durumda ürünün Model Scale ile belirlediğiniz boyutta göründüğünü kontrol edin.
Bağlantı, QR kod ya da gömme kodu: hangisini kullanmalısınız?
Üçü de aynı canlı sayfayı açtığı için bunları dilediğiniz gibi bir arada kullanabilirsiniz:
| Hedef kitleniz nerede? | En uygun seçenek | Neden |
|---|---|---|
| Web sitenizde | Gömme kodu | 3D görüntüleyici ve AR düğmesi doğrudan kendi sayfanızda yer alır |
| E-postada, mesajlaşma uygulamalarında ya da sosyal medya paylaşımlarında | Herkese açık bağlantı | Tek bir URL, sayfanın tamamını 3D olarak açar; telefonlarda AR da kullanılabilir |
| Ambalajda, basılı materyalde ya da mağazada | QR kod | Okutulduğunda sayfa telefonda, AR'a hazır şekilde açılır |
| Bilgisayar başında, sitenize göz atıyor | QR açılır pencereli AR düğmesi | Bilgisayardaki ziyaretçi kodu telefonuyla okutur ve AR'a telefonda devam eder |
Gömülü görünüm barındırılan sayfayı gösterdiği için Studio'da her Save işlemi sitenizi de günceller; kodu yeniden yapıştırmanız gerekmez. Kendi yüklediğiniz modellerde More Details içindeki Change Model ile .GLB dosyasını değiştirebilirsiniz; sayfa, bağlantı ve analiz verileri korunur.
Sitenizdeki 3D görüntüleyicinin hızlı yüklenmesi için ne yapmalısınız?
Daha hafif bir model daha hızlı yüklenir ve özellikle telefonlarda AR'da daha çabuk açılır. Studio bu işin büyük kısmını sizin yerinize üstlenir:
- Yapay zekâ ile oluşturulan modeller optimize edilmiş olarak gelir. Studio, model oluşturulur oluşturulmaz otomatik olarak Balanced seviyesinde üçgen azaltma, 2K WebP dokular ve Draco sıkıştırma uygular.
- Canlı dosyayı optimize edin. More Details > Optimize, üçgen sayısını yaklaşık %25, %50 ya da %75 oranında azaltır; dokular için WebP, PNG ya da Keep, doku boyutu için 1K ya da 2K ve Draco sıkıştırma seçenekleri sunar. Apply'a basmadan önce ölçülen nihai boyutu görürsünüz; Revert yedeği geri yükler ve Studio, iPhone için USDZ dosyasını sizin yerinize yeniden oluşturur.
- Dosyaları yüklemeden önce hafifletin. Ücretsiz Model Optimizer, bir .GLB dosyasını hesap gerektirmeden ve dosyayı sunucuya yüklemeden tarayıcınızda hafifletir.
Üçgenler, dokular ve Draco için eksiksiz bir kontrol listesine 3D modelleri web ve AR için hazırlama rehberimizden ulaşabilirsiniz.
3D ve AR etkileşimini nasıl ölçersiniz?
Studio'daki Analytics, tüm sayfalar ya da tek bir sayfa için All Time, 30D, 7D, 24H ya da Custom (özel tarih aralığı) seçenekleriyle rapor sunar. 12 Quick Stats metriği arasında Total Views, Unique Sessions, QR Scans, AR Activations, 3D Interactions, Avg View Duration ve Bounce Rate yer alır. Distribution ziyaretleri işletim sistemine, cihaza, tarayıcıya ve konuma göre ayırır; Top Referrers ziyaretçilerin nereden geldiğini gösterir; Export PDF ise raporu PDF olarak kaydeder. Ayrıntılar için Analytics dokümantasyonuna göz atın.
BASE 3D-AR Studio'nun fiyatı ne kadar?
BASE 3D-AR Studio'da fiyatlandırma model başınadır; düzenleme, AR, yayınlama ve bağlantı, QR kod ya da gömme koduyla paylaşım her plana dâhildir:
- Free: 0 dolar, kart bilgisi gerekmez. En fazla 3 canlı model ve ayda 3 yeni model içerir. Sayfalarda ve gömülü görünümlerde küçük bir Powered by BASE filigranı yer alır.
- Pro: model başına aylık 0,50 dolar (lansman fiyatı); en düşük aylık ücret 20 dolardır ve 40 modeli kapsar. Filigran yer almaz.
- Enterprise: ihtiyacınıza göre belirlenen fiyat ve kapasite, size özel 3D projeler ve birebir destek.
İhtiyacınız olan model sayısına göre aylık fiyatı fiyatlandırma sayfasında görebilirsiniz.
Sıkça sorulan sorular
Ziyaretçilerin bir ürünü AR'da görmesi için uygulama gerekir mi?
Hayır. iPhone ve iPad'de AR düğmesi, cihazda yerleşik olarak bulunan Apple AR Quick Look'u açar; Android'de ise Chrome üzerinden WebXR'ı açar. Masaüstünde düğme, ziyaretçinin telefonda devam edebilmesi için bir QR kodu gösterir.
AR, gömülü bir iframe içinde çalışır mı?
Evet; iframe'i barındıran sayfa HTTPS üzerinden sunuluyorsa ve iframe, camera, xr-spatial-tracking, accelerometer ve gyroscope izinlerini içeren allow özniteliğini koruyorsa çalışır. Share & Embed'den aldığınız gömme kodu bu izinleri zaten içerir.
AR düğmesi web sitemde neden AR'ı açmıyor?
Sayfanızın HTTPS kullandığını, allow özniteliğinin iframe'de hâlâ bulunduğunu, Page Designer'da Show AR button seçeneğinin açık olduğunu ve sayfanın Live (yayında) olduğunu kontrol edin. Masaüstünde düğme, tasarımı gereği bir QR kodu gösterir; Android'de ise sayfanın Chrome gibi WebXR destekli bir tarayıcıda açılması gerekir.
Web siteme 3D model eklemek için kod yazmam gerekir mi?
Hayır. Gömme kodunu Studio sizin için oluşturur. Kodu Share & Embed açılır penceresinden kopyalayıp sayfanıza yapıştırmanız yeterli; kurmanız gereken bir kütüphane ya da derleme adımı yoktur.
Studio'daki değişiklikler web sitemdeki gömülü görünümü günceller mi?
Evet. Gömülü görünüm, barındırılan 3D-AR sayfanızı gösterir; bu nedenle Studio'da Save'e bastığınızda siteniz, yeni bir gömme koduna gerek kalmadan güncel sayfayı gösterir.
Free planda gömülü görünümde filigran yer alır mı?
Evet. Free planda gömülü görünüm aynı herkese açık sayfayı gösterdiği için küçük Powered by BASE filigranı orada da yer alır. Pro ve Enterprise sayfalarında filigran bulunmaz.
Sonuç
Web sitenize 3D ve AR eklemek için barındırılan tek bir sayfa ve tek bir kod parçası yeterlidir: modeli Studio'da oluşturun, gerçek boyutunu ayarlayın, AR düğmesini biçimlendirin, Save'e basın ve gömme kodunu HTTPS üzerinden sunulan bir sayfaya yapıştırın. Ziyaretçileriniz her ekranda etkileşimli 3D görünümden, telefonlarında ise uygulama kurmadan AR'dan yararlanır. Ücretsiz başlayın, gömme kodu dokümantasyonuna göz atın, marka projelerimizden oluşan Showcase sayfasını inceleyin ya da özel 3D projeler veya Enterprise kapasitesi için BASE BROS ekibiyle iletişime geçin.