הוספת מודלים תלת-ממדיים לאתר יכולה להיות מסובכת, אבל עם <model-viewer> זה קל כמו כתיבת HTML.
הוספת מודלים תלת-ממדיים לאתר היא משימה מורכבת. הדרך הכי טובה להציג מודלים תלת-ממדיים היא באמצעות כלי לצפייה שפועל באופן רספונסיבי בכל הדפדפנים, כולל בסמארטפונים, במחשבים ואפילו בצגי ראש חדשים. כדי לשפר את הביצועים ואת איכות העיבוד, כדאי שהצופה יתמוך בשיפור הדרגתי (progressive enhancement). הוא צריך לתמוך בתרחישי שימוש בכל המכשירים, החל מסמארטפונים ישנים יותר עם הספק נמוך ועד למכשירים חדשים יותר שתומכים במציאות רבודה. הוא צריך להיות מעודכן בטכנולוגיות הנוכחיות. הוא צריך להיות נגיש ובעל ביצועים טובים. עם זאת, כדי ליצור כלי כזה צריך מיומנויות תכנות תלת-ממדיות מיוחדות, וזה יכול להיות מאתגר למפתחי אתרים שרוצים לארח מודלים משלהם במקום להשתמש בשירות אירוח של צד שלישי.
לעומת זאת, רכיב האינטרנט <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> תוכלו למצוא הדגמות של תכונות מתקדמות יותר.
התכונות האלה כוללות את היכולת להוסיף תיבת שמיים שמוקרנת על הקרקע, וליצור מרקמים מונפשים ונקודות חמות.