Odată ce ai obținut modelul 3D al unui produs – fie prin scanare 3D cu telefonul, fie prin generare din fotografie cu AI – următorul pas este integrarea acestuia pe site-ul tău comercial.

Pentru a afișa un model 3D interactiv direct în browser, dezvoltatorii folosesc două abordări principale: Iframe-ul găzduit și Web Component-ul direct (cum ar fi <model-viewer>). În acest ghid analizăm ambele metode pentru a te ajuta să alegi opțiunea ideală pentru magazinul tău.

Varianta 1: Iframe găzduit (Recomandat pentru majoritatea magazinelor)

Integrarea prin <iframe> este cea mai simplă și sigură metodă. Un exemplu tipic de cod generat de 3DView.ai arată astfel:

<iframe
  src="https://www.3dview.ai/embed/ID_MODEL"
  width="100%"
  height="480"
  frameborder="0"
  allow="camera; accelerometer; gyroscope"
  loading="lazy">
</iframe>

Avantaje cheie ale Iframe-ului:

  • Compatibilitate universală: Funcționează garantat pe orice platformă e-commerce (Shopify, WooCommerce, PrestaShop, Wix, Squarespace, Webflow).
  • Izolare completă (Zero conflicte): Scripturile 3D complexe (WebGL, Three.js) nu interferează cu librăriile JavaScript ale site-ului tău.
  • Mentenanță zero: Orice actualizare de performanță, compatibilitate de browser sau optimizare AR este aplicată automat pe serverele noastre, fără modificări din partea ta.
  • Lazy loading nativ: Iframe-ul se încarcă doar când clientul derulează în dreptul lui, protejând viteza inițială a paginii.

Varianta 2: Web Component direct pe propriul server

Dacă preferi să găzduiești fișierele GLB și USDZ pe propriul server sau CDN, poți utiliza componenta standard open-source <model-viewer> dezvoltată de Google:

<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
<model-viewer
  src="/modele/produs.glb"
  ios-src="/modele/produs.usdz"
  ar
  camera-controls
  auto-rotate>
</model-viewer>

Când este potrivită această variantă:

  • Ai o echipă dedicată de dezvoltare frontend care dorește să controleze fiecare animație, buton sau eveniment personalizat.
  • Nu dorești dependențe de platforme terțe de găzduire.

Recomandarea practică

Pentru 95% dintre magazinele online, varianta Iframe oferită de 3DView.ai este cea mai rentabilă și rapidă: copiez codul din panoul de administrare, îl lipești în descrierea produsului sau în secțiunea Custom Liquid și ai un model 3D perfect funcțional, cu buton de Realitate Augmentată pe iPhone și Android inclus.