הוספת מודלים תלת-ממדיים לאתר יכולה להיות מסובכת; <model-viewer> קל כמו כתיבת HTML.
הוספת מודלים תלת-ממדיים לאתר היא בעייתית. עדיף להציג מודלים תלת-ממדיים במציג שיכול לפעול עם יכולת תגובה בכל הדפדפנים, כולל סמארטפונים, מחשבים ואפילו מסכים חדשים עם תושבת לראש. הצופה צריך לתמוך בשיפור הדרגתי תוך התמקדות בביצועים ובאיכות הרינדור. הוא אמור לתמוך בתרחישים לדוגמה בכל המכשירים, מסמארטפונים ישנים יותר עם פחות מכשירים ועד למכשירים חדשים שתומכים במציאות רבודה. האתר צריך להתעדכן באופן קבוע בטכנולוגיות הנוכחיות. הוא צריך להיות נגיש וביצועים טובים. עם זאת, בניית צופה כזה דורשת מיומנויות תכנות מיוחדות בתלת-ממד, והיא יכולה להוות אתגר למפתחי אתרים שרוצים לארח מודלים משלהם במקום להשתמש בשירות אירוח של צד שלישי.
עם זאת, רכיב האינטרנט <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 פירושה שהתמונה תוצג עד שהמודל יהיה מוכן לשימוש.
בעזרת העורך אפשר ליצור תמונת פוסטר שתיראה זהה לעיבוד בתלת-ממד.
<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">
עיצוב רספונסיבי
הרכיב מטפל בסוגים מסוימים של עיצוב רספונסיבי, בהתאמה לניידים ולמחשבים. הוא גם יכול לנהל מספר מכונות בדף ולהשתמש ב-Intersection Observer כדי לחסוך בצריכת הסוללה ובמחזורי ה-GPU כשהמודל לא גלוי.
באמצעות העורך שתיארנו קודם כדי ליצור תמונת פוסטר, אפשר להתאים את התמונה האחת לעיבוד התלת-ממד, גם כאשר יחס הגובה-רוחב <model-viewer> מגיב לגדלים שונים של מסכים.
תכונות נוספות
בתיעוד של <model-viewer> תוכלו למצוא הדגמות של תכונות מתקדמות יותר.
התכונות האלה כוללות את היכולת להוסיף שמיים בהיררכיה עם היטל קרקע, וליצור מרקמים מונפשים ונקודות לשיתוף אינטרנט.