הוספת מודלים תלת-ממדיים לאתר יכולה להיות מסובכת. <model-viewer> קל כמו כתיבת HTML.
הוספת מודלים תלת-ממדיים לאתר היא משימה מורכבת. מומלץ להציג מודלים תלת-ממדיים באמצעות נגן שיכול לפעול בצורה רספונסיבית בכל הדפדפנים, כולל בסמארטפונים, במחשבים או אפילו במסכים חדשים לראש. הצופה צריך לתמוך בשיפור הדרגתי כדי לשפר את הביצועים ואת איכות הרינדור. הוא צריך לתמוך בתרחישים לדוגמה בכל המכשירים, החל מסמארטפונים ישנים יותר בשימוש נמוך יותר ועד למכשירים חדשים יותר שתומכים במציאות רבודה. חשוב שהיא תהיה עדכנית מבחינת הטכנולוגיות הקיימות. היא צריכה להיות איכותית וזמינה. עם זאת, כדי ליצור נגן כזה נדרשות מיומנויות תכנות מיוחדות ב-3D, והוא יכול להוות אתגר למפתחי אתרים שרוצים לארח מודלים משלהם במקום להשתמש בשירות אירוח של צד שלישי.
עם זאת, רכיב האינטרנט <model-viewer>
מאפשר להוסיף מודל תלת-ממדי לדף אינטרנט באופן דקלרטיבי, תוך אירוח המודל באתר שלכם.
מטרת הרכיב היא לאפשר הוספה של מודלים תלת-ממדיים לאתר בלי להבין את הטכנולוגיה והפלטפורמות הבסיסיות.
רכיב האינטרנט תומך בעיצוב רספונסיבי ובתרחישים לדוגמה כמו מציאות רבודה במכשירים מסוימים.
הוא כולל תכונות לנגישות, לאיכות הרינדור ולאינטראקטיביות.
מהו רכיב אינטרנט?
רכיב אינטרנט הוא רכיב HTML בהתאמה אישית שנוצר מאפשרויות סטנדרטיות של פלטפורמת אינטרנט. רכיב אינטרנט מתנהג, לכל דבר ועניין, כמו רכיב רגיל. יש לו תג ייחודי, יש לו מאפיינים ושיטות והוא יכול להפעיל אירועים ולהגיב להם. בקיצור, לא צריך לדעת שום דבר מיוחד כדי להשתמש ברכיב אינטרנט כלשהו, ובטח לא ב-<model-viewer>
.
במאמר הזה נסביר על תכונות ספציפיות ל-<model-viewer>
.
אם אתם מעוניינים לקבל מידע נוסף על רכיבי אינטרנט, webcomponents.org הוא מקום טוב להתחיל בו.
מה אפליקציית <model-viewer>
יכולה לעשות
הדוגמאות הבאות מדגימות חלק מהיכולות של <model-viewer>
.
מודלים תלת-ממדיים בסיסיים
הטמעת מודל תלת-ממדי היא פשוטה כמו תגי העיצוב הבאים. שימוש בקובצי glb יאפשר לרכיב לפעול בכל דפדפן פופולרי.
<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer
id="mv-shark"
src="shark.glb"
camera-controls
></model-viewer>
הקוד הזה ייראה כך:
הוספת תנועה ואינטראקטיביות
המאפיינים auto-rotate
ו-camera-controls
מספקים תנועה ושליטה על ידי המשתמש. יש עוד מאפיינים אפשריים. כאן מופיעה רשימה מלאה של המאפיינים.
<model-viewer src="shark.glb" auto-rotate camera-controls>
עיכוב הטעינה באמצעות תמונות פוסטר
לכל מודל תלת-ממדי נדרש זמן טעינה, והוספת המאפיין poster
תגרום להצגת תמונה עד שהמודל יהיה מוכן לשימוש.
אפשר ליצור תמונה של פוסטרים שתהיה זהה לעיבוד ה-3D באמצעות הכלי לעריכה.
<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">
עיצוב רספונסיבי
הרכיב מטפל בחלק מסוגי העיצוב הרספונסיבי, ומבצע התאמה לעיצוב במחשבים ובניידים. הוא יכול גם לנהל כמה מופעים בדף, ומשתמש ב-Intersection Observer כדי לחסוך בחיי הסוללה ובמחזורי ה-GPU כשהמודל לא גלוי.
שימוש בעורך שמתואר למעלה כדי ליצור תמונה של פוסטרים מאפשר לתמונה היחידה להתאים לעיבוד ה-3D, גם כשיחס הגובה-רוחב של <model-viewer>
משתנה בהתאם לגדלים שונים של מסכים.
תכונות נוספות
במסמכי התיעוד של <model-viewer>
תוכלו למצוא הדגמות של תכונות מתקדמות יותר.
התכונות האלה כוללות את האפשרות להוסיף סקיי בוקס שמוקרנים על הקרקע, וליצור טקסטורות מונפשות ונקודות לשיתוף אינטרנט.