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>

Dikkat

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" />

İpucu

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

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>

caution

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>

İpucu

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.