Web
Web entegrasyonu için iki seçeneğiniz mevcut. İlk seçenek web siteniz üzerinde hem 3D model gösterebilir hem de AR moduna geçebilir, ikinci seçenek ise bir buton yardımı ile sadece AR moduna geçmeyi desteklemektedir.
Seçenek 1: Viewer & AR SDK
Kurulum
<meshkraft-viewer>
web bileşeni, unpkg.com gibi çeşitli ücretsiz CDN'lerden doğrudan kullanılabilir.
Web sayfanızın </body>
etiketini kapatmadan önce script
kodunu yapıştırmanız gerekir
<script
type="module"
src="https://unpkg.com/meshkraft-viewer/dist/meshkraft-viewer.min.js"
data-meshkraft-key="API_KEY"
></script>
API_KEY
'i kendi API anahtarınız ile değiştirdiğinizden emin olun
Kullanım
Kurulumdan sonra, belirli ürün sayfasında, ürün SKU kodunuz ile SDK'yı çağırın
<meshkraft-viewer sku="YOUR_SKU" />
YOUR_SKU
yerine ürününüzün SKU kodunu ekledikten sonra, SDK gerisini halledecektir :)
SDK Seçenekleri
- sku (string) *required
Ürününüzün SKU kodu
- enable-ar (boolean)
AR modu etkinleştirilsin mi. Varsayılan olarak true
- auto-rotate (boolean)
3D modeller otomatik döndürülsün mü. Varsayılan olarak true
- show-dimensions (boolean)
Model boyutlarını santimetre cinsinden gösterir. Varsayılan olarak false
- width (number)
Üst bileşenin genişliği. Varsayılan olarak 100%
- height (number)
Üst bileşenin yüksekliği. Varsayılan olarak 300px
- config (object)
Scene and AR config. TBA.
Paket Boyutu
Tarayıcıya bağlı olarak küçültülmüş ve Gzip'lenmiş veya Brotli sıkıştırılmış sürümünü kullanacaksınız.
Web sitenizde AR deneyimini etkinleştirmenin boyut maliyeti 177kb
ve 218kb
olacaktır 🎉
┌─────────────────────────────────────────────────┐
│ │
│ meshkraft-viewer.min.js │
│ Bundle Size: 828.88 KB │
│ Minified Size: 828.55 KB │
│ Gzipped Size: 218.53 KB │
│ Brotli size: 177.16 KB │
│ │
└─────────────────────────────────────────────────┘
Seçenek 2: AR SDK
Kurulum
Web sayfanızın </body>
etiketini kapatmadan önce aşağıdaki script
kodunu yapıştırmanız gerekir
<script
type="module"
src="https://unpkg.com/meshkraft-viewer/dist/meshkraft-ar.min.js"
data-meshkraft-key="API_KEY"
></script>
API_KEY
'i kendi API anahtarınız ile değiştirdiğinizden emin olun
Kullanım
Yukarıdaki komut satırını ekledikten sonra yapmanız gereken tek şey, web sitenize herhangi bir button
, a
, div
veya başka herhangi bir tıklanabilir HTML öğesini kendi stilinizle eklemektir.
<button data-meshkraft-sku="YOUR_SKU">AR ile Göster</button>
YOUR_SKU
yerine ürününüzün SKU kodunu ekledikten sonra, SDK gerisini halledecektir :)
Paket Boyutu
Tarayıcıya bağlı olarak küçültülmüş ve Gzip'lenmiş veya Brotli sıkıştırılmış sürümünü kullanacaksınız.
Web sitenizde AR deneyimini etkinleştirmenin boyut maliyeti 4kb
civarında olacaktır. Harika değil mi 🎉
┌─────────────────────────────────────────────┐
│ │
│ meshkraft-ar.min.js │
│ Bundle Size: 10.31 KB │
│ Minified Size: 10.3 KB │
│ Gzipped Size: 4.71 KB │
│ Brotli size: 4.01 KB │
│ │
└─────────────────────────────────────────────┘
Masaüstü Cihazlar
AR, yalnızca mobil cihazlarda mevcut çünkü çalışması için bir kamera gerekiyor. Her iki seçenekte de; ziyaretçileriniz mobil olmayan cihazlardan AR açmaya çalıştığında, SDK tarafından üretilen bir QR kod yardımı ile telefona yönlendirir.