מציאות רבודה עם <model-צפייה>

רכיב האינטרנט <model-viewer> יכול לשמש להצגת מודלים תלת-ממדיים באינטרנט ולביצוע אינטראקציה איתם, והוא עובר בצורה חלקה למיקום המודלים התלת-ממדיים האלה ולאינטראקציה איתם במציאות רבודה באינטרנט.

כשמציגים את הנתונים במכשיר Android שתומך ב-ARCore, רכיב <model-viewer> עם המאפיין ar מציג לחצן כמו בדוגמה הבאה:

צילום מסך של מציג הדגם

אפשר להקיש על הלחצן הזה במכשירים שתומכים ב-ARCore כדי להציג את המודל באמצעות הפונקציונליות WebXR של Chrome או אפליקציית סצנה, בהתאם לערך של המאפיין ar-modes.

ניתן להתאים אישית את המראה של לחצן ה-AR באמצעות חריצים לרכיבי אינטרנט. כדי לראות דוגמה, אפשר לעיין ב<model-viewer> documentation. למידע נוסף על הצגת מודלים תלת-ממדיים אינטראקטיביים ב-AR באפליקציות או בדפדפן של Android, אפשר לקרוא את המאמר Scene Viewer.

תחילת העבודה עם <model-viewer>

בשלבים הבאים מוסבר איך להתחיל לעבוד עם <model-viewer> בדף אינטרנט כלשהו.

מוסיפים את התלות <model-viewer>

מ-unpkg CDN

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

מ-npm

npm install @google/model-viewer

לאחר מכן צריך להוסיף את <model-viewer> ב-node_modules/model-viewer/dist/model-viewer.min.js באמצעות המארז המועדף עליך,

הכללת התג <model-viewer>

מוסיפים את רכיב האינטרנט <model-viewer> למסמך ה-HTML:

<model-viewer src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
              ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz"
              alt="A 3D model of an astronaut"
              ar
              auto-rotate
              camera-controls></model-viewer>

הגדרת התג <model-viewer>

אפשר להגדיר את תצוגת המודל על ידי שינוי המאפיינים בתג <model-viewer>. המאפיינים האלה חושפים אפשרויות כמו תנועת מצלמה, אנימציות של מודלים ומידע על הסביבה. במסמכי התיעוד של <model-viewer> מפורטים כל המאפיינים שניתן להגדיר. הכלי עורך המודלים יכול ליצור תג HTML של <model-viewer> ולהגדיר מאפיינים כמו מיקום המצלמה והתאורה.

צילום מסך של עורך המודלים

תאימות דגם

מודלים בפורמט הקובץ gltf ו-glb נתמכים על ידי <model-viewer>. ב-three.js GLTFLoader documentation תוכלו למצוא רשימה של תוספי glTF נתמכים.

כדי לוודא שהמודל יוצג כראוי, בודקים את המודל בעורך המודלים.

תמיכה בדפדפן ובמכשיר

השימוש ב-<model-viewer> להצגת מודלים תלת-ממדיים בדף אינטרנט נתמך בכל הדפדפנים של קמפיינים לטווח ארוך. מומלץ להשתמש ב-a :focus-visible polyfill כדי להסתיר טבעות מיקוד כשהרכיב ממוקד.

כדי להשתמש בתכונות AR נדרש מכשיר שתומך ב-ARCore והתקנה של Google Play Services ל-AR. למצב AR של webxr אפשר לעיין בתמיכה בדפדפן WebXR. כברירת מחדל, אם אין תמיכה ב-WebXR, המערכת תשתמש ב-Scene Viewer במקום זאת.

השלבים הבאים