בפברואר, הצגנו את רכיב האינטרנט <model-viewer>, שמאפשר להוסיף מודל תלת-ממדי לדף אינטרנט באופן מוצהר, בזמן שאתם מארחים את המודל באתר שלכם. דבר אחד שהוא לא תמך בו היה מציאות רבודה. כלומר, לא ניתן לעבד את תמונת המקור של הרכיב מעל פיד המצלמה במכשיר.
כדי לעשות את זה, הוספנו תמיכה ב-Magic Leap וב-Quick Look ב-iOS. עכשיו אנחנו מכריזים על התמיכה ב-AR ב-Android בתוספת המאפיין ar. המאפיין הזה מבוסס על תכונת ARCore חדשה שנקראת סצנת צפייה,
אפליקציה חיצונית לצפייה במודלים בתלת-ממד. במאמר צפייה במודלים תלת-ממדיים ב-AR בדפדפן Android תוכלו לקרוא מידע נוסף על נוף ל-סצנות.
בואו נראה איך משתמשים במציאות רבודה באמצעות <model-viewer>.
המאפיין
כפי שאתה ודאי זוכר, לא נדרש ידע מיוחד כדי להשתמש ברכיב אינטרנט. הוא פועל כמו רכיב HTML סטנדרטי, עם תג ייחודי וגם מאפיינים ושיטות. אחרי
הטמעה באמצעות תג <script>,
צריך להשתמש בו כמו בכל רכיב HTML אחר.
<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>
זה דומה מאוד לזה שמופיע במאמר הקודם. שימו לב למה שהדגשתי בסוף. זה המאפיין החדש.
מתקין את הגרסה החדשה
אם אתם כבר משתמשים ב-<model-viewer>, סביר להניח שאתם מייבאים את הרכיב באמצעות תגי <script> בדיוק כפי שמוצג במסמכי התיעוד.
אנחנו ממשיכים לבצע שיפורים. אם אתם רוצים לבדוק תכונות חדשות לפני שאתם משדרגים ופורסים את האפליקציה באופן מכוון, מומלץ להתקין גרסה ספציפית של <model-viewer>. כדי לעשות זאת, מוסיפים את מספר הגרסה לכתובות ה-URL של הקובץ, כפי שמוצג בהמשך. לאחר מכן תוכלו לבדוק את העדכונים בדף הגרסאות.
<script type="module"
src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer.js">
</script>
<script nomodule
src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer-legacy.js">
</script>
סיכום
רוצה לנסות את הגרסה החדשה של <model-viewer>? נשמח לשמוע מה דעתך.
אפשר להיעזר ב-GitHub כדי לדווח על בעיות ולשלוח משוב.